추가 적립 안내

『웹의 기본』은 HTML을 정보, 기술, 사용자 측면에서 해석하고 실제 어떻게 응용되는지 예시를 통해 알기 쉽게 설명한다. 현재 및 과거 버전의 HTML 규격과 관련 문서, 마이크로소프트 모질라 구글 등 웹 브라우저 개발사의 기술문서, W3C의 이메일 서신 등을 통해 확인한 HTML 5 기준 102개의 요소와 88개의 속성의 제정 이유와 배경을 담고 있다.

웹의 기본(Basics of the Web). 가공되지 않는 원문 그대로의 콘텐츠가 서비스 가능한 웹 콘텐츠로 바뀌는 과정을 통해 올바른 웹을 만들기 위한 기본 기술과 방법을 다룬다. 이미 웹은 생활 속의 일부분이 되어 버렸다. 이제 웹은 기술자만이 알아야 할 대상은 아니다. 기획자, 디자이너, 프로그래머 등 웹을 만드는 사람이라면 기본적으로 알아야 내용이 바로 HTML이다. 이 HTML을 정보, 기술, 사용자 측면에서 해석하고 실제 어떻게 응용되는지 예시를 통해 알기 쉽게 설명한다. 현재 및 과거 버전의 HTML 규격과 관련 문서, 마이크로소프트^모질라^구글 등 웹 브라우저 개발사의 기술문서, W3C의 이메일 서신 등을 통해 확인한 HTML 5 기준 102개의 요소(element)와 88개의 속성(attribute)의 제정 이유와 배경을 담고 있고, 이를 이용하여 한 장의 웹 페이지를 만드는 과정을 기술하였다.

출판사 서평
세상이 온라인化 되면서 우리의 생활과 비즈니스에서 웹은 이미 없어서는 안될 중요한 기술이 되었다. 마케팅, 매체, 데이터베이스, 소프트웨어가 웹으로 만들어 지고 또 이용되고 있다. 그래서 웹을 만드는 사람은 웹을 제대로 이해할 필요가 있다.
웹은 사람을 위해 고안된 기술이자 환경이므로 이를 제대로 이해하기 위해서는 인문과 기술 분야를 함께 아우를 수 있어야 한다. 인문 분야와 비교하면 기술 분야의 관련 표준은 잘 마련되어 있는 편이다. 웹을 이끌고 있는 월드 와이드 웹 컨소시엄(W3C)은 이미 HTML, XML, CSS, JavaScript, SVG, Web API, URL, URI, IRI, HTTP, SOAP, WSDL, RDF 등 다양한 표준기술을 제시하고 있다. 이 중에서 인문과 기술 분야를 가릴 것 없이 웹을 만드는 사람이라면 기본적으로 알아야 할 것이 바로 HTML이다.
이 책은 주로 HTML에 관해 다루고 있다. 개론서나 매뉴얼처럼 HTML을 체계적으로 다루기보다는 한 장짜리 웹 문서를 만들기 위해 얼마나 많은 HTML 요소와 속성이 필요한 지를 알리고, 더 나아가 이 요소와 속성을 의미 있게 사용하려면 기술적 접근만으로는 부족하다는 사실을 이 책을 통해 알리고 싶었다.

웹 표준
웹 표준(Web Standards)은“ 월드 와이드 웹 컨소시엄(W3C)１에서 제시한 표준기술을 지키자”는 기술 가이드(technical guidance)이자 실천 캠페인(practical campaign)이다. 웹의 창시자인 팀 버너스리(Tim Berners-Lee)가 꿈꾸던 웹은 사람들이 함께 일하고 즐기고 교류하기 위해 정보를 서로 나누는 모든 사람의 공간(common space)이었다.
웹은 누구도 상상하지 못할 정도로 폭발적으로 성장해 왔다. 이러한 성장은 정부나 기관이 주도한 것이 아니라 오로지 필요에 의해 이루어졌기 때문에 자유롭고 개방적이다. 그래서 웹은 더 빨리 확산될 수 있었고 더 다양하게 응용할 수 있었다. 한편으로는 그늘도 있었다. 웹이 상용적으로 발전하면서 웹을 이용하기 위한 필수 도구인 브라우저도 상용적으로 발전하게 되었다. 표준기술에 충실한 브라우저보다는 기업 표준에 충실한 브라우저가 시장 논리에 따라 시장을 지배하면서 크고 작은 문제들이 생겨나기 시작하였다.
기업 표준에 충실했던 브라우저는 표준기술에 따라 만든 HTML 문서를 올바르게 처리하지 못했기 때문에 하나의 HTML 문서가 브라우저마다 서로 다르게 처리되는 문제가 발생하였다. 이런 문제 탓에 개발자들은 여러 버전의 HTML 문서를 만들어 브라우저 차이를 극복하거나 표준기술과 상관없이 시장 점유율이 높은 브라우저만을 위한 HTML 문서를 만들기 시작했다.
전자는 비효율적 개발이었고 후자는 비표준적 개발이었다. 대부분의 개발은 후자를 따랐다. 이러한 상황이 널리 퍼지면서 웹이 지니고 있는 보편적 가치가 점점 퇴색되었고 보편적 가치를 지녀야 할 웹이 오히려 특정 기기, 특정 운영체제, 특정 브라우저에 종속되는 문제가 생기게 되었다. 이런 문제를 극복하고자 웹 표준이 등장하였다. 웹 표준은 말 그대로“ 웹을 위한 표준”, 즉“ 월드 와이드 웹에서 제시한 표준기술”을 지키는 것이다. 이 표준기술은 웹을 효율/효과적으로 만들고 이용할 수 있도록 콘텐츠의 구조/표현/동작을 위한 기술로 구분되어 있다(아래 표 참조). 표준기술은 보편적 가치를 추구하는 열린 표준(Open Standard)이므로 브라우저 벤더(Web browser vendor)１,웹 개발자(Web developer), 저작자(Web author, content provider), 기관 및 기업 등 웹에 참여하는 모든 구성원이 지켜야 하는 표준이다.
모든 구성원이 표준기술을 따른다면 웹은 기기, 운영체제, 브라우저에 얽매이지 않고 표준화된 콘텐츠를 자유롭게 만들고 이용할 수 있는 환경이 될 수 있다. 이렇게 되면 팀 버너스리가 바라던“ 모든 사람의 정보 공간”(Common Information Space)이 실현될 수 있으며, 이것이 웹 표준을 추구해야 할 이유다.

