소개
안녕하세요!. 웹스토리보이입니다. 오늘은 네번째 레이아웃을 만들어보겠습니다. 네번째 레이아웃 유형은 기존에 배웠던 레이아웃과 조금 틀립니다. 가운데 영역과 전체 영역이 존재하는 구조입니다. 자세한건 밑에서 확인하죠! 그럼 시작해 볼까요? 🤪
이론
오늘 배울 레이아웃은 전체 영역과 가운데 영역이 포함된 구조입니다. 사용자의 디바이스 크기는 다양합니다. 우리는 어떤 디바이스에서도 잘 나오게 해야 합니다. 전체 영역도 표현할 때 필요하고, 핵심적인 내용은 가운데 항상 표시되어야 합니다. 대부분의 사이트들이 이런 구조로 되어 있습니다.
가장 먼저 VScode에서 webstandard 폴더에서 04_layout04.html 파일을 만들겠습니다.
!를 치고 tab을 누르겠습니다. 언어를 ko로 변경하고 title은 레이아웃 유형04로 변경하겠습니다.
블록요소1를 이용하여 레이아웃 작업을 할 것이며, 레이아웃은 크게 헤더, 네비, 콘텐츠, 푸터 영역으로 설정하겠습니다. 이번엔 아이디 선택자2와 클래스 선택자를 이용하여 이름을 각각 설정하겠습니다.
1. float으로 레이아웃 구성하기
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="section"></div>
<div id="footer"></div>
</div>
4개의 구조로 되어 있기 때문에, header, nav, section, footer 영역으로 만들겠습니다.
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #E0F2F1;
}
#nav {
width: 100%;
height: 300px;
background-color: #80CBC4;
}
#section {
width: 100%;
height: 580px;
background-color: #26A69A;
}
#footer {
width: 100%;
height: 100px;
background-color: #00897B;
}
이번엔 새로운 CSS 단위3가 나왔습니다. px이 아닌 %를 사용하여 전체 영역을 표현하였습니다. 여기서 여백이 생기기 때문에 CSS 초기화4 작업을 하고 넘어가겠습니다.
* {
margin: 0;
padding: 0;
}
마진과 패딩을 초기화하겠습니다.
가운데 영역을 작업하기 위해 새롭게 태그를 추가하겠습니다.
<div id="header">
<div class="header__container"></div>
</div>
<div id="nav">
<div class="nav__container"></div>
</div>
<div id="section">
<div class="section__container"></div>
</div>
<div id="footer">
<div class="footer__container"></div>
</div>
이렇게 색션마다 컨테이너 박스를 만들 것입니다. 이번엔 id가 아닌 class를 만들었습니다. id와 class는 css에서 가장 많이 사용하는 선택자입니다. 주로 전체 영역이나 스크립트와 관련된 부분은 id를 사용하고, 세부적인 곳이나 반복적으로 사용되는 곳은 class를 사용하는 편입니다.
.header__container {
width: 1200px;
height: 100px;
background-color: #B2DFDB;
margin: 0 auto;
}
.nav__container {
width: 1200px;
height: 300px;
background-color: #4DB6AC;
margin: 0 auto;
}
.section__container {
width: 1200px;
height: 580px;
background-color: #009688;
margin: 0 auto;
}
.footer__container {
width: 1200px;
height: 100px;
background-color: #00796B;
margin: 0 auto;
}
각각의 컨테이너 박스한테 영역을 잡고, 배경색을 넣어줍니다. 가운데 오기 위해서5 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>레이아웃 유형04</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #E0F2F1;
}
#nav {
width: 100%;
height: 300px;
background-color: #80CBC4;
}
#section {
width: 100%;
height: 580px;
background-color: #26A69A;
}
#footer {
width: 100%;
height: 100px;
background-color: #00897B;
}
.header__container {
width: 1200px;
height: 100px;
background-color: #B2DFDB;
margin: 0 auto;
}
.nav__container {
width: 1200px;
height: 300px;
background-color: #4DB6AC;
margin: 0 auto;
}
.section__container {
width: 1200px;
height: 580px;
background-color: #009688;
margin: 0 auto;
}
.footer__container {
width: 1200px;
height: 100px;
background-color: #00796B;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="header__container"></div>
</div>
<div id="nav">
<div class="nav__container"></div>
</div>
<div id="section">
<div class="section__container"></div>
</div>
<div id="footer">
<div class="footer__container"></div>
</div>
</div>
</body>
</html>
저랑 결과가 동일한가요? 그럼 이번에는 코드를 효율적으로 변경해보겠습니다.
container가 들어간 클래스는 공통적으로 들어간 요소들이 많습니다. 이 공통 요소들을 뽑아내서 한번만 적어보도록 하겠습니다.
.container {
width: 1200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.2);
margin: 0 auto;
}
아이디와 클래스의 차이점6 중 하나는 아이디는 한번만 사용할 수 있고, 클래스는 여러번 중복해서 사용할 수 있습니다. 그래서 container라고 만들고, 여러번 반복해서 사용할 수 있습니다. height: inherit;은 부모한테 높이 값을 상속 받을 수 있습니다. background-color: rgba(0, 0, 0, 0.2); 백그라운 색상 표헌을 했습니다. CSS 색상 표현7 방법은 여러가가 있습니다. 그중에서 rgba를 이용하여 투명도를 표현하였습니다.
블록구조 가운데 정렬을 위하여 margin: 0 auto;을 사용하였습니다.
<div id="wrap">
<div id="header">
<div class="container"></div>
</div>
<div id="nav">
<div class="container"></div>
</div>
<div id="section">
<div class="container"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
</div>
가운데 영역이 이름을 container로 모두 변경하였습니다. 이렇게 하고 확인을 해보면 기존과 차이가 별로 없습니다. 가운데 영역 백그라운드는 영역을 표시하기 위함이기 때문에 색은 중요하지 않고, 똑같이 영역이 잡힌 것을 확인 할 수 있습니다. 소스 비교 해볼께요! 😷
<!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>레이아웃 유형04</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #E0F2F1;
}
#nav {
width: 100%;
height: 300px;
background-color: #80CBC4;
}
#section {
width: 100%;
height: 580px;
background-color: #26A69A;
}
#footer {
width: 100%;
height: 100px;
background-color: #00897B;
}
.container {
width: 1200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.2);
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="section">
<div class="container"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
</div>
</body>
</html>
소스가 훨씬 더 깔끔해지고, 가독성이 좋아진 것을 확인 할 수 있습니다. 어떤가요? 그렇게 느껴지나요? 코딩에 정답은 없습니다. 효율적인 방법과 효과적인 방법으로 코딩을 하고 결과물이 모든 브라우저에서 잘 나온다면 그게 정답이 되는 것입니다.
2. 시멘틱 태그로 변경하기
그럼 이번에는 시멘틱 태그8로 변경하겠습니다.
<div id="wrap">
<div id="header">
<div class="container"></div>
</div>
<div id="nav">
<div class="container"></div>
</div>
<div id="section">
<div class="container"></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>
<section id="section">
<div class="container"></div>
</section>
<footer id="footer">
<div class="container"></div>
</footer>
</div>
이게 끝입니다. float, flex, grid 레이아웃 연습도 필요가 없겠죠! 가로로 정렬된 것이 없으니, 대부분의 사이트는 전체적으로 이런식의 구조를 가지고 있고, 섹션 안에 새로운 레이아웃이 구성되어있습니다. 즉 레이아웃 속에 레이아웃이 구성되어 있기 때문에 여러분들이 레이아웃을 완벽하게 이해하고 넘어간다면, 사이트 제작이 훨씬 더 수월해 질 것입니다. 그럼 4번째 레이아웃 연습은 여기까지 하겠습니다. 다음 레이아웃에서 만나보겠습니다. 🤹🏻♀️ 수고하셨습니다.
<!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>레이아웃 유형04</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #E0F2F1;
}
#nav {
width: 100%;
height: 300px;
background-color: #80CBC4;
}
#section {
width: 100%;
height: 580px;
background-color: #26A69A;
}
#footer {
width: 100%;
height: 100px;
background-color: #00897B;
}
.container {
width: 1200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.2);
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="container"></div>
</header>
<nav id="nav">
<div class="container"></div>
</nav>
<section id="section">
<div class="container"></div>
</section>
<footer id="footer">
<div class="container"></div>
</footer>
</div>
</body>
</html>
참고
- 1 블록/인라인 요소
- 2 선택자
- 3 CSS 단위
- 4 CSS 초기화
- 5 블록구조 가운데 정렬
- 6 id와 class의 차이점
- 7 CSS 색상 표현
- 8 시멘틱 태그
