편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
최신판 | 당신의 편집 | ||
10번째 줄: | 10번째 줄: | ||
==예시 1: float 좌우== | ==예시 1: float 좌우== | ||
*section을 float: left; aside를 float: right한 예제 | |||
* section을 | |||
<source lang='html5'> | <source lang='html5'> | ||
<style> | <style> | ||
51번째 줄: | 50번째 줄: | ||
</body> | </body> | ||
</source> | </source> | ||
:→ http:// | :→ http://jmnote.com/css/section-aside.php | ||
==예시 2: table-cell== | ==예시 2: table-cell== | ||
<source lang='html5'> | <source lang='html5'> | ||
<style> | <style> | ||
body { width: 510px; margin: 0 auto; } | body { | ||
header { background: Salmon; } | width: 510px; | ||
#content { display: table; } | margin: 0 auto; | ||
} | |||
header { | |||
background: Salmon; | |||
} | |||
#content { | |||
display: table; | |||
} | |||
section { | section { | ||
display: table-cell; | display: table-cell; | ||
72번째 줄: | 75번째 줄: | ||
background: LightGreen; | background: LightGreen; | ||
} | } | ||
footer { background: SkyBlue; } | footer { | ||
background: SkyBlue; | |||
} | |||
</style> | </style> | ||
<body> | <body> | ||
87번째 줄: | 92번째 줄: | ||
</body> | </body> | ||
</source> | </source> | ||
:→ 예제: http:// | :→ 예제: http://jmnote.com/css/section-aside-table-cell.php | ||
==같이 보기== | ==같이 보기== | ||
*[[HTML section 태그]] | *[[HTML section 태그]] | ||
*[[HTML aside 태그]] | *[[HTML aside 태그]] | ||
[[분류: CSS]] | [[분류: CSS]] |