7장
효과적인 레이아웃을 위한 CSS 속성 다루기

웹 페이지를 만들 때 가장 먼저 해야 할 일은 무엇일까요? 태그를 작성하는 것? CSS 속성을 적용하는 것? 이보다 먼저 해야 할 일은 바로 화면의 레이아웃을 설계하는 겁니다. 실무에서도 레이아웃을 설계한다는 말을 정말 많이 듣게 됩니다. 그러면 레이아웃이란 무엇일까요?

HTML과 CSS 관점에서 레이아웃(layout)이란 HTML 태그로 작성한 구성 요소를 제한된 공간 안에 효과적으로 배열하는 일을 의미합니다. 그리고 HTML과 CSS는 항상 레이아웃을 효과적으로 설계할 수 있는 방향으로 발전했습니다.

HTML5와 CSS3가 등장하기 전에는 레이아웃을 위해, HTML에서는 div와 span 태그가 있었고 CSS에서는 position과 float 속성이 있었습니다. 이런 태그와 속성으로 레이아웃을 설계하는 방법은 현재도 많이 사용합니다.

하지만 HTML5에서는 시맨틱 태그, CSS3에서는 플렉스 박스와 그리드 레이아웃이 새로 추가되면서 현대적인 웹의 레이아웃을 설계하는 작업이 많이 발전했습니다. 시맨틱 태그로 더욱 의미 있게 태그를 작성할 수 있게 됐고, 플렉스 박스와 그리드 레이아웃으로 더욱 편리하게 구성 요소를 배치할 수 있게 됐습니다.

이 장에서는 CSS3에 새로 추가된 레이아웃 속성인 플렉스 박스와 그리드를 자세히 배워 보겠습니다.