[HTML] 웹페이지의 구조

우리가 사용하는 웹 페이지는 대부분 다음과 같은 구조를 가진다.

Header
Contents
Footer

이는 꼭 전체 페이지 뿐만 아니라, 하나의 <div> 내에서도 똑같이 적용될 수 있다. 따라서 Header, Contents, Footer 역할을 하는 <div>를 각각 생성한 후, CSS 스타일링을 통해 background-color, box-shadow 값을 수정하여 각각이 차지하는 영역을 확인한 후 작업하는 것이 매우매우 중요하다. 이는 다음과 같이 코드로 나타낼 수 있다.

[HTML]

<div>
	<div>Header</div>
    <div>Contents</div>
    <div>Footer</div>
</div>

[CSS]

div {
	background-color: orange;
}

그러나 여기서 문제가 하나 발생하는데, 기존의 타입 셀렉터를 이용하는 방식으로 CSS 스타일링을 진행하면 Header, Contents, Footer의 구분 없이 똑같이 배경 색상이 적용되어 버린다. 따라서 각각 CSS 스타일을 부여하기 위해서는 각 <div>에 class를 부여하여 역할을 구분해 줄 필요가 있다. 역할을 구분하여 나타낸 코드는 다음과 같다.

[HTML]

<div class="wrapper">
	<div class="header">Header</div>
    <div class="contents">Contents</div>
    <div class="footer">Footer</div>
</div>

단, 각 <div>에 클래스를 부여한 이후에는 클래스 셀렉터를 이용해 스타일링 해야 한다.

[CSS]

div.header {
	background-color: orange;
}

.contents {
	background-color: blue;
}

클래스 선택자는 위와 같이 여러 방식으로 표현할 수 있는데, 상황에 따라 다르게 사용되며 사실 정해진 규칙은 없으나 관례는 타입 셀렉터 없이 .클래스 이름으로 나타내는 것이다.

위의 코드를 개발자들이 더 잘 알아볼 수 있도록, 그리고 검색 엔진(브라우저)이 각 부분의 용도를 쉽게 파악하도록 하기 위해, 다음과 같이 HTML 코드를 수정할 수도 있다. (*단, main은 하나의 웹 페이지에서 한 번만 사용할 수 있다는 제약이 있다.)

<section class="wrapper">
	<header class="header">Header</header>
    <main class="contents">Contents</main>
    <footer class="footer">Footer</footer>
</section>

---

이처럼 각 부분의 용도를 구분해서 사용한다면 보다 쾌적하게 개발을 진행하고, 페이지를 분석하기도 한결 수월할 것이다.