내용

  1. 자료실
  2. 내용
글번호 645
작성자 heojk
작성일 2017-04-26 11:05:13
제목 페이지 레이아웃 연습하기
내용 페이지 레이아웃 연습하기 layout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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 파일을 수정하여 다음과 같이 레이아웃이 구성되도록 하세요.