안녕하세요! 웹스토리보이입니다 😊
좋아요! D-2유형은 D-1과 구조는 유사하지만 콘텐츠 영역 구성에 차이가 있으니 비교하면서 작업하면 더 이해가 잘 될 거예요. 샘플 이미지 참고하면서 정확한 위치와 크기를 맞추는 게 중요합니다. 시작할 준비 되셨나요? 😎
VSCODE를 실행하고 webdesign 폴더 안에 layoutD-2.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 D-2으로 변경해주겠습니다.
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-2</title>
7</head>
8<body>
9
10</body>
11</html>전체적인 구조는 aside, main, footer영역으로 나누어져 있습니다. aside영역은 width값이 200px로 고정되어 있고, main 영역을 유동적으로 변하는 구조입니다. main 영역의 width값은 100%에서 200px 뺀값을 넣어주면 전체적인 구조는 깨지지 않고 가로로 정렬이 됩니다. 그러기 위해서는 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: 650px;
13 background-color: #efefef;
14}
15#main {
16 width: calc(100% - 200px);
17 height: 650px;
18 background-color: #e3e3e3;
19}
20#footer {
21 width: 100%;
22 height: 100px;
23 background-color: #d9d9d9;
24}이번 유형의 main 유형에는 두개의 섹션만 들어갑니다. 배너 섹션은 이미지 슬라이드 안으로 들어갑니다.
1<div id="wrap">
2 <aside id="aside"></aside>
3 <main id="main">
4 <article id="slider"></article>
5 <section id="contents"></section>
6 </main>
7 <footer id="footer"></footer>
8</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: 650px;
13 background-color: #efefef;
14}
15#main {
16 width: calc(100% - 200px);
17 height: 650px;
18 background-color: #e3e3e3;
19}
20#slider {
21 width: 100%;
22 height: 400px;
23 background-color: #d9d9d9;
24}
25#contents {
26 width: 100%;
27 height: 250px;
28 background-color: #c7c7c7;
29}
30#footer {
31 width: 100%;
32 height: 100px;
33 background-color: #bcbcbc;
34}사이드 영역의 로고와 메뉴를 설정하겠습니다. 따로 크기에 대한 정의가 없으므로, 임의로 설정하겠습니다.
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: 550px;
12 background-color: #e3e3e3;
13}슬라이드 영역을 작업해보겠습니다. 슬라이드 영역에는 이미지 영역과 배너 영역으로 나누어 집니다. 여기서 배너 영역도 230px로 고정되어 있기 때문에 이미지 영역의 width 값은 calc(100% - 230px)으로 설정해야 합니다.
1<article id="slider">
2 <div class="image"></div>
3 <div class="banner"></div>
4</article>1#slider {
2 width: 100%;
3 display: flex;
4}
5#slider .image {
6 width: calc(100% - 230px);
7 height: 400px;
8 background-color: #d9d9d9;
9}
10#slider .banner {
11 width: 230px;
12 height: 400px;
13 background-color: #d1d1d1;
14}컨텐츠 영역은 두개의 영역으로 구성되어 있습니다.
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"></div>
4 <div class="footer3"></div>
5</footer>
6<!-- //footer -->1#footer {
2 width: 100%;
3 display: flex;
4}
5#footer .footer1 {
6 width: 20%;
7 height: 100px;
8 background-color: #b1b1b1;
9}
10#footer .footer2 {
11 width: 60%;
12 height: 100px;
13 background-color: #a3a3a3;
14}
15#footer .footer3 {
16 width: 20%;
17 height: 100px;
18 background-color: #9d9d9d;
19}<aside> : 고정된 왼쪽 메뉴 영역입니다. 로고와 내비게이션 메뉴가 들어갑니다.<main> : 슬라이드, 배너, 콘텐츠 등 주요 콘텐츠가 포함된 영역입니다.<article> : 슬라이드와 배너처럼 독립적인 콘텐츠 블록을 표현할 때 사용됩니다.<section> : 공지사항 등 일반적인 콘텐츠 그룹을 구성할 때 사용됩니다.<footer> : 사이트 하단 정보를 담는 영역이며, 3분할 구조로 되어 있습니다.display: flex → 수평 배치를 위해 #wrap,#footer 등에 사용됩니다.flex-wrap: wrap → flex 항목들이 한 줄에 다 들어가지 않을 경우 줄 바꿈을 가능하게 해줍니다. #wrap에 적용되어 footer가 다음 줄에 배치됩니다.width: calc(100% - 200px) → 고정된 aside너비(200px)를 제외한 가변 영역을 계산하여 반응형 구현에 활용됩니다.position: relative + absolute → 슬라이드 위에 링크 배너를 올릴 때 정확한 위치 설정을 위해 사용됩니다.background-color → 각 영역을 시각적으로 구분하기 위해 다른 색상으로 지정하였습니다.display: flex → 부모 요소에 적용하여 자식 요소들을 가로 방향(기본값) 으로 정렬합니다.flex-direction → 정렬 방향을 지정합니다. 기본값은row (가로 정렬), 세로 정렬은 column을 사용합니다.justify-content → 주축(가로축 기준)에서 자식 요소들의 정렬 위치를 설정합니다. (예: center,space-between)align-items → 교차축(세로축 기준)에서 자식 요소들의 정렬 방식을 설정합니다.flex-wrap → 자식 요소가 한 줄을 초과할 경우 자동 줄 바꿈 여부를 결정합니다. wrap을 설정하면 다음 줄로 넘어갑니다.#wrap과 #footer에 flex 속성이 적용되어 가로 정렬과 레이아웃 분할에 사용되었습니다.calc()사용법을 익혔습니다. 고정 사이드바와 가변 메인 영역의 조합이 포인트입니다.position: relative와 absolute를 활용해 요소를 원하는 위치에 정확하게 배치하는 방법을 연습했습니다.display: flex와 flex-wrap을 조합해 가로 정렬 + 줄바꿈 처리가 가능한 구조를 만들었습니다.background-color를 각 박스마다 지정하여 구조 시각화 연습도 함께 진행했습니다.이렇게 해서 D-2 유형도 완성되었습니다! 👏 D-1 유형과의 차이를 잘 비교해가며 작업하셨다면, 실제 구조 설계에 대한 이해가 한층 더 깊어졌을 거예요.
지금처럼 기본기를 차곡차곡 쌓아간다면 어떤 유형이든 충분히 해낼 수 있습니다. 다음은 D-3 유형으로 넘어가볼까요? 계속해서 도전해봅시다! 💪🔥