CSS 레이아웃

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를 대신할 여러 태그가 나왔으니 한번 살펴보시고 의도적으로 사용하려고 노력하면 좋을 것 같습니다.
https://www.w3schools.com/html/html5_semantic_elements.asp
꼭 읽어주세요!

3. 레이아웃 전략

6-7년 동안 구입한 CSS 책이 여러 권이고, 많은 해외의 온라인 강좌도 들었지만 모두 하는 말은 "CSS 레이아웃은 경험을 통해 배우는 것이다" 라고 합니다.

레이아웃을 설계하는 것은 공식이나 정답이 없고, 오히려 예술에 가깝습니다.
현존하는 CSS 프로퍼티를 통해 정말 창의적인 트릭으로 interactive한 사이트를 만들어내고 있는 좋은 웹사이트들이 많습니다.

다음에 있을 여러 프로젝트를 통해 레이아웃 잡는 법을 익히고,
좋은 사이트에 들어가 개발자도구를 보며 어떻게 레이아웃을 잡았는지 보시면 빠르게 습득할 것입니다.

div태그 구획을 논리적으로 나누는 것이다.
div태그에는 id태그 or class태그를 사용하여 각각의 스타일을 적용한다.