<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>레이아웃연습</title>
<style type="text/css">
#header{
width:100%; height:100px;
background-color:black;
}
#nav{
width:20%; height:500px;
background-color:red; float:left; /*붙여주기*/
}
#content{
width:80%; height:500px; /*남은공간에 80%*/
background-color: yellow; float:right;/*오른쪽으로 주면 float +float = 100%된다.*/
}
#footer{
width:100%; height:100px;
background-color: green; clear:both;
}
</style>
</head>
<body>
<div id="header">Header 영역</div>
<div id="nav">Nav 영역</div>
<div id="content">Content 영역</div>
<div id="footer">Footer 영역</div>
</body>
</html>
Css- layout.
div속성으로 영역을 나누어 사용함.
'HtmlCss > CSS' 카테고리의 다른 글
| Css - z-index (0) | 2019.05.26 |
|---|---|
| Css- float (0) | 2019.05.26 |
| Css- table (0) | 2019.05.25 |
| CSS- 박스모델 (0) | 2019.05.25 |
| CSS - 자식필터 (0) | 2019.05.25 |
