HTML CSS
HTML 공간 분할 연습
madb
2022. 1. 20. 15:33
반응형
div요소를 이용한 레이아웃
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts</title>
<style type="text/css">
#header {
background-color: lightgrey;
height: 100px;
}
#nav {
background-color: #339999;
color: white;
width: 200px;
height: 300px;
float: left;
}
#section {
width: 200px;
text-align: left;
float: left;
padding: 10px;
}
#footer {
background-color: #ffcc00;
height: 100px;
clear: both;
}
#header, #nav, #section, #footer {text-align: center;}
#header, #footer {line-height: 100px;}
#nav, #section {line-height: 240px;}
</style>
</head>
<body>
<h1>div 요소를 이용한 레이아웃</h1>
<div id = "header">
<h2>HEADER 영역</h2>
</div>
<div id = "nav">
<h2>NAV 영역</h2>
</div>
<div id = "section">
<h2>SECTION 영역</h2>
</div>
<div id = "footer">
<h2>FOOTER 영역</h2>
</div>
</body>
</html>반응형