책 이미지
책 정보
· 분류 : 국내도서 > 컴퓨터/모바일 > 웹디자인/홈페이지 > 웹기획
· ISBN : 9791195072606
· 쪽수 : 414쪽
· 출판일 : 2013-07-25
책 소개
목차
들어가면서 : 웹, HTML, HTML 문서, 콘텐츠 종류, 요소와 속성, 부모 요소와 자식 요소, 블록 레벨 요소와 인라인 요소, 웹 페이지와 웹 문서, 사용자 도구, 웹 브라우저, 보조기술, 웹 표준, 웹 접근성, 웹 디자인과 웹 저작
1장. 원문과 요구사항 : 웹 저작의 시작, 원문, 요구사항
2장. HTML 문서 정의하기 : 문서유형 선언하기, 문서범위 설정하기
3장. 헤더 영역 작성하기 : 문서 머리 작성하기, 스크립트 넣기
4장 : 본문 영역 작성하기 : 영역만들기, 내용묶기, 외부 콘텐츠 넣기, 제목 붙이기, 내용 편집하기, 테이블 구성하기, 폼 만들기, 인터랙티브 컨트롤 만들기
저자소개
책속에서
웹 표준
웹 표준(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)으로 나뉜다. 이 영역들이 일정한 원리에 따라 구성되면서 웹 문서의 구조가 만들어진다.
일반적으로 웹 문서는 다음과 같은 영역으로 나뉠 수 있다.
o 헤더 영역(header section) : 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(global links)１ 등으로 구성된 영역
o 내비게이션 영역(navigation section) : 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역
o 본문 영역(content section) : 본문 내용을 담고 있는 영역
o 사이드바 영역(sidebar section) : 본문의 왼쪽 또는 오른쪽에 있으며 본문 처리에 도움을 주거나 본문과 관련 있는 요소로 구성된 영역
o 푸터 영역(footer section) : 웹 문서 맨 아래쪽에 있으며 저작권, 연락처 등으로 구성된 영역
물론 모든 웹 문서가 같은 구조를 갖는 것은 아니다. 내비게이션이나 사이드바 영역이 없을 때도 있고 극단적인 경우 헤더나 푸터 영역 없이 본문 영역만으로 구성된 웹 문서도 있을 수 있다. 그러나 대부분의 웹 문서는 위에 있는 그림과 같거나 비슷한 구조로 되어 있으며 고맙게도 HTML에는 이러한 구조를 명확하게 표시할 수 있는 표준기술이 마련되어 있다.
o 헤더 영역(header section) → HEADER 요소
o 내비게이션 영역(navigation section) → NAV 요소
o 본문 영역(content section) → SECTION 요소, ARTICLE 요소
o 사이드바 영역(sidebar section) → ASIDE 요소
o 푸터 영역(footer section) → FOOTER 요소
NAV 요소
NAV 요소는 내비게이션 영역(a section with NAVigation links)을 표시한다. 내비게이션은 다른 곳으로 이동하기 위한 링크(links) 또는 이동 방법을 말한다. 대개 콘텐츠는 한 문서로 구성되는 것이 아니라 여러 문서로 나뉘어 구성되며 비슷한 성격의 문서들이 모여 메뉴 또는 카테고리를 만든다.
각각의 문서로 이동하려면 링크(link)가 필요한데, 이러한 링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것이 바로 내비게이션이며, 이 영역을 NAV 요소로 표시한다. NAV 요소가 특별한 기능성을 제공하는 것이 아니라 단순히 내비게이션이 있는 영역을 표시하는 것이므로 내비게이션은 여전히 A, UL, LI 요소 등을 함께 사용해야 한다.
웹 사이트에서 내비게이션은 필수적인 요소이지만, 이에 관한 공식적인 표준기술은 없었다. 그리고 웹 문서를 어떻게 만들어야 하는지에 관한 표준기술은 있었지만 웹 사이트(웹 문서)를 어떻게 만들어야 하는지에 관한 표준기술은 없었다. 그런데 NAV 요소에 의해 내비게이션 영역을 표시할 수 있는 방법이 생기면서 같은 링크라도 단순히 본문에 있는 링크인지 메뉴(카테고리) 성격의 링크인지 객관적으로 확인할 수 있게 되었다. 그리고 SECTION 요소와 마찬가지로 브라우저가 내비게이션 영역을 알 수 있게 되면 스크린 리더의 내비게이션과 검색엔진의 색인에도 도움을 줄 수 있다.
내비게이션이 있는 자리는 딱히 정해진 바 없다. 예컨대 브랜드 요소인 사이트 이름도 홈으로 돌아가기 위한 내비게이션이고 본문 내용에 직접 링크가 걸려 있는 인라인 링크도 내비게이션이다. 이렇듯 내비게이션은 웹 문서 내 곳곳에 있을 수 있다. 이 모든 것을 NAV 요소로 표시하는 것은 오히려 혼란을 부추길 수 있다. 따라서 링크가 모여 있는 영역이라고 해서 무조건 NAV 요소로 표시하는 것보다는 그 영역이 메인 내비게이션 영역일 때에 한 해 NAV 요소를 사용하는 것이 바람직하다.
<!DOCTYPE html>
<html lang=“ko”>
<head>
…
</head>
<body>
<header>
헤더 영역
</header>
<nav>
내비게이션 영역
</nav>
</body>
</html>
