float
-
[html] float 속성의 이해와 웹 페이지 레이아웃 잡기개발노하우/web.resource 2011. 2. 1. 15:38
이번 글에서는 CSS의 float 속성을 이용하여 웹 페이지의 레이아웃을 잡는 방법에 대해 알아보겠습니다. 이번 글에서 우리의 목표는 블로그와 같은 웹 페이지에서 자주 쓰이는 header, content, sidebar, footer로 구성된 2단 레이아웃을 만드는 것입니다. 즉 다음과 같은 형태의 레이아웃을 잡는 것이 우리의 목표입니다. 위와 같은 레이아웃을 잡기 위한 HTML과 CSS의 기본 구조은 다음과 같습니다. 으로 header, content, sidebar, footer 영역을 나누어 놓았고 각 영역의 크기와 배경색을 정해주었습니다. layout.html layout.css 지금까지의 결과를 브라우져에서 확인해보면 다음과 같습니다. HTML은 기본적으로 웹 페이지의 가장 위에서부터 엘리먼트들..