안녕하세요! 웹스토리보이입니다 😊
이번에는 B유형을 함께 만들어볼 거예요. B유형은 A유형과 달리 전체 화면을 활용하는 구조입니다. 실제 웹사이트에서도 자주 사용되는 레이아웃이라 꼭 익혀두면 좋아요! A유형보다 조금 더 복잡할 수는 있지만, 반복해서 연습하면 누구나 쉽게 익힐 수 있어요. 그럼 바로 시작해볼까요? 🚀
VSCODE를 실행하고 webdesign폴더 안에 layoutB-1.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 B-1으로 변경해주겠습니다. 상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수 있으니 참고해주세요!
1<!DOCTYPE html>
2<html lang="ko">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>웹디자인개발기능사 레이아웃 B-1</title>
7</head>
8<body>
9
10</body>
11</html>전체적인 구조는 wrap박스 안에 4개의 박스가 있는 구조입니다. 섹션 태그를 이용하여 해당 아이디를 설정했습니다.
1<body>
2 <div id="wrap">
3 <header id="header"></header>
4 <article id="slider"></article>
5 <main id="contents"></main>
6 <footer id="footer"></footer>
7 </div>
8</body>해당 영역을 확인하기 위해 width, height, background-color를 설정하였습니다. 전과 다른 점이 있다면 전체 영역이기 때문에 width값을 100%를 설정한 점이 다릅니다. 100%로 설정하면 브라우저 크기에 맞게 전체로 표현 될 것입니다.
1 * {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 100%;
7}
8#header {
9 width: 100%;
10 height: 100px;
11 background-color: #efefef;
12}
13#slider {
14 width: 100%;
15 height: 300px;
16 background-color: #e3e3e3;
17}
18#contents {
19 width: 100%;
20 height: 200px;
21 background-color: #d9d9d9;
22}
23#footer {
24 width: 100%;
25 height: 100px;
26 background-color: #d1d1d1;
27}헤더 영역은 전체 영역과 가운데 영역으로 구성되어 있고, 가운데 영역은 로고 영역과 네비 영역으로 구성되어 있습니다. 전체 영역을 나타내는 header 영역에는 width: 100%를 설정하고 header_container 영역에는 width 값을 1200px로 설정합니다. header_container 영역은 가운데로 오기 위해서 margin: 0 auto를 설정하겠습니다.
1<div id="header">
2 <div class="header_container">
3 <h1 class="logo"></h1>
4 <nav class="nav"></nav>
5 </div>
6</div>
7<!-- //header -->1#header {
2 width: 100%;
3 background-color: #efefef;
4}
5#haeader .header_container {
6 width: 1200px;
7 margin: 0 auto;
8 display: flex;
9}
10#haeader .header_container .logo {
11 width: 20%;
12 height: 100px;
13 background-color: #d9d9d9;
14}
15#haeader .header_container .nav {
16 width: 80%;
17 height: 100px;
18 background-color: #d1d1d1;
19}슬라이드 영역은 전체 영역이 없고 가운데 영역만 있기 때문에 margin: 0 auto;를 설정하겠습니다.
1<div id="slider"></div>
2<!-- //slider -->1#slider {
2 width: 1200px;
3 height: 300px;
4 margin: 0 auto;
5 background-color: #c7c7c7;
6}컨텐츠 영역도 전체 영역은 없고 가운데 영역만 있는 구조입니다. 가운데 영역 안에 3개의 자식 영역이 들어가는 형태입니다. 3개의 영역은 width값을 33.3333%로 설정하고, 상위 박스영역에는 flex를 설정하겠습니다.
1<main id="contents">
2 <section class="content1"></section>
3 <section class="content2"></section>
4 <section class="content3"></section>
5</main>
6<!-- //contents -->1#contents {
2 width: 1200px;
3 margin: 0 auto;
4 display: flex;
5}
6#contents .content1 {
7 width: 33.3333%;
8 height: 200px;
9 background-color: #bcbcbc;
10}
11#contents .content2 {
12 width: 33.3333%;
13 height: 200px;
14 background-color: #b1b1b1;
15}
16#contents .content3 {
17 width: 33.3333%;
18 height: 200px;
19 background-color: #a3a3a3;
20}마지막으로 부터 영역은 전체 영역이 들어가기 때문에 footer 영역한테는 width를 100%로 설정하고, footer_container에게는 width값을 1200px로 설정하고 가운데 정렬를 위해 margin: 0 auto를 설정하겠습니다. 자식으로 3개의 박스가 있으니 이 부분도 width, height을 설정하고 부모박스한테 flex를 설정하면 가로로 정렬이 됩니다.
1<footer id="footer">
2 <div class="footer_container">
3 <div class="footer1"></div>
4 <div class="footer2">
5 <div class="footer2-1"></div>
6 <div class="footer2-2"></div>
7 </div>
8 </div>
9</footer>
10<!-- //footer -->1#footer {
2 width: 100%;
3 background-color: #d1d1d1;
4}
5#footer .footer__container {
6 width: 1200px;
7 margin: 0 auto;
8 display: flex;
9}
10#footer .footer__container .footer1 {
11 width: 20%;
12 height: 100px;
13 background-color: #9d9d9d;
14}
15#footer .footer__container .footer2 {
16 width: 80%;
17}
18#footer .footer__container .footer2 .footer2-1 {
19 width: 100%;
20 height: 50px;
21 background-color: #929292;
22}
23#footer .footer__container .footer2 .footer2-2 {
24 width: 100%;
25 height: 50px;
26 background-color: #838383;
27}width: 100% → 전체 화면을 가득 채우는 기본 레이아웃의 핵심 속성.margin: 0 auto → 가운데 정렬. 중앙 고정형 레이아웃 구현.display: flex → 가로 배치에 사용. header, contents, footer 구성에 필수.background-color → 시각적 구조 확인을 위한 색상 설정.margin: 0 auto; → 좌우 마진을 자동으로 설정해 가운데 정렬할 때 자주 사용됩니다.padding: 10px; → 요소 안쪽 여백을 10px로 설정하여 콘텐츠가 너무 붙지 않도록 만듭니다.#wrap : 전체 레이아웃을 감싸는 부모 요소로서, 가로 폭 100% 설정..header_container, .footer_container : 고정 폭(1200px) 박스이며, 내부에서 flex 정렬 사용.width: 1200px와 margin: 0 auto로 중앙 정렬 처리.A유형보다 구조는 조금 복잡했지만, 전체 레이아웃의 개념을 잡는 데 있어 매우 중요한 예제였습니다.
B유형을 통해 실무형 레이아웃을 어떻게 구성하고, 어떤 식으로 마크업과 CSS를 분리하여 작업하는지 감을 잡으셨을 거예요. 반복해서 따라 하고 손에 익히면 실전에서도 능숙하게 다룰 수 있으니, 꼭 여러 번 연습해보세요! 😊
다음 유형도 함께 천천히 익혀보도록 하겠습니다. 수고하셨습니다! 👏