[HTML/CSS] 레이아웃 구성하기
우리가 웹페이지를 개발할 때, 디자인된 대로 웹페이지를 보여주기 위해 먼저 해야할 작업은 영역을 어떻게 나누고, 그 영역 내에 요소들을 어떻게 배치해야 하는지 정하는 것이다.
위와 같은 작업을 레이아웃을 구성한다고 하는데, 보통 HTML 으로 레이아웃을 구성하는 것은 크게 3가지로 나뉜다.
- div 요소를 이용한 레이아웃
- HTML5 semantic 요소를 이용한 레이아웃
- table 요소를 이용한 레이아웃
<div> 요소를 이용한 레이아웃
div 요소는 block-level 요소면서 이 특징 외에는 다른 특별한 특징이 없고, css 스타일을 div를 기준으로 적용하면 간편하게 할 수 있어 영역을 구분하는데 사용한다.
css 가 적용이 되어있긴 하지만, div 요소에 영역별로 css 스타일을 입힐 수 있다는 것을 확인하는 것이 목적이다.
HTML5 semantic 요소를 이용한 레이아웃
div 요소를 이용해서도 충분히 레이아웃을 구성할 수 있지만, HTML5 에서는 좀 더 명확하게 영역을 구분할 수 있도록 태그 이름만 봐도 어떤 영역인지 알 수 있게하는 태그들을 제공한다.
아래 인용은 Sementic 요소들이 나온 배경과, Sementic 요소들을 사용하는 이유에 관한 내용이다. (출처 : https://velog.io/@wdelight_c/Semantic-Web-Semantic-Tags)
- Semantic Web이란?
‘의미론적인 웹’이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹- 웹 기술의 발전과 인터넷의 활성화로 정보와 웹사이트의 양이 방대해졌다.
- 이로 인해 다양한 정보들이 축적되었고, 정보가 너무 많아짐에 따라 문제들이 생겨났다.
- 사용자가 직접 처리하는 문제를 해결하기 위해 기계가 읽고 처리할 수 있는 웹을 개발하고자 탄생한 것이 Semantic Web이다.
- 꼭 필요한 정보만 얻을 수 있도록 기계가 스스로 정보의 의미를 해석하고
정보간의 관계를 이해할 수 있도록 하는 것이 Semantic Web 의 목적이다.
<table> 요소를 이용한 레이아웃
table 요소로도 레이아웃을 구성할 수 있다. 오래 전에는 이 방식을 사용하긴 했지만, 현재는 거의 사용하지 않는다.
table 요소 자체가 레이아웃을 만들기 위해 설계된 요소가 아니기 때문에 수정이 힘든 등 레이아웃 구성을 위해 사용하기엔 무리가 있다.
따라서 table 요소로 레이아웃 구성은 지양하는 것이 좋다.
Reference
- [W3School] “HTML tutorial” — https://www.w3schools.com/html/default.asp
- [W3School] “HTML tags” — https://www.w3schools.com/tags/default.asp
- [TCP School] “TCP School” — http://www.tcpschool.com/html/html_space_layouts
- [wdelight_c] “Semantic Web & Semantic Tags를 정리하며 든 생각” — https://velog.io/@wdelight_c/Semantic-Web-Semantic-Tags
