안녕하세요! 웹스토리보이입니다 😊
이번에는 F-4 유형 레이아웃을 함께 만들어보겠습니다. 이 유형은 앞서 다뤘던 F-1부터 F-3까지의 흐름을 그대로 이어가며, 콘텐츠 배치와 푸터 구조에서 약간의 변화가 있는 것이 특징입니다.
특히 공지사항과 갤러리 영역을 가로 분할로 구성하고, 하단 푸터를 3분할 구조로 정리하는 방식이 눈에 띄는데요, 익숙한 패턴이 많기 때문에 지금까지 따라오셨다면 무리 없이 완성하실 수 있을 거예요!
그럼 오늘도 천천히, 차근차근 따라오시면서 완성해볼까요? 렛츠 고! 💪🚀
VSCODE를 실행하고 webdesign 폴더 안에 layoutF-4.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 F-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>웹디자인개발기능사 레이아웃 F-4</title>
7</head>
8<body>
9
10</body>
11</html>전체 구조는 #wrap이라는 부모 요소 안에 네 개의 주요 섹션으로 구성되어 있습니다. 상단에는 <header>가 위치하고, 그 아래로 <slider>, 메인 콘텐츠를 담는 <section id="contents">, 마지막으로 하단의 <footer>가 차례로 배치되어 있습니다.
1<body>
2 <div id="wrap">
3 <header id="header"></header>
4 <article id="slider"></article>
5 <section id="contents"></section>
6 <footer id="footer"></footer>
7 </div>
8</body>1* {
2 margin: 0;
3 padding: 0;
4}
5#wrap {
6 width: 100%;
7}
8#header {
9 width: 1340px;
10 height: 100px;
11 margin: 0 auto;
12 background-color: #efefef;
13}
14#slider {
15 width: 100%;
16 height: 350px;
17 background-color: #e3e3e3;
18}
19#contents {
20 width: 1340px;
21 height: 450px;
22 margin: 0 auto;
23 background-color: #d9d9d9;
24}
25#footer {
26 width: 1340px;
27 height: 120px;
28 margin: 0 auto;
29 background-color: #d1d1d1;
30}<header> 영역은 웹페이지의 상단, 즉 머리 부분을 담당하는 구역입니다. 이 안에는 왼쪽에 위치할 로고 영역과, 오른쪽에 배치될 내비게이션 메뉴(nav)가 포함되어 있어요.
1<header id="header">
2 <h1 class="logo"></h1>
3 <nav class="nav"></nav>
4</header>
5<!-- //header -->1#header {
2 width: 1340px;
3 margin: 0 auto;
4 display: flex;
5}
6#header .logo {
7 width: 20%;
8 height: 100px;
9 background-color: #efefef;
10}
11#header .nav {
12 width: 80%;
13 height: 100px;
14 background-color: #e3e3e3;
15}<slider> 영역은 이미지 슬라이드나 배너가 들어가는 공간입니다. 전체 너비(width: 100%)를 차지하며, 높이는 350px로 설정되어 있어요. 하단에는 .link라는 박스가 하나 들어가 있는데, 이 박스는슬라이더 영역 안의 하단에 가로 중앙에 위치하도록 CSS로 정렬되었습니다.position: absolute와 left: 50%, 그리고transform: translateX(-50%) 조합은 정중앙 정렬 공식처럼 자주 쓰이는 패턴이니 꼭 기억해두세요! 😉
1<article id="slider">
2 <div class="link">링크</div>
3</article>
4<!-- //slider -->1#slider {
2 width: 100%;
3 height: 350px;
4 background-color: #d9d9d9;
5 position: relative;
6}
7#slider .link {
8 width: 1340px;
9 height: 100px;
10 background-color: #c7c7c7;
11 position: absolute;
12 left: 50%;
13 bottom: 0;
14 transform: translateX(-50%);
15}<section id="contents">는 본문 영역의 핵심 콘텐츠를 담는 공간이에요. 이 안에는 갤러리와 공지사항 두 개의 <article> 박스가 포함되어 있습니다.
1<section id="contents">
2 <article class="banner"></article>
3 <div>
4 <article class="notice"></article>
5 <article class="gallery"></article>
6 </div>
7</section>
8<!-- //contents -->1#contents {
2 width: 1340px;
3 margin: 0 auto;
4}
5#contents .banner {
6 width: 100%;
7 height: 150px;
8 background-color: #b8b8b8;
9}
10#contents > div {
11 width: 100%;
12 display: flex;
13}
14#contents > div .notice {
15 width: 50%;
16 height: 350px;
17 background-color: #b1b1b1;
18}
19#contents > div .gallery {
20 width: 50%;
21 height: 350px;
22 background-color: #a3a3a3;
23}<footer> 영역은 웹페이지의 하단 영역을 구성합니다. 이 레이아웃에서는 footer1, footer2, footer3의 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: 1340px;
3 margin: 0 auto;
4 display: flex;
5}
6#footer .footer1 {
7 width: 20%;
8 height: 100px;
9 background-color: #9d9d9d;
10}
11#footer .footer2 {
12 width: 60%;
13 height: 100px;
14 background-color: #929292;
15}
16#footer .footer3 {
17 width: 20%;
18 height: 100px;
19 background-color: #838383;
20}<header> : 상단 레이아웃으로 로고와 내비게이션 메뉴를 포함합니다.<article id="slider"> : 슬라이드 배너와 하단 링크 박스를 포함한 전폭 배너 영역입니다.<section id="contents"> : 메인 콘텐츠 공간으로, 상단 배너와 하단의 공지/갤러리 영역을 포함합니다.<footer> : 하단 구조로, 좌우 2분할과 가운데 중간 박스를 구성합니다.width: 1340px + margin: 0 auto : 전체 콘텐츠를 가운데 정렬하는 기본 방식입니다.position: absolute + left: 50% + transform: translateX(-50%) : 슬라이더 하단의 링크 박스를 가로 중앙에 정확히 배치하는 조합입니다.display: flex : 콘텐츠 내부(공지/갤러리)와 푸터 구조에서 가로 정렬을 위해 사용됩니다.background-color : 각 블록의 시각적 구분을 돕기 위해 사용한 임시 색상입니다.🎉 드디어 F-4 유형까지 모두 완성하셨습니다! 지금까지 F-1부터 F-4 유형까지, 다양한 레이아웃 구조와 세부 배치를 함께 차근차근 연습해보셨죠? 여기까지 따라오신 여러분, 정말 수고 많으셨습니다 👏👏👏
실기 시험에서 중요한 건 빠르게 코드를 짜는 것도 있지만, 구조를 파악하고 나만의 방식으로 안정적으로 구현하는 감각을 익히는 것입니다. 오늘 배운 내용은 그 감각을 키워나가는 데 분명히 큰 도움이 되었을 거예요.
이제 F유형까지 모두 마쳤다면, A~F 전체 유형을 복습하며 내 것으로 만드는 시간만 남았습니다. 연습을 반복하면 실력은 반드시 올라갑니다. 💪
끝까지 포기하지 않고 완주하신 여러분은 이미 자격증 합격을 향해 큰 걸음을 내디뎠어요! 앞으로도 꾸준히 연습하시고, 실전에서도 긴장하지 마시고 차분하게 작성하신다면 좋은 결과 있을 거예요. 😊
진심으로 고생 많으셨습니다! 다음 단계에서도 함께 응원할게요! 🌟