두 가지 페이지

목록 - 상세페이지. 오직 두 가지의 페이지가 있다(이것도 많다). 네이버의 메인화면은 썸네일로 구성된 목록이고 썸네일을 클릭하면 상세페이지로 이동한다. 구글에서 검색하면 검색결과가 목록으로 출력되고 탭하여 이동한다. 페이스북은 목록에 상세보기를 포함한다. 가끔씩 자세히 기사를 들여다본다. 사람은 더욱 단순한 것을 원한다. 심지어 구글지도는 확대하는 과정에서 목록이 상세보기가 되고 상세보기가 다시 목록이 되는 연속적인(seamless) 인터페이스다.

책

책에는 순서가 있다. 서문, 목차, 내용, 색인, 간기. 시대가 변했을지언정 이 형식은 변하지 않았다. 이러한 구성이 책이라는 매체에서 적합하기 때문이다. html도 이러한 기본적인 형식이 있다. header, nav, main, aside, footer. 새로 런칭한 네이버의 메인페이지를 통해 살펴보자.

물론 실제로 네이버의 소스가 동일한 구성으로 되어있진 않다. 오히려 실제 소스는 html4에 가깝다(이유는 잘 모르겠지만). 어쨌든 전체적인 시각적 구조는 html5의 기본구조에 잘 들어맞는다.

header태그는 브랜딩 영역을 표시한다. 회사의 로고 및 이미지를 포함한다.
nav(navigation)태그는 메뉴영역에 사용된다.
main태그는 메인콘텐츠영역이다. 한 페이지에 반드시 하나만 존재한다.
aside태그는 로그인, 광고 등 기타 콘텐츠를 포함한다.
footer에는 저작권, 연락처 등 페이지 제공자의 퍼블리싱 관련 기본 정보를 담는다.

페이지에는 두 가지 종류가 있다고 했다. 네이버의 경우 상세보기 페이지는 다음과 같다.

이전 장까지의 실습내용은 바로 이 상세보기의 <article>태그
사이에 삽입되는 기사 콘텐츠에 해당한다.

지금까지 기사의 내용을 태그로 만드는 과정을 알아보았다면, 지금부터 할 일은 기사를 포함한 정식 html5 문서를 만드는 것이다. 생각외로 문서 구조가 단순하다는 사실에 놀랐기를 바란다. 이번엔 실습을 해 보자. 실제로 다섯가지 태그로 문서의 형식을 직접 만들어본다.

여기까지 무리없이 잘 진행되었다면, <main>태그 사이에 article태그를 추가하고 그 내용으로 지난 시간 실습했던 h1,p,img로 구성된 소스를 삽입해보자(네이버 상세보기 페이지 도판 참고).