[CSS] 3단 레이아웃 (float, display)

Front-End/HTML5 + CSS

[CSS] 3단 레이아웃 (float, display)

리딩리드 2016. 12. 11. 17:40

3단 레이아웃 (float, display)

- 네비게이션, 콘텐츠, 사이드 바

- 가운데 콘텐츠를 브라우저의 크기에 따라 변한다

1. float를 이용한다

1) 소스

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height:500px; } #navigation{ background-color: beige; float: left; width:200px; margin-right:-200px; } #content{ float:left; width:100%; } #content-inner{ margin: 0 200px; background-color: cornflowerblue; } #sidebar{ float:left; width:200px; margin-left:-200px; background-color: cadetblue; } </style> </head> <div id="navigation">navigation</div> <div id="content"> <div id="content-inner">content</div> </div> <div id="sidebar">sidebar</div>

- float 속성을 이용하여 레이어를 left 로 차례대로 붙인다

- 가변적으로 폭을 변하게 하기위해 하나의<div>가 아니라 안쪽의 inner <div>를 추가한다

- 만약 레이어가 왼쪽으로 하나더 붙는다면 clear속성을 사용하여 방지 한다

2. display : table-cell 사용

- float 보다 간결하다

1) 소스

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height:500px; } #body{ width:100%; display: table; } #navigation, #content, #sidebar{ display: table-cell; } #navigation{ width:200px; background-color: cadetblue; } #content{ background-color: cornflowerblue; } #sidebar{ width:200px; background-color: beige; } </style> </head> <div id="body"> <div id="navigation">navigation</div> <div id="content">content</div> <div id="sidebar">sidebar</div> </div>

- 전체를 <table>로 만든 후 <div>를 table-cell이 됨

3. 화면