웹디자인개발기능사 레이아웃 유형(B-4)

2025년 5월 8일 오전 12:00 by 웹스토리보이

소개

안녕하세요! 웹스토리보이입니다 😊

이번에는 B유형의 마지막 레이아웃인 B-4 유형을 만들어보겠습니다. 앞서 작업했던 B유형들과 마찬가지로 전체적인 구조는 거의 동일하며, 푸터 부분만 약간 다른 구조로 되어 있습니다. 이제 마지막이라는 마음으로, 복습하는 느낌으로 빠르게 정리해볼게요! 그럼 바로 시작해보겠습니다 💪

1. 기본 구조 만들기

VSCODE를 실행하고 webdesign폴더 안에 layoutB-4.html파일을 만들겠습니다.

!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 B-4으로 변경해주겠습니다. 오른쪽에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수 있으니 참고해주세요!

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-4</title>
7</head>
8<body>
9    
10</body>
11</html>

전체적인 레이아웃을 먼저 만들겠습니다. 전체적인 구조이기 때문에 모든 섹션의 width값은 100%로 설정하겠습니다.

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>

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}

2. 컨테이너 작업하기

각 섹션의 전체영역과 가운데 영역을 만들겠습니다. container 섹션을 만들고 모든 섹션에 공통으로 넣어주겠습니다.

1<body>
2    <div id="wrap">
3        <header id="header">
4            <div class="container"></div>
5        </header>
6        <!-- //header -->
7
8        <article id="slider">
9            <div class="container"></div>
10        </article>
11        <!-- //slider -->
12
13        <main id="contents">
14            <div class="container"></div>
15        </main>
16        <!-- //contents -->
17
18        <footer id="footer">
19            <div class="container"></div>
20        </footer>
21        <!-- //footer -->
22    </div>
23    <!-- //wrap -->
24</body>

1.container {
2    width: 1200px;
3    height: inherit;
4    margin: 0 auto;
5    background-color: rgba(0,0,0,0.2);
6    display: flex;
7}

3. 각 섹션 작업하기

헤더 영역은 전체 영역과 가운데 영역으로 나누어지기 때문에 container를 설정하고, 자식요소로 로고와 네비를 설정하겠습니다.

1<header id="header">
2    <div class="container">
3        <h1 class="logo"></h1>
4        <nav class="nav"></nav>
5    </div>
6</header>
7<!-- //header -->

1#header {
2    width: 100%;
3    height: 100px;
4    background-color: #efefef;
5}
6#header .logo {
7    width: 20%;
8    height: 100px;
9    background-color: #c7c7c7;
10}
11#header .nav {
12    width: 80%;
13    height: 100px;
14    background-color: #bcbcbc;
15}

슬라이드 영역은 가운데 영역만 설정하고, 전체 영역은 배경색을 빼서 샘플과 똑같이 만들겠습니다.

1<article id="slider">
2    <div class="container"></div>
3</article>
4<!-- //slider -->

1#slider {
2    width: 100%;
3    height: 300px;
4}

컨텐츠 영역도 전체 영역의 배경색을 제거하고, 가운데 영역만 작업하겠습니다. 자식 요소 3개를 만들어 가로로 정렬하겠습니다.

1<main id="contents">
2    <div class="container">
3        <section class="content1"></section>
4        <section class="content2"></section>
5        <section class="content3"></section>
6    </div>
7</main>
8<!-- //contents -->

1#contents {
2    width: 100%;
3}
4#contents .content1 {
5    width: 33.3333%;
6    height: 200px;
7    background-color: #bcbcbc;
8}
9#contents .content2 {
10    width: 33.3333%;
11    height: 200px;
12    background-color: #b1b1b1;
13}
14#contents .content3 {
15    width: 33.3333%;
16    height: 200px;
17    background-color: #a3a3a3;
18}

푸터 영역도 전체 영역과 가운데 영역을 분리하겠습니다. 가운데 영역은 두개의 영역으로 만들고, 첫번째 영역은 다시 두개의 영역으로 만들겠습니다.

1<footer id="footer">
2    <div class="container">
3        <div class="footer1">
4            <div class="footer1-1"></div>
5            <div class="footer1-2"></div>
6        </div>
7        <div class="footer2"></div>
8    </div>
9</footer>
10<!-- //footer -->

1#footer {
2    width: 100%;
3    background-color: #d1d1d1;
4}
5#footer .footer1 {
6    width: 80%;
7}
8#footer .footer1 .footer1-1 {
9    width: 100%;
10    height: 50px;
11    background-color: #9d9d9d;
12}
13#footer .footer1 .footer1-2 {
14    width: 100%;
15    height: 50px;
16    background-color: #929292;
17}
18#footer .footer2 {
19    width: 20%;
20    height: 100px;
21    background-color: #838383;
22}

3. 정리

✅ 주요 HTML 태그

<header> : 상단 영역으로, 로고와 내비게이션 포함.
<article> : 의미 있는 독립 콘텐츠(여기서는 슬라이더 영역).
<main> : 문서의 핵심 콘텐츠를 감싸는 영역.
<section> : 콘텐츠 내부에서 주제별로 구분할 때 사용.

✅ 주요 CSS 속성

width: 100% → 브라우저 전체 폭을 채우는 구조 설정.
margin: 0 auto → 고정 폭 콘텐츠를 가운데 정렬.
height: inherit → 부모 요소의 높이를 자식 요소에 상속.
display: flex → 자식 요소를 가로로 나란히 정렬.
background-color: rgba() → 배경색을 투명도 있게 지정해 시각적 구조 확인.

✅ 이번 실습의 핵심

전체 구조는 B유형의 반복된 패턴을 따르되, 푸터의 구조만 변경된 예제였습니다.
2단 → 다시 2단 구조의 푸터를 만들며 복잡한 하위 레이아웃 분할 방법을 연습했습니다.
.container의 재사용을 통해 효율적인 CSS 설계 방식을 체험했습니다.
실무에서도 자주 쓰이는 전체 영역 + 가운데 정렬 방식의 이해도를 높였습니다.

4. 마무리

B유형의 마지막 예제까지 잘 따라오셨습니다! 이번 B-4 유형은 전체적인 구조는 동일하지만,푸터 구조에 살짝 변화를 준 형태로 마무리되었습니다.

레이아웃 작업의 핵심은 반복입니다. 코드를 직접 타이핑하며 구조를 눈과 손에 익히는 것이 가장 중요해요.wrap → 섹션 → container → 자식 박스 구조가 자연스럽게 떠오른다면, 여러분은 이미 기본 레이아웃을 충분히 소화하신 겁니다! 💪

이제 B유형은 여기서 마무리하고, 더 다양한 레이아웃 구성이 나오는 C유형으로 넘어가보겠습니다. 다음 강의에서 더욱 재미있고 실전적인 내용으로 다시 만나요! 😊