0006_태그의 구성방식 살펴보기

태그는 보통 아래와 같은 방식으로 작성된다.

<태그명>은 시작태그, </태그명>은 종료태그라고 부르며 둘이 앞뒤로 내용(contents)을 둘러싸고 있고 이를 통틀어 요소(element)라 부른다.

Anki 학습파일 : 0006_태그의 구성방식 살펴보기.apkg

0005_웹페이지의 구조와 태그

웹페이지의 구조라는 것은 제목, 머리말, 문단 등을 말한다.

라고 이 블로그 페이지의 제목이 단순히 내부에 아무렇게나 적혀있는 글이 아니라 이 페이지의 전체 내용을 함의하는 제목이다. 

본문의 내용과 제목은 그 가치와 목적이 조금 다르므로 이러한 제목은 단순히 쓰여진 글이 아니라 제목이라고 웹브라우저에게 제시해주어야 한다.

그럼 그것을 어떻게 제시할까?

꺽쇠괄호(bracket)로 둘러쌓인 태그(tag)를 제목의 앞뒤로 달아서 해당 내용이 제목임을 명시한다.

즉, HTML은 태그(tag)를 이용하여 웹페이지의 구조를 웹브라우저에게 제시한다.

Anki 학습 파일 : 0005_웹페이지의 구조와 태그.apkg

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

HTML 공부 시작의 변

’97년 대한민국이 사실상 파산하면서 나라가 고꾸라졌다. 그리고 IMF와 함께 나라의 빚을 갚기 위한 일대의 변혁이 시작되었다. 이러한 사태로 대한민국이 뿌리부터 변하는 그 변화의 한 가운데에 있을 때 그러한 변화와는 큰 관계가 없는 군대에 입대하였고 제대할 즈음에는 IMF 구제금융을 털어낸 나라가 다시 엉금엉금 모양새를 갖추면서 부활하고 있었다. 하지만 IMF 이전과 이후로 대한민국은 많은 것이 바뀌었고 그러한 변화와 떨어져 있다가 2년만에 돌아오니 대한민국 사회는 이질적인 느낌을 줄만큼 달라져 있었다.

HTML를 처음 접했던 것은 2000년 군대를 제대한 그 즈음이었다. 당시, 사회는 군대를 들어가기 전 사회와 생활방식과 활기가 많이 달랐다. 그리고 그 배경에는 초고속 인터넷 회선의 보급이 있었고 IT버블로 사람들은 새로운 대박신화에 열광하고 있었다. 인터넷이 보급되면서 홈페이지가 없으면 시대적 흐름에 따라가지 못하는 못난 사람인 것 마냥 사람들은 유행처럼 너도나도 홈페이지를 만들고, 명함에 자신의 홈페이지 주소를 박아놓던 시절이다.

전자오락에 미쳐 살던 세대로서 PC방의 등장은 무척 반겼다. 그렇지만 프로그래밍을 배우고 홈페이지 제작을 할 줄 알아야 한다면서 기본적으로 HTML 정도는 해야 한다고 사람들이 입을 모아 말하는 것에는 이상할 정도로 거부감이 들었다. 당시의 나는 컴퓨터와 관련된 일체의 것에 전혀 관심이 없었다. 이러한 내용들이 너무 공허하게 들렸기 때문이다.

너도 나도 홈페이지를 제작하지만 그 홈페이지에 올릴 컨텐츠는 없는 시대였다. 사람들은 홈페이지를 만들었지만 내용을 채우는 경우는 드물었다. 그저 사진 한 개만 올라와서 누구누구의 홈페이지라고 표시되어 있는 그런 홈페이지 천지였다. IT 부흥에 따라가는 이러한 태도들이 빈수레처럼 여겨졌고, 개인적으로도 IT를 통해서 무엇을 해보고 싶은 것이 없으니 관심이 있을 리 없다. 

