안녕하세요! 웹스토리보이입니다 😊
이번 시간에는 D유형의 마지막 레이아웃, D-4 유형을 함께 연습해보겠습니다. 전체적인 구성은 지금까지의 D유형과 크게 다르지 않지만, 세부 구조에서 약간의 차이가 있으니 꼼꼼하게 확인하면서 따라와 주세요. 하지만 걱정 마세요! 여러분이 기본 레이아웃 구조에 익숙해졌다면, 이처럼 약간의 변형이 있어도 얼마든지 스스로 구현할 수 있을 거예요. 💪 그럼 마지막 유형까지 완벽하게 마무리해볼까요? 렛츠 고! 🫢✨
VSCODE를 실행하고 webdesign 폴더 안에 layoutD-4.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 D-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>웹디자인개발기능사 레이아웃 D-4</title>
7</head>
8<body>
9
10</body>
11</html>전체적인 구조는 asdie, main, footer로 나누어 작업하였습니다. 왼쪽 사이드는 고정값이기 때문에 width: 200px를 설정하고, 컨텐츠 영역은 width: 100%를 설정했습니다. 이렇게 하면 가로 정렬이 안되기 때문에 고정값 200px을 빼주고 width 값을 설정해야 합니다. main의 가로 값은 width: calc(100% - 200px)로 설정해야 구조가 깨지지 않겠죠!
1<body>
2 <div id="wrap">
3 <aside id="aside"></aside>
4 <main id="main"></main>
5 <footer id="footer"></footer>
6 </div>
7</body>1* {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 100%;
7 display: flex;
8 flex-wrap: wrap;
9}
10#aside {
11 width: 200px;
12 height: 800px;
13 background-color: #efefef;
14}
15#main {
16 width: calc(100% - 200px);
17 height: 800px;
18 background-color: #e3e3e3;
19}
20#footer {
21 width: 100%;
22 height: 100px;
23 background-color: #d9d9d9;
24}메인 콘텐츠는 3개의 영역으로 이루어져 있으며, slider, link, contents로 구성하였습니다.
1<div id="wrap">
2 <aside id="aside"></aside>
3 <main id="main">
4 <article id="slider"></article>
5 <article id="link"></article>
6 <section id="contents"></section>
7 </main>
8 <footer id="footer"></footer>
9</div>1* {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 100%;
7 display: flex;
8 flex-wrap: wrap;
9}
10#aside {
11 width: 200px;
12 height: 800px;
13 background-color: #efefef;
14}
15#main {
16 width: calc(100% - 200px);
17 height: 800px;
18 background-color: #e3e3e3;
19}
20#slider {
21 width: 100%;
22 height: 400px;
23 background-color: #d9d9d9;
24}
25#link {
26 width: 100%;
27 height: 150px;
28 background-color: #d9d9d9;
29}
30#contents {
31 width: 100%;
32 height: 250px;
33 background-color: #c7c7c7;
34}
35#footer {
36 width: 100%;
37 height: 120px;
38 background-color: #bcbcbc;
39}사이드 영역의 로고와 메뉴를 설정하겠습니다. 따로 크기에 대한 정의가 없으므로, 임의로 설정하겠습니다.
1<aside id="aside">
2 <h1 class="logo"></h1>
3 <nav class="nav"></nav>
4</aside>1#aside {
2 width: 200px;
3}
4#aside .logo {
5 width: 100%;
6 height: 100px;
7 background-color: #efefef;
8}
9#aside .nav {
10 width: 100%;
11 height: 700px;
12 background-color: #e3e3e3;
13}이번 유형 슬라이드에는 아무것도 없네요!. 영역만 잡고 넘어가겠습니다.
1<article id="slider">
2</article>1#slider {
2 width: 100%;
3 height: 400px;
4 background-color: #d9d9d9;
5}링크 영역도 특이한 부분이 없기 때문에 영역만 확인하겠습니다.
1<article id="link"></article>1#link {
2 width: 100%;
3 height: 150px;
4 background-color: #d1d1d1;
5}콘텐츠 공지사항 영역은 두개의 영역으로 나누어서 작업하겠습니다.
1<section id="contents">
2 <div class="content1"></div>
3 <div class="content2"></div>
4</section>1#contents {
2 width: 100%;
3 display: flex;
4}
5#contents .content1 {
6 width: 50%;
7 height: 250px;
8 background-color: #c7c7c7;
9}
10#contents .content2 {
11 width: 50%;
12 height: 250px;
13 background-color: #bcbcbc;
14}푸터 영역은 3개의 영역으로 나뉘고, 두번째 영역은 또 다시 두개의 영역으로 나누어집니다.
1<footer id="footer">
2 <div class="footer1"></div>
3 <div class="footer2">
4 <div class="footer2-1"></div>
5 <div class="footer2-2"></div>
6 </div>
7 <div class="footer3"></div>
8</footer>
9<!-- //footer -->1#footer {
2 width: 100%;
3 display: flex;
4}
5#footer .footer1 {
6 width: 20%;
7 height: 120px;
8 background-color: #b1b1b1;
9}
10#footer .footer2 {
11 width: 60%;
12}
13#footer .footer2 .footer2-1 {
14 width: 100%;
15 height: 60px;
16 background-color: #a3a3a3;
17}
18#footer .footer2 .footer2-2 {
19 width: 100%;
20 height: 60px;
21 background-color: #9d9d9d;
22}
23#footer .footer3 {
24 width: 20%;
25 height: 120px;
26 background-color: #929292;
27}<aside> : 고정된 사이드 메뉴 영역으로, 로고와 내비게이션이 포함됩니다.<main> : 슬라이드, 링크, 콘텐츠 영역 등 주요 콘텐츠가 위치합니다.<article> : 슬라이드와 링크 같은 독립적인 콘텐츠 블록을 구성할 때 사용됩니다.<section> : 공지사항 콘텐츠 등을 묶을 때 사용됩니다. 이번에는 두 개의 콘텐츠 박스를 포함합니다.<footer> : 사이트 하단 영역으로 3분할 구조 + 중첩 구조로 구성되어 있습니다.display: flex → #wrap과 #footer 등에 적용하여 가로 정렬을 구현합니다.flex-wrap: wrap → 줄 바꿈을 가능하게 하여 푸터가 아래로 내려가도록 설정합니다.width: calc(100% - 200px) → 고정 사이드 영역을 제외한 가변형 메인 콘텐츠 영역을 계산합니다.background-color → 구조 시각화를 위해 각 영역마다 구분되는 색상 지정이 활용되었습니다.calc()를 활용해 고정된 사이드바와 가변 콘텐츠 영역을 조합한 반응형 레이아웃 설계를 복습했습니다.display: flex와 flex-wrap을 활용하여 가로 정렬과 줄바꿈 처리를 구현했습니다.section과 footer 내부에 중첩된 div 요소를 구성하여 계층적 구조를 이해했습니다.background-color를 적용해 시각적 구조를 빠르게 파악하고 디버깅하는 법을 연습했습니다.자, 이렇게 해서 D유형의 마지막 레이아웃인 D-4 유형까지 모두 마무리했습니다! 🎉 A유형부터 D유형까지의 흐름을 따라오셨다면, 이제는 다양한 레이아웃 구조에 익숙해지셨을 거예요.
웹디자인기능사 실기 시험에서 중요한 건 빠르고 정확하게 구조를 잡아내는 능력입니다. 다양한 유형을 반복적으로 연습해두면 시험장에서 어떤 레이아웃이 나와도 당황하지 않고 자신 있게 구현할 수 있습니다.
혹시 작업 중 이해되지 않거나 막히는 부분이 있다면,샘플 PDF를 다시 확인하거나 댓글, 질문을 통해 도움을 받으셔도 좋아요. 중요한 건 멈추지 않고 계속 시도하고, 직접 구현해보는 것입니다!
끝까지 함께해주셔서 감사합니다. 우리 모두 합격을 향해 가봅시다! 💪🔥