728x90
2단 레이아웃은 header 과 footer를 제외하고 content 부분에 우측 부분에 aside를 두어서 두개로 나누어진 레이아웃이다.
구현은 float를 사용하는 방법과 table / table-cell을 사용하는 방법 2가지가 있다.
====== float 사용 ======
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>2단 레이아웃</title>
</head>
<body>
<div id="wrap">
<header class="header">header</header>
<section class="container">
<div class="content">content</div>
<div class="aside">aside</div>
</section>
<footer class="footer">footer</footer>
</div>
</body>
</html>container이라는 section으로 하나로 묶어주고 그 안에 컨텐츠영역과 aside영역을 구분해 놓았다.
css
@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 리셋css 끝 */
/* 높이값을 지정하기 위해 부모요소에 높이지정 */
html, body, #wrap{
height: 100%;
}
/* 창 크기가 줄어 들었을 때 헤더와 푸터가 짤리지 않도록 최소 넓이 지정*/
#wrap{
min-width: 800px;
}
/* 해더 */
.header{
background-color: lightblue;
height: 100px;
}
/* 컨테이너 전체 css , 포지션은 aside의 after요소에 기준을 잡기위해 주었고
마진과 패딩은 해더와 푸터의 높이값을 제하고 가운데 하기 위해 선언
footer를 문서의 맨 아래 위치하기 위함
*/
.container{
position: relative;
width: 800px;
margin: -100px auto;
padding: 100px 0;
min-height: 100%;
box-sizing: border-box;
}
/* float 해제 */
.container::after{
content: '';
display: block;
clear: both;
}
/* 컨텐츠 영역 */
.content{
width: 500px;
height: 1000px;
float: left;
background-color: lightsalmon;
}
/* aside 영역 */
.aside{
width: 300px;
height: 1000px;
float: left;
background-color: lightgreen;
}
/* content, aside 구분을 위한 구분선을 가상요소로 삽입 */
.aside::after{
content: '';
position: absolute;
top: 100px;
right: 300px;
bottom: 100px;
width: 5px;
background-color: #000;
}
/* footer */
.footer{
background-color: lightpink;
height: 100px;
}
====== table , table-cell 을 활용 ======
html 은 위와 동일하다.
css도 약간의 변화만 있다.
css
@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 리셋css 끝 */
/* 높이값을 지정하기 위해 부모요소에 높이지정 */
html, body, #wrap{
height: 100%;
}
/* 창 크기가 줄어 들었을 때 헤더와 푸터가 짤리지 않도록 최소 넓이 지정*/
#wrap{
min-width: 800px;
}
/* 해더 */
.header{
background-color: lightblue;
height: 100px;
}
/* 컨테이너 전체 css , 포지션은 aside의 after요소에 기준을 잡기위해 주었고
마진과 패딩은 해더와 푸터의 높이값을 제하고 가운데 하기 위해 선언
footer를 문서의 맨 아래 위치하기 위함
부모요소 table 선언
*/
.container{
display: table;
position: relative;
width: 800px;
margin: -100px auto;
padding: 100px 0;
min-height: 100%;
box-sizing: border-box;
}
/* 컨텐츠 영역 자식요소 cell 선언*/
.content{
display: table-cell;
width: 500px;
background-color: lightsalmon;
}
/* aside 영역 자식요소 cell 선언*/
.aside{
display: table-cell;
width: 300px;
background-color: lightgreen;
}
/* content, aside 구분을 위한 구분선을 가상요소로 삽입 */
.aside::after{
content: '';
position: absolute;
top: 100px;
right: 300px;
bottom: 100px;
width: 5px;
background-color: #000;
}
/* footer */
.footer{
background-color: lightpink;
height: 100px;
}
table-cell을 선언하게 되면 높이값에 상관없이 최대 높이를 가지기 때문에 , height값이 필요없다.
* 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.
728x90
'HMTL & CSS' 카테고리의 다른 글
| 기본 메뉴바 만들기 (0) | 2020.08.19 |
|---|---|
| fixed layout / 따라오는 메뉴 (0) | 2020.08.19 |
| 레이아웃 - 1단 레이아웃 ( layout ) (0) | 2020.08.19 |
| reset.css 에 대한 설명 및 예제 (0) | 2020.08.18 |
| Button Animation Html / Css 코드 (0) | 2020.03.24 |