최신판 |
당신의 편집 |
1번째 줄: |
1번째 줄: |
| ==개요== | | ==개요== |
| ;CSS section, aside 예제 | | ;CSS section, aside 예제 |
| | |
| {| class='wikitable' | | {| class='wikitable' |
| |colspan="2"| 헤더 | | |colspan="2"| 헤더 |
9번째 줄: |
10번째 줄: |
| |} | | |} |
|
| |
|
| ==예시 1: float 좌우== | | ==예시== |
| * #content를 <code>overflow: hidden</code>
| |
| * section을 <code>float: left</code>, aside를 <code>float: right</code>한 예제
| |
| <source lang='html5'> | | <source lang='html5'> |
| <style> | | <style> |
46번째 줄: |
45번째 줄: |
| <p>본문 내용 ...</p> | | <p>본문 내용 ...</p> |
| </section> | | </section> |
| <aside>사이드바</aside> | | <aside>사이드</aside> |
| </div>
| |
| <footer>푸터</footer>
| |
| </body>
| |
| </source>
| |
| :→ http://zetawiki.com/ex/css/section-aside.php
| |
| | |
| ==예시 2: table-cell==
| |
| * #content를 <code>display: table</code>
| |
| * section, aside를 <code>display: table-cell</code>한 예제
| |
| | |
| <source lang='html5'>
| |
| <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> | | </div> |
| <footer>푸터</footer> | | <footer>푸터</footer> |
| </body> | | </body> |
| </source> | | </source> |
| :→ 예제: http://zetawiki.com/ex/css/section-aside-table-cell.php | | :→ http://jmnote.com/css/section-aside.php |
|
| |
|
| ==같이 보기== | | ==같이 보기== |
| *[[HTML section 태그]] | | *[[HTML section 태그]] |
| *[[HTML aside 태그]] | | *[[HTML aside 태그]] |
| *[[CSS display 속성]]
| |
|
| |
|
| [[분류: CSS]] | | [[분류: CSS]] |