10.
레이아웃: 레이아웃01
난이도 쉬움디자인
소개
안녕하세요!. 웹스토리보이입니다.
사이트 만들기 위한 가장 기본적인 레이아웃 유형을 살펴보겠습니다.
레이아웃은 사이트를 만들기 위한 가장 기본적인 단계입니다.
사이트는 레이아웃 속에 레이아웃으로 구조화 되어 있기 때문에 레이아웃을 이해한다면, 사이트 제작이 수월해집니다.
레이아웃을 만드는 방법은 여러가지로 나눌 수 있습니다.
table 방식, float 방식, flex 방식, grid 방식으로 나눌 수 있습니다.
table 방식은 2000년 대 이전 방식으로 웹 표준을 준수하지 않은 방법으로 현재는 사용하지 않습니다.
float 방식은 2020년 대 이전 방식으로 테이블 방식 대신 이 방법으로 주로 구현되어 왔습니다.
레이아웃을 위한 CSS 속성은 정확하게 존재하지 않았습니다. 그래서 float을 이용하게 되었지만 버그도 발생하고,
레이아웃을 구조화하는데 어려움이 있었습니다.
그래서 현재는 flex 방식과 grid 방식을 사용합니다.
플렉스와 그리드는 레이아웃을 위한 CSS의 새로운 속성이라고 생각하시면 됩니다.
하지만 현재 실무에서는 아직도 float 방식을 많이 사용합니다.
기존에 만들어졌던 사이트들이 float 방식으로 되어 있기 때문에 여러분들은 float 방식도 공부하셔야 합니다.
그래서 저희는 float, flex, grid 세가지 방식으로 레이아웃을 작업할 것입니다.
그럼 준비 되셨죠? 시작해 볼까요! 🤪
- webstandard
- 01_layout
- layout01_01.html : 1. float으로 레이아웃 구성하기
- layout01_02.html : 2. float으로 레이아웃 구성하기 - 반응형
- layout01_03.html : 3. flex로 레이아웃 구성하기
- layout01_04.html : 4. flex로 레이아웃 구성하기 - 반응형
- layout01_05.html : 5. grid로 레이아웃 구성하기
- layout01_05.html : 6. grid로 레이아웃 구성하기 - 반응형
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃 유형01</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 1200px;
height: 100px;
background-color: #FFE0B2;
}
#nav {
width: 1200px;
height: 100px;
background-color: #FFCC80;
}
#aside {
width: 400px;
height: 780px;
background-color: #FFB74D;
float: left;
}
#section {
width: 800px;
height: 780px;
background-color: #FFA726;
float: left;
}
#footer {
width: 1200px;
height: 100px;
background-color: #FF9800;
clear: both;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="aside"></div>
<div id="section"></div>
<div id="footer"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃 유형01</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #FFE0B2;
}
#nav {
width: 100%;
height: 100px;
background-color: #FFCC80;
}
#aside {
width: 30%;
height: 780px;
background-color: #FFB74D;
float: left;
}
#section {
width: 70%;
height: 780px;
background-color: #FFA726;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color: #FF9800;
clear: both;
}
/* 미디어쿼리 */
@media (max-width: 1300px){
#wrap {
width: 96%;
}
}
@media (max-width: 768px){
#wrap {
width: 100%;
}
}
@media (max-width: 480px){
#aside {
width: 100%;
height: 300px;
}
#section {
width: 100%;
height: 480px;
}
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="aside"></div>
<div id="section"></div>
<div id="footer"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃 유형01</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#header {
width: 100%;
height: 100px;
background-color: #FFE0B2;
}
#nav {
width: 100%;
height: 100px;
background-color: #FFCC80;
}
#aside {
width: 30%;
height: 780px;
background-color: #FFB74D;
}
#section {
width: 70%;
height: 780px;
background-color: #FFA726;
}
#footer {
width: 100%;
height: 100px;
background-color: #FF9800;
}
/* 미디어쿼리 */
@media (max-width: 1300px){
}
@media (max-width: 768px){
}
@media (max-width: 480px){
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<section id="section"></section>
<footer id="footer"></footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃 유형01</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#header {
width: 100%;
height: 100px;
background-color: #FFE0B2;
}
#nav {
width: 100%;
height: 100px;
background-color: #FFCC80;
}
#aside {
width: 30%;
height: 780px;
background-color: #FFB74D;
}
#section {
width: 70%;
height: 780px;
background-color: #FFA726;
}
#footer {
width: 100%;
height: 100px;
background-color: #FF9800;
}
/* 미디어쿼리 */
@media (max-width: 1300px){
#wrap {
width: 96%;
}
}
@media (max-width: 768px){
#wrap {
width: 100%;
}
}
@media (max-width: 480px){
#aside {
width: 100%;
height: 300px;
}
#section {
width: 100%;
height: 480px;
}
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<section id="section"></section>
<footer id="footer"></footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃 유형01</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer";
grid-template-columns: 400px 800px;
grid-template-rows: 100px 100px 780px 100px;
}
#header {
background-color: #FFE0B2;
grid-area: header;
}
#nav {
background-color: #FFCC80;
grid-area: nav;
}
#aside {
background-color: #FFB74D;
grid-area: aside;
}
#section {
background-color: #FFA726;
grid-area: section;
}
#footer {
background-color: #FF9800;
grid-area: footer;
}
/* 미디어쿼리 */
@media (max-width: 1300px){
}
@media (max-width: 768px){
}
@media (max-width: 480px){
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<section id="section"></section>
<footer id="footer"></footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃 유형01</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer";
grid-template-columns: 30% 70%;
grid-template-rows: 100px 100px 780px 100px;
}
#header {
background-color: #FFE0B2;
grid-area: header;
}
#nav {
background-color: #FFCC80;
grid-area: nav;
}
#aside {
background-color: #FFB74D;
grid-area: aside;
}
#section {
background-color: #FFA726;
grid-area: section;
}
#footer {
background-color: #FF9800;
grid-area: footer;
}
/* 미디어쿼리 */
@media (max-width: 1300px){
#wrap {
width: 96%;
}
}
@media (max-width: 768px){
#wrap {
width: 100%;
}
}
@media (max-width: 480px){
#wrap {
grid-template-areas:
"header"
"nav"
"aside"
"section"
"footer";
grid-template-columns: 100%;
grid-template-rows: 100px 100px 300px 480px 100px;
}
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<section id="section"></section>
<footer id="footer"></footer>
</div>
</body>
</html>
728x90
