HTML5 매뉴얼

1-3-1.HTML

웹 개발은 하나의 기술만으로 구현되지 않으며 여러 가지 기술이 동시에 사용된다. 사용자가 보는 웹 페이지는 그냥 문서인 것 같지만 이 속에 다양한 기술이 녹아 있다. 웹 페이지를 구성하는 기술은 크게 다음 세 가지 부분으로 구성되며 이 세 가지가 모여 유기적으로 잘 동작해야 제대로 된 웹 사이트가 된다.

■ 내용(Content) : 사용자에게 보여줄 콘텐츠다.

■ 모양(Design) : 내용을 읽기 쉽고 예쁘게 배치하는 기술이다.

■ 동작(Function) : 사용자의 동작에 반응한다.

당장 웹 브라우저로 온라인 쇼핑몰을 열어 보자. 판매하는 상품 목록이 나타나는데 이것이 쇼핑몰이 보여 주고자 하는 내용이다. 구매자가 상품의 특성을 잘 파악할 수 있도록 일목 요연하게 보여주며 구매욕구를 자극하기 위한 광고나 세일 문구가 곳곳에 배치되어 있다. 사용자가 마음에 드는 상품을 클릭하면 장바구니에 담아 두고 결제 버튼을 누르면 카드사와 연결하여 결제를 진행하는 동작을 한다.

현대적인 웹 사이트는 적어도 이 세가지 요소는 다 갖추어야 하며 각 부분을 담당하는 기술이 모두 다르므로 웹 개발자는 각 기술에 모두 통달해야 한다. 내용은 HTML로 작성하며 모양은 CSS로 다듬고 동작은 자바스크립트로 기술한다. 웹 사이트를 구성하는 각 기술에 대해 차후 관련 장에서 세부적인 사항을 다루되 일단 어떤 기술인지 간략하게 구경부터 해 보자.

웹의 가장 기본이 되는 기술은 HTML(HyperText Markup Language)이다. Hyper는 그 밖의, 여분의라는 뜻이며 문서 내에 링크를 배치하고 링크를 통해 외부의 다른 문서와 연결된다는 뜻이다. 주로 문자열에 대해 링크를 걸기 때문에 HyperText라고 표현하는데 이미지나 동영상에도 링크를 걸 수 있으므로 더 넓게는 HyperMedia라고 부르기도 한다.

사용자는 문서를 읽다가 궁금한 내용이나 추가적인 정보가 필요한 부분의 링크를 눌러 다른 사이트로 쉽게 이동할 수 있다. 이동한 곳에서 또 다른 링크를 눌러 관련 사이트로 다시 이동한다. 링크를 타고 여기 저기 돌아 다니는 것을 웹 서핑이라고 하는데 마우스만 클릭해도 전 세계의 모든 컴퓨터에 저장된 정보를 볼 수 있다. 링크는 전 세계의 웹 서버를 거미줄처럼 연결해 놓은 것이며 그래서 웹이라고 부른다.

마크업은 문서를 작성하는 체계적인 문법을 의미한다. HTML도 문서이므로 아무렇게나 작성할 수 없으며 일정한 문법이 적용된다. 마크업의 뿌리는 1986년 국제 표준 마크업으로 제정된 SGML이다. 여러 분야에 광범위하게 활용되었지만 너무 복잡해서 배우기 어려웠으며 브라우저를 만들기도 쉽지 않다. SGML을 간략화해서 만든 특수한 응용예가 바로 HTML이며 방만하다 싶을 정도로 문법이 허술하고 관대하다.

1996년에 제정된 XML도 SGML을 간략하게 정리한 것이되 HTML보다는 훨씬 더 엄격하고 정교한 문법을 요구한다. XML은 기계적인 처리가 쉽다는 이점이 있어 개발툴의 레이아웃 작성기, 이북, 웹 서비스 등의 표준 포맷으로 광범위하게 사용되며 특히 응용 프로그램간의 데이터 교환용으로 최적의 포맷이다. XHTML은 XML의 한 응용예로서 HTML을 XML 규칙대로 다시 정리한 것이다. 마크업간의 계보를 그려 보면 다음과 같다.

