0004_웹브라우저를 열어보자.

웹브라우저는 우리가 흔히 마주치는 인터넷 익스플로어, 크롬, 사파리 등이다. 이러한 웹브라우저가 어떤 것인지에 대해서 전에는 전혀 관심이 없었다. 주소와 검색, 그리고 앞으로 가기와 뒤로가기 정도를 사용하고 마지막으로 즐겨찾기 정도 쓰는 수준이다. 그런데 이제 HTML을 공부하려고 하니 이 웹브라우저라는 것에 대해서 흥미가 생긴다. 그래서 이번에는 웹브라우저라는 것에 대해서 몇가지 호기심을 채워보려고 한다. 

웹브라우저는 무척 간단한 쓰임새를 가지고 있지만 다양한 자료가 웹브라우저에 올라온다. 우리는 웹브라우저를 통해서 예쁘게 꾸며진 웹페이지의 글, 동영상, 음악, 사진 등등을 보고 듣고 즐긴다. 갑자기 브라우저의 다재다능함이 어느 정도 수준인지 호기심이 생겨서 이것저것 실험을 해보고 싶어졌다.

여러 HTML 관련 교재를 읽어보니 브라우저에 무엇인가를 쓰는 방법은 매우 간단했다. 

우선 메모장(Notepad)을 열고 거기에 쓰고 싶은 내용을 쓴다. 그리고 저장할 때 확장자를 .txt가 아닌 .html로 저장한다.

그래서 아래의 그림처럼 만들어서 저장해보았다.

그랬더니 이 파일의 아이콘이 웹페이지 아이콘으로 나타났다. 그리고 그 파일을 크롬하고 인터넷 익스플로어의 두 종류의 웹브라우저로 열어보았다. 

크롬과 인터넷 익스플로어의 웹브라우저에 Hello World! 라고 쓰여진 문장이 보인다. 

평소 URL을 보여주던 주소입력 부분에는 파일 경로가 나타난다. (URL과 파일의 경로가 어느 정도 유사한 개념인가 보다?)

탭 부분은 크롬에서는 파일명을 보여주고 있지만, 인터넷 익스플로어에는 파일경로가 들어간 것이 조금 다르다. 

메모장으로 확장자를 .html로 만들어서 저장하면 해당 파일이 브라우저에서 열린다는 사실을 알게 되었다. 

그런데 또 궁금하다. .html로 뒤이어 붙여야만 되는 것일까?

그냥 메모장에 .txt로 쓴 것도 웹브라우저가 읽을까?

이번에는 메모장(Notepad)에 Text 방식으로 다음과 같이 적어 보았다.

저장하면서 start002.txt 라고 저장하니 더블 클릭을 하면 메모장만 열리지 웹브라우저가 열리지 않는다.

그래서 웹브라우저를 열고 거기에 start002.txt 파일을 드래그해서 집어넣으니 훌륭하게 다음과 같이 읽힌다.

(여기서 확장자라는 것은 컴퓨터에게 이 파일을 열 때 어떤 프로그램을 쓰는지 가르쳐주는 것일뿐 해당 파일의 내용을 좌지우지 하는 것은 아니라는 점을 처음으로 알게 되었다.)

이번에는 메모장에서  굵게, 기울임꼴 등.... 여러 가지 서식을 적용해보고 이를 웹브라우저로 읽어보았지만 웹브라우저에는 해당 서식은 전혀 적용되지 않고 그냥 위의 그림처럼 평면적인 텍스트만 보여주었다.

그 외에도 평소 자주 사용하는 다양한 파일을 드래그해서 웹브라우저에 넣어 보았다. 

한글2010 파일과 MS의 파워포인트, 워드 파일은 전혀 열리지 않았다.

사진은 바로 화면에 표시되고 음악은 바로 플레이되지만 동영상은 열리지 않았다. 

요약하면 이렇다.

이와 같은 몇가지 실행을 통해 추정해 볼 수 있는 점이 이것이다. 사진과 음악, 그리고 서식이 적용되지 않은 텍스트는 웹브라우저에서 바로바로 해당 파일을 읽어서 표시할 수 있는 형식이다. 하지만 특별한 글의 서식이나 화면 분할, 동영상 같은 것은 웹브라우저에서 쓰는 방식과 다른 워드프로세스 프로그램, 동영상 프로그램에서 쓰는 방식과는 차이가 있는 것 같다. 그렇다는 이야기는 웹브라우저에서 서식을 지정하고 동영상을 플레이함에 있어서 몇가지 제약이 있을 것으로 추정된다. 

이번 앙키로그(Ankilog)는 실습이자 실험이므로 간단하게 해당 실습을 환기할 수 있는 수준의 간단한 Anki 파일로 만들었으니 이점 참고하시고 아래의 파일을 다운받기 바랍니다. 

Anki 학습 파일 :  0004_웹브라우저를 열어보자..apkg

0003_HTML에 대한 간단한 소개

정식 명칭 : Hyper Text Markup Language

월드와이드웹(www)에서 웹페이지를 부호화하고 Hyper Text 링크를 제공하는 언어

Markup의 측면과 Hyper Text의 두 가지 측면이 있음

Markup적인 측면에서 머리말, 문단, 도표 등의 구조를 제공하고

Hyper Text적인 측면에서 앵커로 웹주소(URL)을 가리켜 다른 웹페이지의 링크를 제공한다.

Anki로 공부하시려면 아래의 파일을 다운받아 공부하시면 됩니다.

Anki 학습 파일 2가지 버전

0003_HTML에 대한 간단한 소개(기본_질의_응답_형식).apkg

0003_HTML에 대한 간단한 소개(빈칸_채우기_형식).apkg

0002_웹의 구조와 HTML의 역할

간략한 웹의 구조는 다음과 같다.

웹페이지 관련 파일들을 보유하고 있는 웹서버는 인터넷에 연결된 컴퓨터로 웹브라우저의 요청에 따라 파일을 제공한다.

웹브라우저는 웹서버에 HTML 페이지를 요청하고 요청에 대한 응답을 받아 화면에 보여준다.

이러한 웹의 구조하에서 HTML의 역할은 웹페이지의 구조와 내용을 브라우저에게 알려주는 것이다.

Anki로 공부하시려면 아래의 파일을 다운받아 공부하시면 됩니다.

Anki 학습 파일 : 0002_웹의 구조와 HTML의 역할.apkg