ENFJ 비전공자 개발스터디
HTML 공간 분할 연습 본문
반응형
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>
반응형
'HTML CSS' 카테고리의 다른 글
CSS pseudo-classes 가상 클래스 선택자(link, visited, active, hover, text-decoration) (0) | 2022.01.21 |
---|---|
HTML5 폼 태그 Form Tag GET POST 방식 (0) | 2022.01.18 |
HTML5, 태그 (0) | 2022.01.17 |