정리하자면 HTML은 하이퍼 링크를 통해 연결되는 문서를 작성하는 언어이다. 우리는 이 문법을 배워서 규칙에 맞게 HTML 문서를 만들어야 한다. 다음은 인터넷에 대해 설명하는 아주 간단한 HTML 문서의 예이다. 학술 문서나 강좌를 HTML 규칙에 맞게 작성하여 웹 서버의 특정 위치에 올려 두고 주소를 공개하면 누구나 웹 브라우저를 통해 이 문서를 읽을 수 있다.

htmlonly.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>인터넷이란</h2>

<p>인터넷은 네트워크를 연결한 거대 네트워크로서 전세계의 컴퓨터를 연결한다. 인터넷에 연결된 컴퓨터는 언제 어디서나 원하는 정보에 액세스할 수 있다. 인터넷 기반으로 여러 가지 서비스가 개발되어 있다.</p>

<ul>

<li>웹 - 하이퍼텍스트 기반의 문서 공유 서비스이다.</li>

<li>FTP - 파일 전송 프로토콜을 이용한 파일 교환 서비스이다.</li>

<li>email - 전자 우편 시스템이다.</li>

</ul>

<p> 인터넷 서비스 중 가장 인기있는 것은 웹이다. 그래픽 환경에서 마우스로 링크를 눌러 원하는 정보를 쉽게 찾을 수 있어 요즘은 웹이 곧 인터넷이라고 할 수 있다. 웹 기술의 표준은 <a href="http://www.w3.org">W3C</a>에서 관리한다.</p>

</body>

</html>

HTML 규칙에 맞게 작성된 것인데 문자열도 있고 < > 괄호안에 둘러 쌓인 태그도 있어 처음 보는 사람에게는 복잡해 보일 수도 있다. 조만간 이 문법을 하나 둘씩 배우고 실습하게 될 것이다. 이 문서를 웹 브라우저에서 열어 보자.

제목은 타이틀 바나 탭에 표시되며 문서의 내용은 브라우저 중앙에 보기좋게 포맷팅되어 출력된다. 태그의 종류에 따라 어떤 글자는 크게 표시되고 어떤 문단은 목록으로 나타나기도 한다. 문서 중에 링크로 표시된 부분을 클릭하여 다른 사이트로 이동할 수도 있다. HTML은 문서의 내용만 표시할 뿐 디자인이나 동작은 정의할 수 없다. 서버가 문서를 던져 주면 클라이언트는 보여 주기만 할 뿐이다.

HTML은 구조가 단순해서 배우기 아주 쉽다. 태그의 의미가 직관적이고 태그간의 연관성이 낮아 공부하기 용이하며 결과를 바로 확인할 수 있어 실습의 재미도 있는 편이다. 각 태그의 기능과 규칙을 순서대로 익히고 몇 번 실습해 보면 금방 익숙해질 수 있으며 하루만 공부해도 간단한 문서 정도는 만들 수 있다. 그러나 너무 단순하고 태그의 의미를 임의로 확장할 수 없어 표현의 한계가 있다.

1999년 12월에 발표된 HTML 4.01이 표준이며 10년 넘게 큰 변화가 없었다. 현재는 기능을 대폭적으로 확장한 HTML5 표준이 작성되고 있으며 조만간 실질적인 표준이 될 것이다. 중간에 HTML+, DHTML, XHTML 등 많은 확장 마크업들이 발표되었으나 모두 HTML5에게 병합되었다. HTML5가 최신 표준이지만 과거의 모든 것을 다 버린 것은 아니며 이전 문법도 당분간은 유효하다. 그래서 이전 문법도 최소한의 목록은 파악하는 식으로 학습해야 한다.