CSS - 18. 레이아웃

HTML은 원래 위에서 아래로, 블록 수준 요소들을 순차적으로 나열하며 내용을 표시한다. 하지만 우리가 구현해야 하는 것은 단순 나열이 아니라 신문의 레이아웃처럼 다단 구성을 해야 할 수도 있고, 페이지 임의 위치에 이미지나 텍스트를 자유롭게 배치할 수 있어야 한다.

 

1. <div> 태그에 대해

레이아웃이라고 특별한 것은 없다.

웹 페이지 레이아웃은 어떤 정보를 페이지의 어떤 영역에 넣느냐에 관한 문제이다.

css에서 정보 배치 단위를 정의하기 위해 널리 사용되는 태그가 바로 <div>이다. 이 태그는 요소를 하나의 논리적인 그룹으로 묶거나, 페이지의 구획을 정의할 목적으로 사용된다. <div> 태그는 만들고 나면 class나 id를 부여하여 각각의 스타일을 적용하게 된다.

그러나 id를 적용하면 우선순위가 아주 높다보니 다른 스타일 속성을 쉽게 무력화시키게 된다. id를 범용 하면 #home #banner #nav a와 같이 길고 복잡한 selector를 사용해야 하니, id 대신 class를 더 자주 쓰는 것이 좋다.

물론 한 페이지에 단 하나만 있을법한 논리적인 구분은 id로 해도 좋다. (예. 전체 페이지를 감싸는 #login-page 환영 팝업인 #welcome-popup 과 같은 정도)

 

---

2. 영역 구분 태그

HTML5 버전은 현재 모든 브라우저가 지원하며, 대부분의 개발자가 사용하는 HTML 버전이다. HTML5에서는 div를 대신할 여러 태그가 나왔으니 다른 태그들도 의도적으로 사용하려고 노력하면 좋을 것이다.

 

---

3. 레이아웃 전략

CSS 레이아웃은 경험을 통해 배우는 것이다.

레이아웃을 설계하는 것은 공식이나 정답이 없고, 오히려 예술에 가깝다.