애석하지만 당시의 나의 선택을 후회한다. IT는 정말 놀아볼만한 공간이기 때문이다. 우리는 인터넷에 포위되어 살고 있다. 이젠 모바일 기기까지 나와서 웹에 접속되지 않은 삶이란 것을 상상하기도 어렵게 되었다. 하지만 IT가 무엇인지 어떻게 작동하는지 잘 모르는 나는 그저 그것을 소비하기에 바쁘다. 잘 몰라도 충분히 즐겁게 소비할 수 있으니 문제는 없다. 하지만 조금 내용을 알면 그저 서비스의 객체가 되는 것에서 벗어나 나를 둘러싼 이 웹의 세계와 적극적으로 연결될 수 있다. 멋진 홈페이지를 보면서 소비자로서는 그저 멋있다는 생각을 하겠지만 조금 알고 보면 디자인과 구조에 대한 영감을 얻을 수 있을 것이다. IT세계의 각종 담론과 발전방향에 대한 논의에도 참여할 수 있을 것이고 스스로의 아이디어를 구현해볼 수도 있을 것이다.

개인적으로는 스스로의 아이디어를 구현한다는 점이 가장 마음에 든다. 그리고 이러한 아이디어를 구현하기 위해서는 그저 프로그래밍만 하면 된다는 점도 마음에 든다. 만일 건축을 하거나 유전자 공학을 하거나 첨단 화학실험을 하려고 하면 자본을 감당할 수 있는 어느 회사에 소속되어서 눈치를 보면서 그것을 구현해야 할 것이다. 하지만 IT는 그렇지 않다. 물론, 대용량의 서버나 수퍼컴퓨터 등이 필요하다면 역시 자본이 필요하겠지만 그럼에도 대부분의 아이디어를 집에서 항상 쓰는 컴퓨터의 수준으로 대략적인 구현이 가능하다. 그리고 구현된 것이 쓸만하다면 바로 시장에 해당 제품을 내놓을 수도 있다. 다른 사람과 아이디어를 공유해볼 수도 있고 같이 예술적인 프로젝트를 해볼 수도 있다. 가능성은 무궁무진하다.

또, 좋은 점은 IT 기술이 어렵지 않다는 것이다. 다른 첨단 기술은 접근하기 위해서 많은 실험과 통찰이 필요하고 고가의 실험장비와 큰 자본이 필요하다. 또한, 자연의 법칙이란 것이 오묘하여 인간의 머리로는 잘 이해하기 어려운 것들도 많이 있다. 하지만 IT기술은 그렇지 않다. 상당히 명백하고 단순하다. 물론, 이 분야도 첨단의 부분에서는 많은 철학적인 고뇌와 성찰이 필요하겠지만 단순히 프로그래밍을 배워서 필요한 것을 구현하는 것은 단순한 구현과 검토의 반복일 뿐이다. 접근성도 좋다. 집에서 항상 사용하는 컴퓨터에서 개발환경을 구축하기만 하면 된다. 오픈소스 소프트웨어를 사용하면 비용도 거의 들지 않는다. 구현 결과는 바로바로 알 수 있고 수정이 가능하다. 

마지막으로는 나이가 들어도 할 수 있다. 육체적인 힘을 많이 쓸 필요도 없고, 여러 사람과 긴밀하게 협업을 할 필요도 상대적으로 적다. 취미라면 혼자서 만들어보면서 놀 수도 있다. 늙어서 몸이 움직이지 않더라도 자판을 두들길 수는 있지 않을까? 그러니 늙어서 잘할 수 있는 것을 지금부터 구축해놓으면 잘 놀다 갈 수 있지 않을까? 라고 생각하는 것이다. 치매예방도 될 것이고 말이다.

나이 들어서 공부하는 것이니 너무 어렵게 가장 기초적인 내용부터 컴퓨터의 구조와 설계부터 파악해서 쌓아올리는 것은 바람직하지 않을 것 같다. 원래, 본인의 취향은 가장 기초적인 것부터 구축해서 올리는 것이지만 너무 많은 시간과 노력이 필요할 것 같다. 그래서 가장 쉽게 접할 수 있고 많이 활용할 수 있는 것부터 익혀서 천천히 심화시켜 나가는 방식으로 IT 세계를 탐험해보려고 HTML을 IT 공부의 시작으로 정했다.

공부하는 방식은 당연히 Anki를 적극 활용하는 방식으로 하려고 한다. 어차피, HTML관련 교재나 문서는 웹상에 풍부하게 있으니 다양한 문서들을 참조하여 공부를 해나가고 그 공부 결과를 요약 정리한 내용을 블로그에 올리고자 한다. 그리고 중요한 내용을 학습할 수 있는 Anki파일을 같이 첨부해서 올릴 계획이므로 같이 공부하고 싶은 사람은 Anki파일을 받아서 같이 공부했으면 좋겠다.