소개
안녕하세요!. 웹스토리보이입니다. 오늘은 세번째 레이아웃을 만들어보겠습니다. 이런 유형의 사이트도 봤을거예요~ 흔하게 볼 수 있는 형태 입니다. 그럼 바로 시작해볼까요? 🧐
이론
오늘 배울 레이아웃은 이런 형태입니다. 두번째 비슷한 것 같으면서도. 다른 형태입니다. 이 것도 3가지 방식 float, flex, grid 유형으로 만들어보겠습니다.
가장 먼저 VScode에서 webstandard 폴더에서 03_layout03.html 파일을 만들겠습니다.
!를 치고 tab을 누르겠습니다. 언어를 ko로 변경하고 title은 레이아웃 유형03로 변경하겠습니다.
블록요소1를 이용하여 레이아웃 작업을 할 것입니다. 레이아웃은 크게 헤더, 메인, 콘텐츠, 푸터 영역으로 설정하겠습니다. 아이디 선택자2를 이용하여 이름을 각각 설정하였습니다.
1. float으로 레이아웃 구성하기
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div id="aside"></div>
<div id="artice1"></div>
<div id="artice2"></div>
<div id="artice3"></div>
</div>
<div id="footer"></div>
</div>
두번째 레이아웃과 유사한 구조입니다. 전체적인 구조는 4단이며, 메인 안에 4개의 박스가 들어간 형태입니다. 그럼 CSS 속성을 추가하겠습니다.
#wrap {
width: 1200px;
}
#header {
width: 1200px;
height: 100px;
background-color: #C8E6C9;
}
#nav {
width: 1200px;
height: 100px;
background-color: #A5D6A7;
}
#main {}
#aside {
width: 300px;
height: 780px;
background-color: #81C784;
}
#section {
width: 600px;
height: 780px;
background-color: #66BB6A;
}
#article {
width: 300px;
height: 780px;
background-color: #4CAF50;
}
#footer {
width: 1200px;
height: 100px;
background-color: #43A047;
}
각각의 속성에 width, hegiht 값을 설정하고, background-color를 넣어 영역을 확인하겠습니다. 여기까지 하시면 결과가 예상되시나요? 한번 확인해보겠습니다.
여기까지 결과 확인하기 (layout_result03_01.html)
여기까지 코드 확인하기 (layout_result03_01.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>레이아웃 유형03</title>
<style>
#wrap {
width: 1200px;
}
#header {
width: 1200px;
height: 100px;
background-color: #B3E5FC;
}
#nav {
width: 1200px;
height: 100px;
background-color: #81D4FA;
}
#main {}
#aside {
width: 300px;
height: 780px;
background-color: #4FC3F7;
}
#artice1 {
width: 900px;
height: 260px;
background-color: #29B6F6;
}
#artice2 {
width: 900px;
height: 260px;
background-color: #03A9F4;
}
#artice3 {
width: 900px;
height: 260px;
background-color: #039BE5;
}
#footer {
width: 1200px;
height: 100px;
background-color: #0288D1;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div id="aside"></div>
<div id="artice1"></div>
<div id="artice2"></div>
<div id="artice3"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
역시나 블록구조이기 때문에 한줄로 쭉 나오는 걸 확인 할 수있습니다. 우선 main 태그에 자식 요소를 가로로 정렬해 주겠습니다.
#aside {
width: 300px;
height: 780px;
background-color: #4FC3F7;
float: left;
}
#artice1 {
width: 900px;
height: 260px;
background-color: #29B6F6;
float: left;
}
#artice2 {
width: 900px;
height: 260px;
background-color: #03A9F4;
float: left;
}
#artice3 {
width: 900px;
height: 260px;
background-color: #039BE5;
float: left;
}
#aside, #artice1, #artice2, #artice3 요소한테 float: left를 선언하겠습니다. float을 사용하게 되면 구조가 깨지는 버그가 발생합니다. 그래서 우리는 첫 번째 방법으로 clear:both라는 것을 사용하였고, 두번째 방법으로 부모 박스한테 overflow:hidden 속성을 주어 영역 깨짐을 방지하였습니다. 첫번째, 두번째 방법들은 사용하기에 불편하고 완벽하지 않기 때문에 세번째 방법을 사용해 보겠습니다.
세번째 방법은 clearfix를 사용하는 것입니다.
.clearfix:before, .clearfix:after {
content: '';
display: block;
line-height: 0;
}
.clearfix:after {
clear:both;
}
가상요소7를 통해 가상의 영역을 만들어 구조 깨짐을 방지하는 방법입니다. 이렇게 CSS를 설정하고, 부모 박스한테 클래스를 설정하면 됩니다.
<div id="main" class="clearfix">
<div id="aside"></div>
<div id="artice1"></div>
<div id="artice2"></div>
<div id="artice3"></div>
</div>
#wrap 요소에게 margin: 0 auto를 주어 가운데 정렬4을 하겠습니다.
#wrap {
width: 1200px;
margin: 0 auto;
}
여기까지 결과 확인하기 (layout_result03_02.html)
여기까지 코드 확인하기 (layout_result03_03.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>레이아웃 유형03</title>
<style>
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 1200px;
height: 100px;
background-color: #B3E5FC;
}
#nav {
width: 1200px;
height: 100px;
background-color: #81D4FA;
}
#main {
overflow: hidden;
}
#aside {
width: 300px;
height: 780px;
background-color: #4FC3F7;
float: left;
}
#artice1 {
width: 900px;
height: 260px;
background-color: #29B6F6;
float: left;
}
#artice2 {
width: 900px;
height: 260px;
background-color: #03A9F4;
float: left;
}
#artice3 {
width: 900px;
height: 260px;
background-color: #039BE5;
float: left;
}
#footer {
width: 1200px;
height: 100px;
background-color: #0288D1;
}
.clearfix:before, .clearfix:after {
content: '';
display: block;
line-height: 0;
}
.clearfix:after {
clear:both;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main" class="clearfix">
<div id="aside"></div>
<div id="artice1"></div>
<div id="artice2"></div>
<div id="artice3"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
2. 시멘틱 태그로 변경하기
이번에는 시멘틱 태그6로 변경하겠습니다.
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main" class="clearfix">
<div id="aside"></div>
<div id="article1"></div>
<div id="article2"></div>
<div id="article3"></div>
</div>
<div id="footer"></div>
</div>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<main id="main">
<aside id="aside"></aside>
<article id="article1"></article>
<article id="article2"></article>
<article id="article3"></article>
</main>
<footer id="footer"></footer>
</div>
3. flex으로 레이아웃 구성하기
이번에는 flex구조로 작업해 보겠습니다.
<main id="main">
<aside id="aside"></aside>
<section id="contents">
<article id="article1"></article>
<article id="article2"></article>
<article id="article3"></article>
</section>
</main>
main 요소는 aside와 contents요소로 나누고, contents의 자식요소로 article를 만들었습니다.
#main {
display: flex;
}
#aside {
width: 300px;
height: 780px;
background-color: #4FC3F7;
}
#contents {
width: 900px;
height: 780px;
}
#article1 {
width: 900px;
height: 260px;
background-color: #29B6F6;
}
#article2 {
width: 900px;
height: 260px;
background-color: #03A9F4;
}
#article3 {
width: 900px;
height: 260px;
background-color: #039BE5;
}
#footer {
width: 1200px;
height: 100px;
background-color: #0288D1;
}
기존에 불필요한 소스를 지우고, 구조를 세분화하여 다시 작업하겠습니다.
여기까지 결과 확인하기 (layout_result03_04.html)
여기까지 코드 확인하기 (layout_result03_04.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>레이아웃 유형03</title>
<style>
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 1200px;
height: 100px;
background-color: #B3E5FC;
}
#nav {
width: 1200px;
height: 100px;
background-color: #81D4FA;
}
#main {
display: flex;
}
#aside {
width: 300px;
height: 780px;
background-color: #4FC3F7;
}
#contents {
width: 900px;
height: 780px;
}
#article1 {
width: 900px;
height: 260px;
background-color: #29B6F6;
}
#article2 {
width: 900px;
height: 260px;
background-color: #03A9F4;
}
#article3 {
width: 900px;
height: 260px;
background-color: #039BE5;
}
#footer {
width: 1200px;
height: 100px;
background-color: #0288D1;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<main id="main">
<aside id="aside"></aside>
<section id="contents">
<article id="article1"></article>
<article id="article2"></article>
<article id="article3"></article>
</section>
</main>
<footer id="footer"></footer>
</div>
</body>
</html>
4. grid로 레이아웃 구성하기
이번에는 그리드를 이용하여 작업하겠습니다. 그리드의 이점을 살려 구조를 살짝 변경해보겠습니다.
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<article id="article1"></article>
<article id="article2"></article>
<article id="article3"></article>
<footer id="footer"></footer>
</div>
무엇인가 구조화가 안되어 있어서, 가독서이 떨어지지만, 그리드는 이런 형태의 레이아웃을 쉽게 만들 수 있습니다. CSS로 기본 설정으로 변경하겠습니다.
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
background-color: #B3E5FC;
}
#nav {
background-color: #81D4FA;
}
#aside {
background-color: #4FC3F7;
}
#article1 {
background-color: #29B6F6;
}
#article2 {
background-color: #03A9F4;
}
#article3 {
background-color: #039BE5;
}
#footer {
background-color: #0288D1;
}
기본 뼈대만 구성하고 #wrap 요소에게 그리드를 선언하고 작업하겠습니다.
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside article1"
"aside article2"
"aside article3"
"footer footer"
;
grid-template-columns: 300px 900px;
grid-template-rows: 100px 100px 780px 100px;
}
grid-template-areas 속성을 통해 전체적인 레이아웃을 표현할 수 있습니다. 2단으로 구성되어 있기 때문에 header는 두개의 칸이 합쳐진 것으로 생각할 수 있습니다. aside는 세로로 3개의 칸이 합쳐진 것을 볼 수 있습니다. 이렇게 전체적인 레이아웃을 표현 할 수 있으며, 해당 요소에는 이름도 설정해야 합니다. grid-template-columns와 grid-template-rows를 통해 가로와 세로 값을 설정합니다.
#header {
background-color: #B3E5FC;
grid-area: header;
}
#nav {
background-color: #81D4FA;
grid-area: nav;
}
#aside {
background-color: #4FC3F7;
grid-area: aside;
}
#article1 {
background-color: #29B6F6;
grid-area: article1;
}
#article2 {
background-color: #03A9F4;
grid-area: article2;
}
#article3 {
background-color: #039BE5;
grid-area: article3;
}
#footer {
background-color: #0288D1;
grid-area: footer;
}
이렇게 하면 그리드를 이용한 레이아웃 작업이 완료되었습니다. 제 소스랑 비교해보고 확인해 보세요!
마지막으로 전체 영역에 배경색을 넣어주고 CSS 초기화5를 통해 여백을 없애겠습니다.
* {
margin: 0;
}
body {
background-color: #E1F5FE;
}
여기까지 결과 확인하기 (layout_result03_05.html)
여기까지 코드 확인하기 (layout_result03_05.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>레이아웃 유형03</title>
<style>
* {
margin: 0;
}
body {
background-color: #E1F5FE;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside article1"
"aside article2"
"aside article3"
"footer footer"
;
grid-template-columns: 300px 900px;
grid-template-rows: 100px 100px 780px 100px;
}
#header {
background-color: #B3E5FC;
grid-area: header;
}
#nav {
background-color: #81D4FA;
grid-area: nav;
}
#aside {
background-color: #4FC3F7;
grid-area: aside;
}
#article1 {
background-color: #29B6F6;
grid-area: article1;
}
#article2 {
background-color: #03A9F4;
grid-area: article2;
}
#article3 {
background-color: #039BE5;
grid-area: article3;
}
#footer {
background-color: #0288D1;
grid-area: footer;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<article id="article1"></article>
<article id="article2"></article>
<article id="article3"></article>
<footer id="footer"></footer>
</div>
</body>
</html>
마지막 그리드 레이아웃까지 완료되었습니다. 똑같은 레이아웃을 3가지 방식으로 작업을 하니 조금 복잡할 수 있지만 잘 하고 있습니다. 지금 처럼 잘 따라오시면 됩니다. 그럼 다음 섹션에서 만나요! 🥰
참고
- 1 블록/인라인 요소
- 2 선택자
- 3 float으로 인한 영역 깨짐 방지법
- 4 블록구조 가운데 정렬
- 5 CSS 초기화
- 6 시멘틱 태그
- 7 가상요소
728x90
