소개
안녕하세요!. 웹스토리보이입니다. 오늘은 마지막 레이아웃 5번째 레이아웃을 만들어보겠습니다. 네번째 레이아웃 유형과 구성은 동일하고 조금 더 디테일하게 작업해보겠습니다. 마지막 레이아웃이기 때문에 복잡하면서도 심플하게 구성을 잡아봐습니다.
이론
오늘 배울 레이아웃은 전체 영역과 가운데 영역이 포함된 구조입니다. 전체적으로 헤더, 내비, 컨텐츠, 푸터로 나누어 집니다. 컨턴츠 영역에 4개의 박스가 들어가는 구조입니다. 그럼 시작해보겠습니다.
가장 먼저 VScode에서 webstandard 폴더에서 05_layout05.html 파일을 만들겠습니다.
!를 치고 tab을 누르겠습니다. 언어를 ko로 변경하고 title은 레이아웃 유형05로 변경하겠습니다.
블록요소1를 이용하여 레이아웃 작업을 할 것이며, 레이아웃은 크게 헤더, 네비, 콘텐츠, 푸터 영역으로 설정하겠습니다. 전체 영역은 아이디 선택자2를 사용하겠습니다.
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="contents"></div>
<div id="footer"></div>
</div>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #EEEBE9;
}
#nav {
width: 100%;
height: 100px;
background-color: #B9AAA5;
}
#contents {
width: 100%;
height: 780px;
background-color: #886F65;
}
#footer {
width: 100%;
height: 100px;
background-color: #4E342E;
}
여백을 없애주기 위해서 CSS 초기화3를 하고, 각각의 요소한테 영역을 주기 위해서 width, height, background-color를 주겠습니다.
<div id="wrap">
<div id="header">
<div class="container"></div>
</div>
<div id="nav">
<div class="container"></div>
</div>
<div id="contents">
<div class="container"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
</div>
가운데 영역을 표현 하기 위해서 container 클래스를 반복하여 재사용하였습니다. id와 class의 차이점4 중 id는 한 번만 사용 가능하고, class는 여러번 사용 가능합니다. 그래서 클래스 container는 각 섹션에 반복적으로 사용되었습니다.
.container {
width: 1200px;
height: inherit;
background-color: rgba(0,0,0,0.3);
margin: 0 auto;
}
height 값은 부모 박스한테 상속을 받고 background-color는 rgba 방식5 이용하여 표현했습니다. rgba 방식을 이용하면, 투명도를 설정할 수 있습니다. a 부분이 투명도를 설정할 수 있으며, 0과 1사이에 값을 설정 할 수 있습니다. 블록구조인 #wrap을 가운데6로 오기 위해서 margin: 0 auto;를 사용하였습니다.
<!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>레이아웃 유형05</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #EEEBE9;
}
#nav {
width: 100%;
height: 100px;
background-color: #B9AAA5;
}
#contents {
width: 100%;
height: 780px;
background-color: #886F65;
}
#footer {
width: 100%;
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
height: inherit;
background-color: rgba(0,0,0,0.3);
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="container"></div>
</div>
<div id="nav">
<div class="container"></div>
</div>
<div id="contents">
<div class="container"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
</div>
</body>
</html>
<div id="contents">
<div class="container">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
</div>
</div>
contents의 자식 요소로 4개의 박스를 만들고, 클래스를 설정하였습니다.
.content1 {
width: 1200px;
height: 100px;
background-color: #74574A;
}
.content2 {
width: 1200px;
height: 200px;
background-color: #684D43;
}
.content3 {
width: 600px;
height: 480px;
background-color: #594139;
}
.content4 {
width: 600px;
height: 480px;
background-color: #4A352F;
}
각각의 자식요소에게 width, height, background-color를 설정합니다.
이렇게 하면 content4 박스는 밑으로 내려갑니다. 블록구조이기 때문에 가로로 정렬이 필요합니다. 지금까지 우리가 연습 float, flex, grid 중 한가지 밥법을 골라서 하면 됩니다.
.content3 {
float: left;
}
.content4 {
float: left;
}
.content3, .content3 요소에 float: left;를 추가합니다.
2. 시멘틱 태그로 변경하기
그럼 이번에는 시멘틱 태그8로 변경하겠습니다.
<div id="wrap">
<div id="header">
<div class="container"></div>
</div>
<div id="nav">
<div class="container"></div>
</div>
<div id="contents">
<div class="container">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
</div>
</div>
<div id="footer">
<div class="container"></div>
</div>
</div>
<div id="wrap">
<header id="header">
<div class="container"></div>
</header>
<nav id="nav">
<div class="container"></div>
</nav>
<main id="contents">
<div class="container">
<article class="content1"></article>
<article class="content2"></article>
<section class="content3"></section>
<section class="content4"></section>
</div>
</main>
<footer id="footer">
<div class="container"></div>
</footer>
</div>
기존이랑 동일하게 변경하시면 됩니다. 크게 다른 점은 없지만, article요소와 section 요소의 사용방법입니다. article 태그는 사이트의 독립적인 컨텐츠 섹션을 설정하고, section 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 여러분이 생각하기에 해당 섹션이 맞는거 같으면 그 섹션 태그7를 사용하시면 됩니다. 코딩에 정답은 없습니다. 가장 효율적인 방법과 효과적인 방법을 사용하면 됩니다. 처음에는 어떤 태그를 써야 할까? 고민을 많이 하지만, 이런 부분에 있어 왜 article 태그를 썼냐? section 태그를 썼냐? 시비거는 사람은 없습니다. 본인이 생각하기에 그 주제에 맞다고 생각하시면 쓰시면 됩니다. 대신 태그의 의미를 정확하게 사용하는 것이 중요하겠죠 😼
3. flex으로 레이아웃 구성하기
레이아웃을 변경하지 않고, CSS를 수정해서 해보겠습니다.
<main id="contents">
<div class="container content__inner">
<article class="content1"></article>
<article class="content2"></article>
<section class="content3"></section>
<section class="content4"></section>
</div>
</main>
container 클래스에 content__inner 클래스를 추가하겠습니다. 클래스는 중복해서 사용할 수 있습니다. 클래스 옆에 한칸을 띄우고 속성값을 설정하면 됩니다.
.content__inner {
display: flex;
flex-wrap: wrap;
}
display: flex;를 선언하고, flex-wrap: wrap;을 설정하면, 자식 요소 크기만큼 레이아웃이 잡힙니다. 끝났습니다. 간단하죠? 확인 한번 해보죠 👍
<!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>레이아웃 유형05</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #EEEBE9;
}
#nav {
width: 100%;
height: 100px;
background-color: #B9AAA5;
}
#contents {
width: 100%;
height: 780px;
background-color: #886F65;
}
#footer {
width: 100%;
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
height: inherit;
background-color: rgba(0,0,0,0.3);
margin: 0 auto;
}
.content__inner {
display: flex;
flex-wrap: wrap;
}
.content1 {
width: 1200px;
height: 100px;
background-color: #74574A;
}
.content2 {
width: 1200px;
height: 200px;
background-color: #684D43;
}
.content3 {
width: 600px;
height: 480px;
background-color: #594139;
}
.content4 {
width: 600px;
height: 480px;
background-color: #4A352F;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="container"></div>
</header>
<nav id="nav">
<div class="container"></div>
</nav>
<main id="contents">
<div class="container content__inner">
<article class="content1"></article>
<article class="content2"></article>
<section class="content3"></section>
<section class="content4"></section>
</div>
</main>
<footer id="footer">
<div class="container"></div>
</footer>
</div>
</body>
</html>
4. grid로 레이아웃 구성하기
이번에도 레이아웃을 변경하지 않고, CSS를 수정해서 해보겠습니다. 참고로 레이아웃을 위한 CSS는 grid 속성이기 때문에 그리드를 통해 레이아웃을 표현하는 방법은 한가지만 있는 것이 아닙니다. 하지만 저희는 제일 쉬운거 먼저 익히고, 하나씩 하나씩 깊이 들어 갈 것입니다. 쉽다고 느끼시는 분들은 조금만 기다리세요 👮
.content1 {
background-color: #74574A;
grid-area: content1;
}
.content2 {
background-color: #684D43;
grid-area: content2;
}
.content3 {
background-color: #594139;
grid-area: content3;
}
.content4 {
background-color: #4A352F;
grid-area: content4;
}
우선 자식 요소에게 width, height 값을 지우고, 그리드 영역 이름을 지정해주겠습니다.
.content__inner {
display: grid;
grid-template-areas:
"content1 content1"
"content2 content2"
"content3 content4"
;
grid-template-columns: 600px 600px;
grid-template-rows: 100px 200px 480px;
}
display: 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>레이아웃 유형05</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #EEEBE9;
}
#nav {
width: 100%;
height: 100px;
background-color: #B9AAA5;
}
#contents {
width: 100%;
height: 780px;
background-color: #886F65;
}
#footer {
width: 100%;
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
height: inherit;
background-color: rgba(0,0,0,0.3);
margin: 0 auto;
}
.content__inner {
display: grid;
grid-template-areas:
"content1 content1"
"content2 content2"
"content3 content4"
;
grid-template-columns: 600px 600px;
grid-template-rows: 100px 200px 480px;
}
.content1 {
background-color: #74574A;
grid-area: content1;
}
.content2 {
background-color: #684D43;
grid-area: content2;
}
.content3 {
background-color: #594139;
grid-area: content3;
}
.content4 {
background-color: #4A352F;
grid-area: content4;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="container"></div>
</header>
<nav id="nav">
<div class="container"></div>
</nav>
<main id="contents">
<div class="container content__inner">
<article class="content1"></article>
<article class="content2"></article>
<section class="content3"></section>
<section class="content4"></section>
</div>
</main>
<footer id="footer">
<div class="container"></div>
</footer>
</div>
</body>
</html>
여기까지 레이아웃 유형이였습니다. 잘 따라하셨나요? 레이아웃은 이게 끝이 아닙니다. 반응형까지 추가하게 되면, 모든 레이아웃을 만들 수 있다고 생각하시면 됩니다. 그 부분은 반응형 사이트 만들기 파트에서 만나보겠습니다. 이제 우리는 레이아웃을 익혔으니, 레이아웃 들어가는 레이아웃을 배워야 합니다. 레이아웃 안에는 배너 유형, 카드 유형, 이미지 유형, 푸터 유형, 메뉴 유형 등 여러가지 유형들이 들어갑니다. 이렇게 유형별로 하나씩 배우면, 가장 기본적인 사이트가 완성이 되겠죠 👨🏫 그래서 사이트 레이아웃과 유형별로 만들는 법만 익히다면, 사이트 만들기는 식은 죽 먹기가 됩니다. 그럼 수고하셨고요~ 다음 파트에서 만나겠습니다.
참고
- 1 블록/인라인 요소
- 2 선택자
- 3 CSS 초기화
- 4 id와 class의 차이점
- 5 CSS 색상 표현
- 6 블록구조 가운데 정렬
- 7 시멘틱 태그
