안녕하세요! 웹스토리보이입니다 😊
이번에는 E-3 유형 레이아웃을 함께 만들어보겠습니다. 이번 유형은 앞서 작업한 E-2 유형과 거의 동일합니다. 유일한 차이점이라면, 링크 영역 대신 배너 영역이 들어간다는 점이에요. 전체적인 구조나 스타일링 방식은 완전히 동일하니, 이번엔 혼자 힘으로 먼저 도전해보는 걸 추천드려요! 막히는 부분이 있다면 걱정하지 마세요. 저와 함께 차근차근 다시 짚어보면 금방 해결될 거예요 😉 그럼, 잠깐 멈추고 직접 한번 만들어보고 와주세요! 다 했으면 함께 확인해보면서 마무리해볼까요? 🤩
VSCODE를 실행하고 webdesign 폴더 안에 layoutE-3.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 E-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>웹디자인개발기능사 레이아웃 E-3</title>
7</head>
8<body>
9
10</body>
11</html>구조는 2단 구조로 main과 footer로 만들겠습니다. 높이값은 임의 지정이니 자식 요소에 높이값이 있으면 자동으로 설정될 것입니다. 우선 전체 높이 값 750px를 설정하겠습니다.
1<body>
2 <div id="wrap">
3 <main id="main"></main>
4 <footer id="footer"></footer>
5 </div>
6</body>1* {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 100%;
7}
8#main {
9 width: 100%;
10 height: 750px;
11 background-color: #efefef;
12}
13#footer {
14 width: 100%;
15 height: 100px;
16 background-color: #e3e3e3;
17}메인 콘텐츠는 3개의 영역으로 이루어져 있으며, header, contents, slider로 구성하였습니다. 여기서 헤더와 콘텐츠는 고정값이고, 슬라이드는 유동적이기 때문에 width: calc(100% - 600px); 이렇게 설정해야 반응형이 가능합니다. 이렇게 하면 화면의 크기를 변경해도 화면에 맞게 변하는 모습을 볼 수 있습니다.
1<div id="wrap">
2 <main id="main">
3 <header id="header"></header>
4 <section id="contents"></section>
5 <article id="slider"></article>
6 </main>
7 <footer id="footer"></footer>
8</div>1* {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 100%;
7}
8#main {
9 width: 100%;
10 display: flex;
11}
12#header {
13 width: 200px;
14 height: 750px;
15 background-color: #efefef;
16}
17#contents {
18 width: 400px;
19 height: 750px;
20 background-color: #e3e3e3;
21}
22#slider {
23 width: calc(100% - 600px);
24 height: 750px;
25 background-color: #d9d9d9;
26}
27#footer {
28 width: 100%;
29 height: 100px;
30 background-color: #d1d1d1;
31}메인 박스 안에 헤더 영역을 작업하겠습니다. 헤더 영역은 로고와 메뉴 영역으로 나누어져 있습니다.
1<header id="header">
2 <h1 class="logo"></h1>
3 <nav class="nav"></nav>
4</header>
5<!-- //header -->1#header {
2 width: 200px;
3}
4#header h1 {
5 width: 100%;
6 height: 100px;
7 background-color: #efefef;
8}
9#header nav {
10 width: 100%;
11 height: 650px;
12 background-color: #e3e3e3;
13}컨텐츠 영역은 배너, 공지사항, 갤러리 영역으로 3개의 영역으로 이루어져 있습니다. 자식 박스의 높이 값이 설정되어 있기 때문에 부모 박스 영역에는 높이 값을 줄 필요가 없습니다.
1<section id="contents">
2 <article class="banner"></article>
3 <article class="notice"></article>
4 <article class="gallery"></article>
5</section>
6<!-- //contents -->1#contents {
2 width: 400px;
3}
4#contents .banner {
5 width: 100%;
6 height: 150px;
7 background-color: #d9d9d9;
8}
9#contents .notice {
10 width: 100%;
11 height: 300px;
12 background-color: #d1d1d1;
13}
14#contents .gallery {
15 width: 100%;
16 height: 300px;
17 background-color: #c7c7c7;
18}슬라이드 영역은 특별한 것이 없으니 영역만 잡고 넘어가겠습니다. 대신 width 값은 유동적으로 변해야 하기 때문에 width: calc(100% - 600px) 이렇게 설정했습니다.
1<article id="slider"></article>1#slider {
2 width: calc(100% - 600px);
3 height: 750px;
4 background-color: #bcbcbc;
5}푸터 영역은 3개의 영역으로 이루어져 있습니다.
1<footer id="footer">
2 <div class="footer1"></div>
3 <div class="footer2"></div>
4 <div class="footer3"></div>
5</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}<main> : header, contents, slider로 구성된 메인 영역입니다.<header> : 좌측 로고와 내비게이션 영역으로 고정 폭을 갖습니다.<section> : 배너, 공지사항, 갤러리 등 콘텐츠 그룹을 구성합니다.<article> : 슬라이드 및 콘텐츠 내 개별 블록에 사용되었습니다.<footer> : 하단 정보 영역으로 3분할 구조를 가집니다.height: 750px → 고정된 전체 높이를 지정하여 안정적인 레이아웃을 구현합니다.width: calc(100% - 600px) → 고정 영역을 제외한 나머지 영역을 유동적으로 계산해줍니다.display: flex → 가로 정렬 및 분할 레이아웃 구성에 활용됩니다.background-color → 각 박스를 구분하고 구조를 파악하기 쉽게 도와줍니다.calc()를 활용하여 유동 영역(slider)을 반응형으로 설계하는 방법을 복습했습니다.이번 E-3 유형까지 잘 따라오셨다면, 이제 다양한 유형의 구조 변화에 대한 감각도 많이 생기셨을 거예요. E-1~E-3 유형은 구조는 유사하지만 높이 설정 방식, 콘텐츠 구성, 영역 이름 등의 소소한 차이를 이해하고 구현하는 것이 핵심입니다.
시험에서도 이런 변화는 충분히 나올 수 있으니, 단순히 외우기보다는 구조의 원리를 이해하고 자주 손으로 직접 그려보는 것이 중요합니다. 이번에도 수고 많으셨습니다!
👏 다음 유형도 함께 준비해볼까요? 😊