[HTML] 기초(2) Document and website structure

웹 사이트를 기획할 때 기본 구조를 잘 정의하는 것은 중요한 과제다. 간혹 모든 영역을 <div> 태그를 이용해 구조를 만든 웹 페이지를 볼 수 있는데, 이는 분명히 잘못된 구조이다. 각 HTML 태그마다 분명한 목적이 있고 해당 목적에 맞도록 잘 배치해서 사용해야 의미가 명확해지고 유지보수에 용이하며 웹 페이지 분석 프로그램에도 유리하다.   

 

웹 사이트를 박스의 집합으로 바라보자

웹 페이지를 구성하는 박스의 역할을 할 수 있는 태그는 다음과 같은 것들이 있다

• <header>, <footer>, <nav>, <aside>, <main>
• <section>, <article>, <div>, <span>, <form>

 

웹 사이트 구조의 예

 

 

카카오 페이지의 구조

 

<article>과 <section>의 차이점

예를 들어 설명하면 <article>은 블로그에서 포스팅 1개로 볼 수 있다. 즉, <article>은 그 자체로 독립적으로 다른 페이지에서 보여줄 때 문제가 없을때 사용할 수 있다. 따라서 <main> 태그와 독립적으로 다른 곳에서 사용해도 문제가 없어야 한다.

<section>은 블로그 내 연관있는 내용의 묶음으로 볼 수 있다. 지금 작성하는 '<article>과 <section>의 차이점' 역시 <section>으로 묶어줄 수 있을 것이다.

 

 

박스 유형과 특성

각 박스 태그에 CSS 속성값으로 줄 수 있는 박스는 블록(Block), 인라인(Inline), 인라인-블록(Inline-Block) 세 가지 유형이 있다. 세 가지 유형의 주요 특징은 다음과 같다 

 

특성	블록	인라인	인라인-블록
출력 시작 위치	새로운 라인	현재 라인의 현재 위치	인라인 박스와 동일
타 박스들과의 관계	같은 라인에 다른 블록 박스들과 연속해서 표시 불가	같은 라인에서 다른 인라인 박스들과 연속해서 표시	인라인 박스와 동일
박스 속성들의 사용 가능 여부	모든 박스 속성 지정 가능	박스 크기, 상하 마진 지정 불가 (width, height, margin-top, margin-bottom 속성은 무시)	블록 박스와 동일

*출처: CSS3+JavaScript와 함께 하는 HTML5 웹 프로그래밍 (조동영)