1 개요[ | ]
- CSS section, aside 예제
헤더 | |
본문 내용 ... 본문 내용 ... 본문 내용 ... |
사이드바 |
푸터 |
2 예시 1: float 좌우[ | ]
- #content를
overflow: hidden
- section을
float: left
, aside를float: right
한 예제
html
Copy
<style>
body {
width: 510px;
margin: 0 auto;
}
header {
background: Salmon;
}
#content {
overflow: hidden;
}
section {
float: left;
width: 350px;
background: Khaki;
}
aside {
float: right;
width: 150px;
background: LightGreen;
}
footer {
background: SkyBlue;
}
</style>
<body>
<header>헤더</header>
<div id="content">
<section>
<p>본문 내용 ...</p>
<p>본문 내용 ...</p>
<p>본문 내용 ...</p>
</section>
<aside>사이드바</aside>
</div>
<footer>푸터</footer>
</body>
3 예시 2: table-cell[ | ]
- #content를
display: table
- section, aside를
display: table-cell
한 예제
html
Copy
<style>
body { width: 510px; margin: 0 auto; }
header { background: Salmon; }
#content { display: table; }
section {
display: table-cell;
width: 350px;
background: Khaki;
}
aside {
display: table-cell;
width: 160px;
background: LightGreen;
}
footer { background: SkyBlue; }
</style>
<body>
<header>헤더</header>
<div id="content">
<section>
<p>본문 내용 ...</p>
<p>본문 내용 ...</p>
<p>본문 내용 ...</p>
</section>
<aside>사이드바</aside>
</div>
<footer>푸터</footer>
</body>
4 같이 보기[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.