안녕하세요! 웹스토리보이입니다 😊
이번에는 E유형 레이아웃을 함께 만들어보겠습니다. E유형은 지금까지 학습한 A~D유형보다 구성과 배치가 조금 더 복잡하게 느껴질 수 있습니다. 하지만 핵심은 여전히 동일합니다. 전체 구조를 파악하고, 각 영역을 명확하게 분리한 뒤, 순차적으로 스타일을 적용해 나가면 어렵지 않게 완성할 수 있어요. 처음에는 복잡해 보여도, 반복해서 만들어 보면 자연스럽게 익숙해지고, 오히려 레이아웃 감각이 한 단계 더 성장하는 기회가 될 수 있습니다. 그러니 겁먹지 말고, 하나씩 차근차근 따라와 주세요! 👊🔥 그럼, E유형도 완벽하게 마스터하러 가볼까요? 렛츠 기릿! 💪🚀
VSCODE를 실행하고 webdesign 폴더 안에 layoutE-1.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 E-1으로 변경해주겠습니다.
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-1</title>
7</head>
8<body>
9
10</body>
11</html>전체적인 구조는 2단 또는 4단으로 만들수 있습니다. 4단보다는 2단구조가 더 안정적이기 때문에 main과 footer로 만들고 작업하겠습니다. 이번 레이아웃의 특징은 height 값도 화면 height 값에 딱 맞추어야 합니다. 그래서 푸터 영역을 제외한 부분을 100%로 맞추어야 합니다. 메인의 높이 값은 height: calc(100vh - 120px) 이렇게 설정하면 화면 높이에 딱 맞출 수 있습니다.
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: calc(100vh - 120px);
11 background-color: #efefef;
12}
13#footer {
14 width: 100%;
15 height: 120px;
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 height: calc(100vh - 120px);
11 display: flex;
12}
13#header {
14 width: 200px;
15 height: 100%;
16 background-color: #efefef;
17}
18#contents {
19 width: 400px;
20 height: 100%;
21 background-color: #e3e3e3;
22}
23#slider {
24 width: calc(100% - 600px);
25 height: 100%;
26 background-color: #d9d9d9;
27}
28#footer {
29 width: 100%;
30 height: 120px;
31 background-color: #d1d1d1;
32}메인 박스 안에 헤더 영역을 작업하겠습니다. 헤더 영역은 로고와 메뉴 영역으로 나누어져 있습니다.
1<header id="header">
2 <h1 class="logo"></h1>
3 <nav class="nav"></nav>
4</header>
5<!-- //header -->1#header {
2 width: 200px;
3 height: 100%;
4}
5#header .logo {
6 width: 100%;
7 height: 10%;
8 background-color: #e3e3e3;
9}
10#header .nav {
11 width: 100%;
12 height: 90%;
13 background-color: #d9d9d9;
14}컨텐츠 영역은 4개의 영역으로 이루어져 있습니다. 배너, 공지사항, 갤러리, 링크 영역으로 이루어져 있으며, 높이 값은 화면 비율에 맞추어야 하기 때문에 %로 작업하였습니다.
1<section id="contents">
2 <article class="banner"></article>
3 <article class="notice"></article>
4 <article class="gallery"></article>
5 <article class="link"></article>
6</section>
7<!-- //contents -->1#contents {
2 width: 400px;
3 height: 100%;
4}
5#contents .banner {
6 width: 100%;
7 height: 15%;
8 background-color: #d1d1d1;
9}
10#contents .notice {
11 width: 100%;
12 height: 35%;
13 background-color: #c7c7c7;
14}
15#contents .gallery {
16 width: 100%;
17 height: 35%;
18 background-color: #bcbcbc;
19}
20#contents .link {
21 width: 100%;
22 height: 15%;
23 background-color: #b1b1b1;
24}슬라이드 영역은 특별한 것이 없으니 영역만 잡고 넘어가겠습니다. 대신 width 값은 유동적으로 변해야 하기 때문에 width: calc(100% - 600px) 이렇게 설정했습니다.
1<article id="slider"></article>1#slider {
2 width: calc(100% - 600px);
3 height: 100%;
4 background-color: #a3a3a3;
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>1#footer {
2 width: 100%;
3 display: flex;
4}
5#footer .footer1 {
6 width: 20%;
7 height: 120px;
8 background-color: #9d9d9d;
9}
10#footer .footer2 {
11 width: 80%;
12}
13#footer .footer2 .footer2-1 {
14 width: 100%;
15 height: 60px;
16 background-color: #929292;
17}
18#footer .footer2 .footer2-2 {
19 width: 100%;
20 height: 60px;
21 background-color: #838383;
22}<main> : 전체 콘텐츠를 담는 주요 영역입니다. header, contents, slider로 구성되어 있습니다.<header> : 로고와 내비게이션이 포함된 좌측 고정 영역입니다.<section> : 콘텐츠 그룹을 구성하는 영역으로, 배너/공지사항/갤러리/링크 등 4개의 하위 요소를 포함합니다.<article> : 슬라이드 및 각 콘텐츠 박스를 개별 블록으로 정의할 때 사용됩니다.<footer> : 사이트 하단 정보 영역으로 2단 구조(1차 분할 + 2차 중첩)로 구성됩니다.height: calc(100vh - 120px) → 화면 전체 높이에서 푸터(120px)를 제외한 메인 영역 높이를 설정합니다.width: calc(100% - 600px) → 고정 영역(header 200px + contents 400px)을 제외한 나머지 영역을 유동적으로 설정합니다.display: flex → 가로 정렬 및 복수의 블록 배치를 위해 사용됩니다. #main, #footer 등에 적용됩니다.background-color → 각 영역의 구조를 시각적으로 파악할 수 있도록 색상 구분을 적용했습니다.height: % → 콘텐츠 내부 영역은 화면 비율에 맞춰 높이를 설정하였습니다 (예: 15%, 35%).px (픽셀) : 고정 크기 단위입니다. 디바이스의 해상도나 화면 크기와 관계없이 항상 일정한 크기를 유지합니다.width: 200px% (퍼센트) : 부모 요소 기준으로 비율을 지정할 때 사용합니다. 반응형 레이아웃에서 자주 사용됩니다.width: 100%vh (viewport height) : 브라우저 화면 높이의 1%를 의미합니다. 전체 화면 기준의 높이 설정에 유용합니다.height: 100vh → 전체 화면 높이vw (viewport width) : 브라우저 화면 너비의 1%를 의미합니다.width: 100vwem : 부모 요소의 폰트 크기를 기준으로 상대적인 크기를 지정합니다.padding: 2em → 부모 폰트 크기의 2배rem : 루트(html)의 폰트 크기를 기준으로 상대적인 크기를 지정합니다.font-size: 1.5rem → 기본 폰트 크기의 1.5배calc() : 서로 다른 단위를 연산하여 혼합 사용할 수 있게 해줍니다.width: calc(100% - 200px)calc() 활용법을 이해하고 연습했습니다. 고정값과 유동값을 조합하여 반응형 구조를 만드는 핵심 기술입니다.100vh에서 고정값을 뺀 세로 계산식을 적용했습니다.background-color 지정으로 영역을 빠르게 구분할 수 있었습니다.자, 이렇게 해서 드디어 E유형의 첫 번째 레이아웃도 완성되었습니다! 🎉
이번 레이아웃은 A~D유형과 비교했을 때 조금 더 디테일하고 화면 기준 계산이 필요한 구조였습니다. 하지만 핵심 개념인 calc() 함수의 활용, flexbox를 이용한 정렬, 그리고 퍼센트 기반의 세로 높이 분할까지 잘 이해하셨다면 충분히 해내셨을 거예요! 😊
실무에서도 매우 자주 등장하는 구조이기 때문에, 꼭 여러 번 반복해서 연습해보시고 모양을 바꾸거나 구조를 살짝 변경해보며 응용 능력도 키워보시길 추천드립니다.
그럼 다음 유형에서 또 만나요! 고생하셨습니다. 👏👏👏