1. 레이아웃 설계하기
- layout이란, 웹 사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것
- layout의 핵심은 블록레벨 요소들을 원하는 위치에 배열하는 것이다
2. 레이아웃
<레이아웃1>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01-layout</title>
<style>
* {
margin: 0;
}
header {
background: #BCB1B3;
height: 100px;
}
aside {
background: #DEC8C1;
height: 500px;
width: 50%;
float: left;
}
main {
float:right;
background: #EFDBD4;
width: 50%;
height: 500px;
}
footer {
clear: both;
height: 100px;
background: #BCB1B3;
}
</style>
</head>
<body>
<header>
<h1>header</h1>
</header>
<aside>
<h1>side</h1>
</aside>
<main>
<h1>main</h1>
</main>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
<레이아웃2>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02-layout</title>
<style>
* {
margin: 0;
}
header {
height: 100px;
background: gold;
text-align: center;
}
.left {
width: 100px;
height: 500px;
background: beige;
float: left;
}
.right {
width: 100px;
height: 500px;
background: rgb(104, 104, 52);
float: left;
}
main {
height: 500px;
width: calc(100% - 200px);
background: rgb(185, 185, 62);
float: left;
}
footer {
clear:both;
text-align: center;
line-height: 100px;
height: 100px;
background: coral;
}
</style>
</head>
<body>
<header>
<h1>header</h1>
</header>
<aside class="left">
<h1>side left</h1>
</aside>
<main>
<h1>main</h1>
</main>
<aside class="right">
<h1>side right</h1>
</aside>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
<레이아웃3>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02-layout</title>
<style>
* {
margin: 0;
}
header {
height: 100px;
background: gold;
text-align: center;
}
nav {
height: 80px;
background: dodgerblue;
text-align: center;
}
.left {
width: 100px;
height: 500px;
background: beige;
float: left;
}
.right {
width: 100px;
height: 500px;
background: rgb(104, 104, 52);
float: left;
}
main {
height: 500px;
width: calc(100% - 200px);
background: rgb(185, 185, 62);
float: left;
}
footer {
clear:both;
text-align: center;
line-height: 100px;
height: 100px;
background: coral;
}
</style>
</head>
<body>
<header>
<h1>header</h1>
</header>
<nav>
<h1>nav</h1>
</nav>
<aside class="left">
<h1>side left</h1>
</aside>
<main>
<h1>main</h1>
</main>
<aside class="right">
<h1>side right</h1>
</aside>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
<레이아웃4>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04 layout</title>
<style>
* {
margin: 0;
}
aside {
height: 700px;
width: 200px;
background: gold;
float: left;
}
header {
height: 100px;
/* float: left; */
overflow: hidden;
width: calc(100% - 200px);
background: skyblue;
}
main {
height: 500px;
/* float: left; */
overflow: hidden;
width: calc(100% - 200px);
background: lightcoral;
}
footer {
height: 100px;
/* float: left; */
overflow: hidden;
width: calc(100% - 200px);
background: lightseagreen;
}
</style>
</head>
<body>
<aside>
<h1>side</h1>
</aside>
<header>
<h1>header</h1>
</header>
<main>
<h1>main</h1>
</main>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
<레이아웃5>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05-layout</title>
<style>
* {
margin: 0;
}
header {
height: 100px;
background: purple;
}
nav {
height: 70px;
background: lightcoral;
}
aside {
width: 200px;
height: 500px;
background: rgb(52, 175, 31);
float: left;
}
section.top {
width: calc(100% - 200px);
height: 250px;
background: rgb(173, 53, 157);
float: left;
}
section.bottom {
width: calc(100% - 200px);
height: 250px;
background: rgb(63, 44, 172);
float: left;
}
footer {
clear: both;
height: 100px;
background: gold;
}
</style>
</head>
<body>
<header>
<h1>header</h1>
</header>
<nav>
<h1>nav</h1>
</nav>
<aside>
<h1>side</h1>
</aside>
<section class="top">
<h1>top</h1>
</section>
<section class="bottom">
<h1>bottom</h1>
</section>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
<레이아웃6>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>
06-layout
</title>
<style>
* {
margin: 0;
}
header {
background: gold;
overflow: hidden;
}
.heaeder-left {
height: 100px;
width: 200px;
background: beige;
float:left;
}
.heaeder-right {
float:right;
height: 100px;
width: 200px;
background: deepskyblue;
}
main {
height: 500px;
background: #BCB1B3;
}
section {
overflow: hidden;
background: skyblue;
}
.section-item {
float: left;
margin-right: 5%;
width: 30%;
height: 100px;
background: #DEC8C1;
}
.section-item:last-child {
margin-right: 0;
}
footer {
height: 100px;
background: gold;
text-align: center;
}
</style>
</head>
<body>
<header>
<article class="heaeder-left">
<h1>left</h1>
</article>
<article class="heaeder-right">
<h1>right</h1>
</article>
</header>
<main>
<h1>main</h1>
</main>
<section>
<article class="section-item">
<h1>article</h1>
</article>
<article class="section-item">
<h1>article2</h1>
</article>
<article class="section-item">
<h1>article3</h1>
</article>
</section>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>이처럼 다양한 레이아웃이 있고, float을 이용하면 이런 레이아웃을 뚝딱 만들 수 있다는 장점이 있다
다음 시간엔 레이아웃을 이용한 그리드를 배운다 ! 정말 웹페이지에 대한 걸 다 배워가고 있다는 느낌이 든다 ㅠㅠㅠ
포트폴리..오........
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_69] css의 클래스명에 대하여 (0) | 2021.05.08 |
|---|---|
| [코딩 공부_68] 반응형 웹에 대하여 (0) | 2021.05.08 |
| [코딩 공부_66] float simple project-2 실습하기 (0) | 2021.05.08 |
| [코딩 공부_65] float simple project-1 실습하기 (0) | 2021.05.06 |
| [코딩 공부_64] float란? (0) | 2021.05.04 |
댓글