[웹 UI 개발] 레이아웃 -1 / 1단 레이아웃
2023. 3. 17. 12:46
본문
1단 레이아웃은 레이아웃의 종류 중에 가장 기본이 되는 레이아웃이다. 때문에 레이아웃 중에서 제작과정이 가장 단순하고 쉽다.
1단 레이아웃은 위 이미지와 같이 하나의 행으로 이루어진 레이아웃의 형태를 말한다.
상단(header), 중단(section), 하단(footer)의 구성으로 이루어져 있는 것이 가장 일반적이다.
1단 레이아웃의 형태를 가진 사이트의 예시는 아래와 같다.
실습
아래 조건을 만족하는 1단 레이아웃을 제작.
- 콘텐츠 최대 가로 길이 : 1200px
- 콘텐츠 최소 가로 길이 : 800px
- 콘턴츠 가운데 정렬
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>1단 레이아웃</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.wrap {
min-width: 800px;
text-align: center;
}
header {
height: 100px;
background-color: lightgreen;
}
section {
max-width: 1200px;
height: 300px;
margin: 0 auto;
background-color: lightsalmon;
}
footer {
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="wrap">
<header>header</header>
<section>content</section>
<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;
}
reset.css는 에릭 마이어의 reset.css를 그대로 사용함.
웹 브라우저의 가로 길이를 줄였을 때 header, footer가 content 영역과 부자연스럽게 동작하기 때문에 wrap에 min-width를 추가함.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| [웹 UI 개발] 레이아웃 - 3 / 고정 레이아웃 (0) | 2023.03.17 |
|---|---|
| [웹 UI 개발] 레이아웃 - 2 / 다단 레이아웃 (0) | 2023.03.17 |
| [웹 UI 개발] 레이아웃 - 0 (0) | 2023.03.17 |
| [웹 UI 개발] float 해제 (0) | 2023.03.16 |
| [웹 UI 개발] IR 기법 (0) | 2023.03.16 |
