안녕하세요! 웹스토리보이입니다 😊
이번에는 D-3 유형 레이아웃을 함께 만들어보겠습니다. D-3 유형은 전체적인 구조가 D-1 유형과 거의 유사하지만, 푸터 영역만 조금 다르게 구성되어 있는 것이 특징입니다. 이미 D-1 유형을 한 번 만들어본 경험이 있다면 이번 작업은 복습하는 느낌으로 가볍게 따라오시면 좋을 것 같아요. 그럼 천천히, 그리고 꼼꼼하게 같이 만들어볼까요? 렛츠 기릿! 💪✨
VSCODE를 실행하고 webdesign 폴더 안에 layoutD-3.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 D-3으로 변경해주겠습니다.
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-3</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: 850px;
13 background-color: #efefef;
14}
15#main {
16 width: calc(100% - 200px);
17 height: 850px;
18 background-color: #e3e3e3;
19}
20#footer {
21 width: 100%;
22 height: 120px;
23 background-color: #d9d9d9;
24}메인 콘텐츠는 3개의 영역으로 이루어져 있으며, slider, banner, contents로 구성하였습니다.
1<div id="wrap">
2 <aside id="aside"></aside>
3 <main id="main">
4 <article id="slider"></article>
5 <article id="banner"></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: 850px;
13 background-color: #efefef;
14}
15#main {
16 width: calc(100% - 200px);
17 height: 850px;
18 background-color: #e3e3e3;
19}
20#slider {
21 width: 100%;
22 height: 400px;
23 background-color: #d9d9d9;
24}
25#banner {
26 width: 100%;
27 height: 200px;
28 background-color: #d1d1d1;
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: 750px;
12 background-color: #e3e3e3;
13}슬라이드 영역에는 링크 영역이 있습니다. 슬라이드 영역 위에 위치하기 때문에 position: absolute로 설정하겠습니다. 절대값을 설정하면 항상 기준점이 되는 relative를 설정해야 합니다.
1<article id="slider">
2 <div class="link"></div>
3</article>1#slider {
2 width: 100%;
3 height: 400px;
4 background-color: #d9d9d9;
5 position: relative;
6}
7#slider .link {
8 position: absolute;
9 right: 0;
10 top: 0;
11 width: 100px;
12 height: 300px;
13 background-color: #9d9d9d;
14}배너 영역도 특이한 부분이 없기 때문에 영역만 확인하겠습니다.
1<article id="banner"></article>1#banner {
2 width: 100%;
3 height: 200px;
4 background-color: #d1d1d1;
5}콘텐츠 공지사항 영역도 특이한 부분이 없기 때문에 영역만 확인하겠습니다.
1<section id="contents"></section>1#contents {
2 width: 100%;
3 height: 250px;
4 background-color: #c7c7c7;
5}푸터 영역은 2개의 영역으로 나뉘고, 두번째 영역은 또 다시 두개의 영역으로 설정합니다.
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</footer>
8<!-- //footer -->1#footer {
2 width: 100%;
3 display: flex;
4}
5#footer .footer1 {
6 width: 20%;
7 height: 120px;
8 background-color: #bcbcbc;
9}
10#footer .footer2 {
11 width: 80%;
12}
13#footer .footer2 .footer2-1 {
14 width: 100%;
15 height: 60px;
16 background-color: #b1b1b1;
17}
18#footer .footer2 .footer2-2 {
19 width: 100%;
20 height: 60px;
21 background-color: #a3a3a3;
22}<aside> : 고정된 사이드바로 로고와 메뉴가 포함됩니다.<main> : 슬라이더, 배너, 콘텐츠 영역 등 주요 콘텐츠가 배치됩니다.<article> : 슬라이드와 배너처럼 독립적인 콘텐츠 블록 표현에 사용됩니다.<section> : 일반적인 콘텐츠 그룹을 표현하며, 공지사항 등에 활용됩니다.<footer> : 사이트 하단 정보를 담는 영역으로 3분할 구조를 가집니다.display: flex → #wrap, #footer에 사용되어 가로 정렬을 구현합니다.flex-wrap: wrap → 줄바꿈을 허용하여 #footer가 아래로 내려가도록 합니다.width: calc(100% - 200px) → 고정 사이드바(200px)를 제외한 가변 메인 영역을 계산합니다.position: relative + absolute → 슬라이드 위에 링크 배치를 위해 사용됩니다.background-color → 구조 파악을 위해 각 요소마다 구분 색상을 지정했습니다.display: flex → 자식 요소를 가로로 정렬합니다.flex-direction → 정렬 방향 설정 (기본: row, 세로: column)justify-content → 주축(가로)에서 정렬 방식 지정 (center, space-between 등)align-items → 교차축(세로) 정렬 방식 지정flex-wrap → 자식 요소 줄바꿈 여부 설정 (wrap 사용)calc()를 활용한 반응형 레이아웃 구성법을 익혔습니다.position 속성을 활용해 요소의 정확한 위치를 제어하는 연습을 했습니다.flex 속성을 활용해 가로 정렬 및 줄바꿈 처리를 구현했습니다.background-color로 시각적 구조 확인 및 디버깅이 가능하도록 설정했습니다.이제 D-3 유형도 무사히 완성했습니다! 👏 앞서 진행한 D-1, D-2 유형과 비교하면서 연습하면 레이아웃 패턴이 자연스럽게 머리에 들어올 거예요. 시험장에서 당황하지 않으려면, 단순히 정답만 외우는 것보다어떤 구조가 반복되고 어떤 부분이 달라지는지 흐름을 파악하는 것이 더 중요합니다. 꼭 한 번은 혼자 힘으로 처음부터 끝까지 재현해보세요. 연습 중 실수하거나 막히는 것도 중요한 경험입니다. 실수하면서 배우는 것이 더 오래 남습니다.
자, 그럼 다음 유형도 힘내서 함께 작업해볼까요? 파이팅입니다! 💪🚀