안녕하세요! 웹스토리보이입니다 😊
이번에는 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 전체 유형을 복습하며 내 것으로 만드는 시간만 남았습니다. 연습을 반복하면 실력은 반드시 올라갑니다. 💪
끝까지 포기하지 않고 완주하신 여러분은 이미 자격증 합격을 향해 큰 걸음을 내디뎠어요! 앞으로도 꾸준히 연습하시고, 실전에서도 긴장하지 마시고 차분하게 작성하신다면 좋은 결과 있을 거예요. 😊
진심으로 고생 많으셨습니다! 다음 단계에서도 함께 응원할게요! 🌟