영역만들기
본문 영역을 만들기 위해 가장 먼저 해야 할 일은 웹 문서의 구조를 만드는 것이다. 웹 문서는 인쇄물과 달라서 상호작용을 위한 기능성을 포함하고 있다. 그래서 내용을 전달하는 곳과 기능을 실행하는 곳이 비교적 엄격하게 구분되며, 이에 따라 웹 문서는 여러 곳의 영역(section)으로 나뉜다. 이 영역들이 일정한 원리에 따라 구성되면서 웹 문서의 구조가 만들어진다.
일반적으로 웹 문서는 다음과 같은 영역으로 나뉠 수 있다.
· 헤더 영역(header section) : 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(global links)１ 등으로 구성된 영역
· 내비게이션 영역(navigation section) : 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역
· 본문 영역(content section) : 본문 내용을 담고 있는 영역
· 사이드바 영역(sidebar section) : 본문의 왼쪽 또는 오른쪽에 있으며 본문 처리에 도움을 주거나 본문과 관련 있는 요소로 구성된 영역
· 푸터 영역(footer section) : 웹 문서 맨 아래쪽에 있으며 저작권, 연락처 등으로 구성된 영역
물론 모든 웹 문서가 같은 구조를 갖는 것은 아니다. 내비게이션이나 사이드바 영역이 없을 때도 있고 극단적인 경우 헤더나 푸터 영역 없이 본문 영역만으로 구성된 웹 문서도 있을 수 있다. 그러나 대부분의 웹 문서는 위에 있는 그림과 같거나 비슷한 구조로 되어 있으며 고맙게도 HTML에는 이러한 구조를 명확하게 표시할 수 있는 표준기술이 마련되어 있다.
· 헤더 영역(header section) → HEADER 요소
· 내비게이션 영역(navigation section) → NAV 요소
· 본문 영역(content section) → SECTION 요소, ARTICLE 요소
· 사이드바 영역(sidebar section) → ASIDE 요소
· 푸터 영역(footer section) → FOOTER 요소

NAV 요소
NAV 요소는 내비게이션 영역(a section with NAVigation links)을 표시한다. 내비게이션은 다른 곳으로 이동하기 위한 링크(links) 또는 이동 방법을 말한다. 대개 콘텐츠는 한 문서로 구성되는 것이 아니라 여러 문서로 나뉘어 구성되며 비슷한 성격의 문서들이 모여 메뉴 또는 카테고리를 만든다.
각각의 문서로 이동하려면 링크(link)가 필요한데, 이러한 링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것이 바로 내비게이션이며, 이 영역을 NAV 요소로 표시한다. NAV 요소가 특별한 기능성을 제공하는 것이 아니라 단순히 내비게이션이 있는 영역을 표시하는 것이므로 내비게이션은 여전히 A, UL, LI 요소 등을 함께 사용해야 한다.
웹 사이트에서 내비게이션은 필수적인 요소이지만, 이에 관한 공식적인 표준기술은 없었다. 그리고 웹 문서를 어떻게 만들어야 하는지에 관한 표준기술은 있었지만 웹 사이트(웹 문서)를 어떻게 만들어야 하는지에 관한 표준기술은 없었다. 그런데 NAV 요소에 의해 내비게이션 영역을 표시할 수 있는 방법이 생기면서 같은 링크라도 단순히 본문에 있는 링크인지 메뉴(카테고리) 성격의 링크인지 객관적으로 확인할 수 있게 되었다. 그리고 SECTION 요소와 마찬가지로 브라우저가 내비게이션 영역을 알 수 있게 되면 스크린 리더의 내비게이션과 검색엔진의 색인에도 도움을 줄 수 있다.
내비게이션이 있는 자리는 딱히 정해진 바 없다. 예컨대 브랜드 요소인 사이트 이름도 홈으로 돌아가기 위한 내비게이션이고 본문 내용에 직접 링크가 걸려 있는 인라인 링크도 내비게이션이다. 이렇듯 내비게이션은 웹 문서 내 곳곳에 있을 수 있다. 이 모든 것을 NAV 요소로 표시하는 것은 오히려 혼란을 부추길 수 있다. 따라서 링크가 모여 있는 영역이라고 해서 무조건 NAV 요소로 표시하는 것보다는 그 영역이 메인 내비게이션 영역일 때에 한 해 NAV 요소를 사용하는 것이 바람직하다.

들어가면서

1장. 원문과 요구사항
1. 웹 저작의 시작
2. 원문
3. 요구사항

2장. HTML 문서 정의하기
1. 문서유형 선언하기
2. 문서범위 설정하기

3장. 헤더 영역 작성하기
1. 문서 머리 작성하기
2. 스크립트 넣기

4장. 본문 영역 작성하기
1. 영역만들기
2. 내용묶기
3. 외부 콘텐츠 넣기
4. 제목 붙이기
5. 내용 편집하기
6. 테이블 구성하기
7. 폼 만들기
8. 인터랙티브 컨트롤 만들기

지금까지의 결과물
소스
웹 문서 구조

마치면서