[웹 UI 개발] 레이아웃 - 2 / 다단 레이아웃
2023. 3. 17. 13:21
본문
다단 레이아웃은 1단 레이아웃과 함께 대표적인 레이아웃 형태 중 하나이다.
위 이미지와 같이 콘텐츠의 영역이 2개 또는 그 이상의 행으로 나눠진 레이아웃을 다단 레이아웃이라고 부른다.
다단 레이아웃의 형태를 가진 사이트는 예시는 아래와 같다.
실습
아래 조건을 만족하는 2단 레이아웃을 제작.
- 콘텐츠의 행이 두개를 갖는다.
- 콘텐츠와 사이드 영역의 구분선을 갖는다.
- 구분선은 헤더와 푸터에 항상 맞닿는다.
- 콘텐츠 영역의 가로 길이 : 500px
- 사이드 영역의 가로 길이 : 300px
1. float을 이용한 2단 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2단 레이아웃(float)</title>
<link rel="stylesheet" href="css/reset.css">
<style>
html, body, .wrap {
height: 100%;
}
.wrap {
text-align: center;
}
header {
height: 100px;
background-color: lightgreen;
}
.container {
position: relative;
width: 800px;
min-height: 100%;
margin: -100px auto;
padding: 100px 0;
box-sizing: border-box;
}
.container::after {
display: block;
clear: both;
content: "";
}
section {
float: left;
width: 500px;
height: 300px;
margin: 0 auto;
background-color: lightsalmon;
}
aside {
float: left;
width: 300px;
height: 300px;
background-color: lightseagreen;
}
aside::after {
position: absolute;
top: 100px;
bottom: 100px;
right: 300px;
content: "";
width: 5px;
background-color: #000;
}
footer {
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="wrap">
<header>header</header>
<div class="container">
<section>content</section>
<aside>aside</aside>
</div>
<footer>footer</footer>
</div>
</body>
</html>
/*reset.css*/
/* 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;
}
콘텐츠 영역과 사이드 영역 간의 구분선은 after 가상요소를 통해 구현한다.
단순히 section과 aside에 border-right이나 border-left로 구현하면 구분선이 헤더와 푸터에 맞닿을 수가 없게 된다.
이 때 구분선의 위치를 조정하기 위해 container의 position을 relative로 수정하고 구분선의 position을 absolute로 수정한다.
그리고 화면에 header, content, footer가 한번에 보이게 하기 위해
container의 padding을 header의 세로 길이 만큼 추가하고 margin을 같은 길이 만큼 빼줘서 footer를 올려준다.
이 때 container의 box-sizing을 border-box로 수정하여 height에 padding 값이 추가되지 않도록 한다.
2. display(table, table-cell)을 이용한 2단 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2단 레이아웃(display:table)</title>
<link rel="stylesheet" href="css/reset.css">
<style>
html, body, .wrap {
height: 100%;
}
.wrap {
text-align: center;
}
header {
height: 100px;
background-color: lightgreen;
}
.container {
display: table;
table-layout: fixed;
width: 800px;
min-height: 100%;
margin: -100px auto;
padding: 100px 0;
box-sizing: border-box;
}
section {
display: table-cell;
width: 500px;
margin: 0 auto;
background-color: lightsalmon;
border-right: 5px solid #000;
}
aside {
display: table-cell;
width: 300px;
background-color: lightseagreen;
}
footer {
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="wrap">
<header>header</header>
<div class="container">
<section>content</section>
<aside>aside</aside>
</div>
<footer>footer</footer>
</div>
</body>
</html>
/*reset.css*/
/* 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;
}
콘텐츠 영역과 사이드 영역의 가로 길이가 고정되게 하기 위해 container의 table-layout: fixed 속성을 추가해준다.
그리고 display: table-cell 속성 때문에 콘텐츠 영역과 사이드 영역은 <td>처럼 행동하기 때문에
굳이 height값을 지정해주지 않아도 브라우저의 세로 길이에 맞게 조정된다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| [웹 UI 개발] 메뉴 - 0 (0) | 2023.03.21 |
|---|---|
| [웹 UI 개발] 레이아웃 - 3 / 고정 레이아웃 (0) | 2023.03.17 |
| [웹 UI 개발] 레이아웃 -1 / 1단 레이아웃 (0) | 2023.03.17 |
| [웹 UI 개발] 레이아웃 - 0 (0) | 2023.03.17 |
| [웹 UI 개발] float 해제 (0) | 2023.03.16 |
