소개
안녕하세요!. 웹스토리보이입니다. 오늘은 두번째 레이아웃을 만들어보겠습니다. 레이아웃은 사이트 만드는 단계에서 가장 중요한 기초 부분이기 때문에 이 부분을 탄탄하게 이해하고 넘어간다면, 어떤 사이트 유형을 만들더라도 문제가 없을 것입니다. 그럼 시작해 볼까요? 😎
- webstandard
- 02_layout
- layout02_01.html : 1. float으로 레이아웃 구성하기
- layout02_02.html : 2. float으로 레이아웃 구성하기 - 반응형
- layout02_03.html : 3. flex로 레이아웃 구성하기
- layout02_04.html : 4. flex로 레이아웃 구성하기 - 반응형
- layout02_05.html : 5. grid로 레이아웃 구성하기
- layout02_05.html : 6. grid로 레이아웃 구성하기 - 반응형
디자인
이론
오늘 배울 레이아웃은 이런 형태입니다. 첫 번째 배운 레이아웃에서 박스가 하나 더 추가된 형태입니다. 이런 형태도 많이 볼 수 있는 형태입니다. 가장 먼저 VScode에서 webstandard 폴더에서 02_layout02.html 파일을 만들겠습니다.
!를 치고 tab을 누르겠습니다. 언어를 ko로 변경하고 title은 레이아웃 유형02로 변경하겠습니다.
레이아웃 작업을 할 때는 블록 요소1로 레이아웃을 작업합니다. 블록은 하나의 박스라고 생각하면 됩니다. 그림과 같은 레이아웃은 크게 헤더, 컨텐츠, 푸터로 나눌 것입니다. 가운데 3개의 박스는 하나의 박스 안에 넣어서 작업하겠습니다. 아이디 선택자2를 이용하여 이름을 각각 설정하였습니다.
1. float으로 레이아웃 구성하기
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div id="aside"></div>
<div id="section"></div>
<div id="artice"></div>
</div>
<div id="footer"></div>
</div>
처음에 배웠던 레이아웃 유형01 보다는 조금 복잡한가요? 그렇게 어렵지 않으니 하나씩 따라하다보면 감이 잡힐 거예요~ 🤪 다음은 CSS를 작업해보겠습니다. heade 아래에 style 태그를 선언하고 다음과 같이 작성하겠습니다.
#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;
}
#artice {
width: 300px;
height: 780px;
background-color: #4CAF50;
}
#footer {
width: 1200px;
height: 100px;
background-color: #43A047;
}
각각의 박스마다 width, height, background-color를 넣어줍니다. 그럼 여기까지 결과를 확인해볼까요?
<!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>레이아웃 유형02</title>
<style>
#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;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div id="aside"></div>
<div id="section"></div>
<div id="article"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
블록구조이기 때문에 세로로 쭉 나오는 걸 확인 할 수 있습니다. 블록요소는 한 줄에 하나씩만 표현하기 때문에 이런 결과가 나오죠? 그럼 aside, section, article 요소를 가로로 정렬해보겠습니다.
#aside {
width: 300px;
height: 780px;
background-color: #81C784;
float: left;
}
#section {
width: 600px;
height: 780px;
background-color: #66BB6A;
float: left;
}
#article {
width: 300px;
height: 780px;
background-color: #4CAF50;
float: left;
}
#footer {
width: 1200px;
height: 100px;
background-color: #43A047;
clear: both;
}
#aside, #section, #article 요소에게 float: left; 속성을 추가하였습니다. 이렇게 하면 #footer 요소가 사라지기 때문에 #footer 요소한테 clear: both;을 추가하였습니다. 이 방법은 첫 번째 레이아웃에 사용했던 방법입니다. 즉 float으로 인한 영역 깨짐 방지법3 중 첫 번째 방법입니다.
이 방법의 단점은 복잡한 레이아웃 구조에서는 어는 부분이 쉽게 깨지는 것을 인식할 수가 없습니다. 지금은 구조가 간단하기 때문에 footer가 깨지니까 clear: both;를 주면 되지만, 복잡한 구조에서는 그걸 찾기가 쉽지 않습니다. 그래서 두번 째 방법을 알려드리겠습니다. 가장 쉽고 편하게 쓸 수 있는 방법이지만 정식 규칙은 아니라는 점을 알고 있어야 합니다. float: left;를 사용한 박스의 부모에게 overflow: hidden 속성을 넣어주면 됩니다.
overflow: hidden의 원래 기능은 지정한 영역 이외에는 안보이게 설정을 해주는 것입니다. 하지만 이 속성을 넣어주면 높이 값을 인식하기 때문에 구조가 깨지는 것을 방지 할 수 있습니다.
#main {
overflow: hidden;
}
#aside {
width: 300px;
height: 780px;
background-color: #81C784;
float: left;
}
#section {
width: 600px;
height: 780px;
background-color: #66BB6A;
float: left;
}
#article {
width: 300px;
height: 780px;
background-color: #4CAF50;
float: left;
}
#footer {
width: 1200px;
height: 100px;
background-color: #43A047;
}
#main 속성에 overflow: hidden;을 넣어주고 #footer에 clear: both;을 제거하였습니다. 그래도 결과는 잘 나오는 것을 확인할 수 있습니다.
* {
margin: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#wrap 요소를 가운데 정렬 하기4 위해서 margin: 0 auto를 주고 여백을 없애기 위해서 CSS 초기화5 작업을 하겠습니다. 여기까지 잘 따라 했는지 확인해보세요! 😗
<!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>레이아웃 유형02</title>
<style>
* {
margin: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 1200px;
height: 100px;
background-color: #C8E6C9;
}
#nav {
width: 1200px;
height: 100px;
background-color: #A5D6A7;
}
#main {
overflow: hidden;
}
#aside {
width: 300px;
height: 780px;
background-color: #81C784;
float: left;
}
#section {
width: 600px;
height: 780px;
background-color: #66BB6A;
float: left;
}
#article {
width: 300px;
height: 780px;
background-color: #4CAF50;
float: left;
}
#footer {
width: 1200px;
height: 100px;
background-color: #43A047;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div id="aside"></div>
<div id="section"></div>
<div id="article"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
2. 시멘틱 태그로 변경하기
이번에는 시멘틱 태그6로 변경하겠습니다. 웹 표준을 준수하기 위한 가장 기본적인 방법으로 아무 의미가 없는 div 태그를 쓰기 보단 의미가 부여된 시멘틱 태그를 사용하겠습니다.
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div id="aside"></div>
<div id="section"></div>
<div id="article"></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>
<section id="section"></section>
<article id="article"></article>
</main>
<footer id="footer"></footer>
</div>
3. flex으로 레이아웃 구성하기
이번엔 flex 구조롤 작업해보겠습니다.
#main {
display: flex;
}
#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;
}
기존에 float을 지우고 부목 박스 #main 요소에 display: flex;만 넣어주면 끝입니다. 간단하죠? 🥸 그럼 잘 됐는지 확인 해 볼까요?
<!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>레이아웃 유형02</title>
<style>
* {
margin: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 1200px;
height: 100px;
background-color: #C8E6C9;
}
#nav {
width: 1200px;
height: 100px;
background-color: #A5D6A7;
}
#main {
display: flex;
}
#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;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<main id="main">
<aside id="aside"></aside>
<section id="section"></section>
<article id="article"></article>
</main>
<footer id="footer"></footer>
</div>
</body>
</html>
4. grid로 레이아웃 구성하기
이번에는 그리드로 작업을 해보겠습니다.
#main {
display: grid;
grid-template-columns: 300px 600px 300px;
grid-template-rows: 780px;
}
#aside {
background-color: #81C784;
}
#section {
background-color: #66BB6A;
}
#article {
background-color: #4CAF50;
}
#main 속성에 display: grid를 선언합니다. 부모 박스인 #main에서 가로값과 세로값을 다 설정하면 됩니다. 별거 없죠? 😇
body {
background-color: #E8F5E9;
}
마지막으로 배경을 추가하고 마무리 하겠습니다. 오타 있는지 잘 확인해보시고, 마지막 결과랑 확인해보세요!
<!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>레이아웃 유형02</title>
<style>
* {
margin: 0;
}
body {
background-color: #E8F5E9;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 1200px;
height: 100px;
background-color: #C8E6C9;
}
#nav {
width: 1200px;
height: 100px;
background-color: #A5D6A7;
}
#main {
display: grid;
grid-template-columns: 300px 600px 300px;
grid-template-rows: 780px;
}
#aside {
background-color: #81C784;
}
#section {
background-color: #66BB6A;
}
#article {
background-color: #4CAF50;
}
#footer {
width: 1200px;
height: 100px;
background-color: #43A047;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<main id="main">
<aside id="aside"></aside>
<section id="section"></section>
<article id="article"></article>
</main>
<footer id="footer"></footer>
</div>
</body>
</html>
두번째 레이아웃도 3가지 방식으로 만들어 보았습니다. 코딩이 처음에는 어려울 수 있지만, 반복적으로 조금씩 따라하다보면, 재미있을거예요~ 이제 겨우 두번째 예제가 끝났지만, 마지막 예제까지 잘 해봅시다. 그럼 세번째 레이아웃에서 뵐께요~ 😇
참고
- 1 블록/인라인 요소
- 2 선택자
- 3 float으로 인한 영역 깨짐 방지법
- 4 블록구조 가운데 정렬
- 5 리셋 CSS
- 6 시멘틱 태그
