01 시작하기에 앞서
HTML이란?
본격적으로 HTML과 CSS에 대해 학습하기에 앞서, HTML과 CSS가 어떠한 의미를 가지며 어떠한 목적으로 사용해야 하는지 알 필요가 있습니다. HTML은 Hyper Text Markup Language의 약자입니다. 각 단어의 뜻을 순서대로 살펴보며 HTML의 의미와 목적에 대해 알아보겠습니다.
하이퍼 텍스트
하이퍼 텍스트(Hypertext)는 하이퍼 링크를 이용해 독자가 원하는 순서에 따라 기존 문서에서 다른 문서로 접근할 수 있는 텍스트입니다. 즉, 하이퍼 텍스트는 책처럼 한 장 한 장 차례대로 내용을 읽는 전통적인 텍스트 접근 방식이 아닌, 링크라는 통로를 통해 원하는 페이지로 바로 도착하는 접근 방식을 가지고 있습니다. 우리의 일상에서 쉽게 볼 수 있는 웹사이트를 예시로 좀 더 쉽게 설명해보겠습니다.
인터넷에서 검색을 시도해보신 분이라면 '위키 백과'를 통해 정보를 얻은 경험이 있을 겁니다. 다음 사진은 HTML에 관한 위키 백과입니다. 일반 도서와 다른 점이 보이시나요?
'위키 백과'의 목차는 하이퍼 링크로 이루어져 있기 때문에 목차를 클릭하면 해당 내용으로 바로 이동합니다. 이렇게 하이퍼 텍스트는 서로 다른 텍스트들이 다중으로 연결되어 있어, 정보에 꼭 순차적으로 접근할 필요 없이 바로 사용자가 원하는 정보에 접근할 수 있습니다.
마크업 언어
마크업(Mark Up)이란 어떠한 표시를 뜻하며, 마크업 언어(Markup Language)는 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어를 지칭합니다. 표시를 하여 문서를 구조화한다는 말이 와닿지 않을 수 있지만, 이는 우리 주변에서 꽤 흔히 쓰이는 방법입니다. 한 가지 예시를 들어볼까요? 구름으로 택배를 보내려고 합니다. 택배를 보내기 위해 필요한 정보를 아래 두 방식으로 정보를 기록하였는데, 과연 어떤 정보가 더 보기 편할까요?
실행 언어: html
실행 언어: html
대부분의 사람들이 아래 방식처럼 각 정보가 어떠한 의미를 가지는지 표시한 것을 더 선호할 겁니다. 좀 더 직관적이고 정보를 파악하기 편하기 때문이죠. 여기서 주소, 수령인, 연락처 같은 표시가 바로 마크업에 해당합니다. 이렇게 마크업 언어는 문서나 데이터의 구조를 표현합니다.
이제까지의 설명을 종합해보면 HTML은 웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어입니다. 아래의 코드를 살펴보면 좀 더 잘 이해되실 겁니다.
실행 언어: html
홑화살괄호인 '<>' 안에 각 텍스트가 무엇을 의미하는지 '마크업'되어 있습니다. 물론 HTML에서 한글 태그가 그대로 쓰이지는 않지만 HTML 작성방법과 그 의미를 파악하는데 충분하실 겁니다.
