페이지 레이아웃 연습하기
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<link rel="stylesheet" href="layout.css">
</head>
<body>
<header id="header">HEADER</header>
<div id="container">
<div id="l_content">
<nav id="sidemenu">SIDEMENU</nav>
<section id="content">CONTENT</section>
</div>
<aside id="banner">BANNER</aside>
</div>
<footer id="footer">FOOTER</footer>
</body>
</html>
layout.css
body > * {
padding: 5px
}
#header {
height: 50px;
border: 1px solid black;
text-align: center;
}
#container {
border: 1px solid black
}
#l_content {
border: 1px dashed blue
}
#sidemenu {
border: 5px groove red
}
#content {
border: 10px inset yellow;
width: 300px; height: 100px
}
#banner {
border: 1px dotted green
}
#footer {
height: 50px;
border: 1px solid red;
}
#container:after {
}
- 위 HTML 문서를 실행시키면 다음과 같이 결과가 출력됩니다.
- CSS 파일을 수정하여 다음과 같이 레이아웃이 구성되도록 하세요.
|