내용

글번호 645
작성자 heojk
작성일 2017-04-26 11:05:13
제목 페이지 레이아웃 연습하기
내용 페이지 레이아웃 연습하기 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 파일을 수정하여 다음과 같이 레이아웃이 구성되도록 하세요.