728x90
fixed 레이아웃
자주 쓰는 레이아웃이며 header가 고정이 되어 따라오는 형태를 띄는 레이아웃이다.
2가지 형태의 레이아웃을 실습한다.
1. 상단이 고정되어있고 컨텐츠 길이가 늘어나면 푸터도 밀려나는 형태
2. 상단 하단이 모두 고정되어있고 컨텐츠 길이가 늘어나면 스크롤이 생기는 형태
예제코드를 살펴보자
html / 1번,2번 공통사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="8. 0819-layout-3.css">
<title>fixed 레이아웃 실습</title>
</head>
<body>
<div class="wrap">
<header class="header">header</header>
<section class="container">
<div class="content">content</div>
</section>
<footer class="footer">footer</footer>
</div>
</body>
</html>css / 1번 적용 , 2번 주석 풀기
@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;
}
/* reset.css End */
/* start */
html, body, .wrap{
height: 100%;
}
.wrap {
text-align: center;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: lightblue;
}
.container {
/* 하단고정 일때 주석 */
margin-top: -100px;
padding-top: 200px;
/* 하단고정 일때 주석 풀기 */
/* padding: 100px 0; */
min-height: 100%;
box-sizing: border-box;
}
.content {
height: 1200px;
margin: 0 auto;
background-color: lightcoral;
}
.footer {
height: 100px;
background-color: lightgreen;
/* 하단고정 일떄 주석 풀기*/
/* position: fixed;
bottom: 0;
left: 0;
right: 0; */
}주석을 풀면 하단고정 레이아웃을 만들 수 있다.
알고보면 fixed는 메뉴가 콘텐츠에 방해받지않고 항상 따라 내려오기 때문에 어디든 접근하기 용이하다.
요즘 웹사이트들은 대부분 fixed 메뉴를 사용하고 있으며 트렌드에 맞춰 사용하는게 좋아보인다 .
footer를 고정하지않고 컨텐츠에 따라 footer이 밀려나는 레이아웃이 많지만, footer를 고정하고 content길이만 조절하고 싶은경우도 있기에 같이 코드를 작성해보았다.
* 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.
728x90
'HMTL & CSS' 카테고리의 다른 글
| 탭(Tab) 레이아웃 만들기 (0) | 2020.08.20 |
|---|---|
| 기본 메뉴바 만들기 (0) | 2020.08.19 |
| 레이아웃 - 2단 레이아웃 ( layout ) (0) | 2020.08.19 |
| 레이아웃 - 1단 레이아웃 ( layout ) (0) | 2020.08.19 |
| reset.css 에 대한 설명 및 예제 (0) | 2020.08.18 |