[HTML] 레이아웃 배치와 시맨틱 태그

배치의 중요성

- CSS 우겨 넣으면 유지보수가 어렵고, 변경사항 있으면 대응하기 어렵다.

- 반응형 만들 때도 배치를 잘못 잡으면 엄청나게 어렵다.

그러면 HTML 구조와 레이아웃은 어떻게 잡으면 좋을까?

 

배치 쉽게 하는 방법

- 먼저 가로 방향으로 가상의 구역을 나눠본다. 항상 가로 먼저.

- 가로로 나눈 가상의 구역에서 또 가로로 나눌 수 있는 구역을 생각해본다.

- 더 이상 가로로 나눌 수 없으면 세로 방향으로 잘라서 레이아웃 배치를 진행한다.

 

시맨틱 태그(Semantics)

- div 태그만으로는 어떤 역할을 하는지 알 수 없다.

- 그래서 <div id="header"> 이런식으로 역할을 알려줬었다.

- HTML5가 들어오면서 id="header", id="footer" 이런식으로 많이 쓰다보니까, 그냥 <header>를 만들어줬다.

- 비슷한 의미로 자주 쓰는 tag로는 <header>, <nav>, <main>, <footer>, <figure>, <aside> 등이 있다.

- 현 검색 엔진이 header, nav, footer를 잘 못알아차리는 경우가 있지만, 검색 엔진이 좀 더 발달하면 시맨틱 태그 들의 중요성이 올라갈 가능성도 있다.

- 시맨틱 태그들은 의미를 가지고 있기 때문에, <main>은 하나만 써야하는 등 제약들이 존재한다.

- 제약들을 모두 외우기는 어렵기 때문에, Validity같은 Chrome Extension을 이용하면 좋다.