안녕하세요! 웹스토리보이입니다 😊
오늘은 2025년에 새롭게 추가된 F-1 유형 레이아웃을 함께 만들어볼 거예요. 처음 접하는 구조일 수 있지만, 지금까지 차근차근 연습해오신 분들이라면 전혀 어렵지 않게 따라오실 수 있을 거예요. 편안한 마음으로 함께 시작해볼까요? 렛츠 기릿! 💪✨
VSCODE를 실행하고 webdesign 폴더 안에 layoutF-1.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 F-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>웹디자인개발기능사 레이아웃 F-1</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}
16<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: #d1d1d1;
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="gallery"></article>
3 <article class="notice"></article>
4</section>
5<!-- //contents -->1#contents {
2 width: 1340px;
3 margin: 0 auto;
4}
5#contents .gallery {
6 width: 100%;
7 height: 150px;
8 background-color: #c7c7c7;
9}
10#contents .notice {
11 width: 100%;
12 height: 300px;
13 background-color: #bbbbbb;
14}<footer>는 페이지의 맨 아래에 위치하며, 사이트의 부가 정보나 저작권, 연락처 등을 담는 공간입니다. 이 구조에서는 총 3개의 박스로 구성되어 있어요..footer1은 좌측, .footer2는 중앙, .footer3는 우측에 배치될 수 있는 기본 틀입니다.
특히 .footer2는 다시 .footer2-1과 .footer2-2로 나뉘어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>
8<!-- //footer -->1#footer {
2 width: 1340px;
3 height: 120px;
4 margin: 0 auto;
5 display: flex;
6}
7#footer .footer1 {
8 width: 20%;
9 height: 120px;
10 background-color: #b8b8b8;
11}
12#footer .footer2 {
13 width: 80%;
14 height: 120px;
15}
16#footer .footer2 .footer2-1 {
17 width: 100%;
18 height: 60px;
19 background-color: #b1b1b1;
20}
21#footer .footer2 .footer2-2 {
22 width: 100%;
23 height: 60px;
24 background-color: #a3a3a3;
25}<header> : 상단 영역으로, 로고와 내비게이션 메뉴를 포함합니다.<article id="slider"> : 슬라이드 영역으로 전체 너비를 차지하며, 링크 박스가 포함됩니다.<section id="contents"> : 콘텐츠 영역으로 갤러리와 공지사항 등 주요 정보 블록을 포함합니다.<footer> : 사이트 하단 영역으로 3개의 수평 분할 + 내부 2단 구조로 구성됩니다.width: 1340px + margin: 0 auto → 고정된 콘텐츠 영역을 수평 중앙에 배치합니다.position: absolute + left: 50% + transform → 슬라이더 하단의 링크 박스를 정확히 중앙 정렬합니다.background-color → 각 영역을 시각적으로 구분하고 구조를 파악하기 쉽게 도와줍니다.transform은 요소에 다양한 시각적 변형(translate, rotate, scale, skew 등)을 적용할 수 있는 속성입니다.translateX(-50%) : 요소를 자기 자신의 너비의 50%만큼 왼쪽으로 이동시킵니다.left: 50%와 함께 사용되어 가로 중앙 정렬을 정확하게 구현할 때 사용됩니다.translateY() : 위 또는 아래로 이동시킬 때 사용합니다. translateY(-50%)는 세로 중앙 정렬 시 활용됩니다.scale() : 요소를 확대 또는 축소할 수 있습니다. 예) scale(1.2)는 120% 확대rotate() : 요소를 시계 방향으로 회전시킵니다. 예) rotate(45deg)는 45도 회전skew() : 요소를 기울입니다. 예) skew(10deg, 0deg)1340px)과 유동형 요소(slider)의 조합을 연습했습니다.position과 transform을 활용한 정중앙 배치 기법을 익혔습니다.이렇게 해서 F-1 유형 레이아웃도 완성되었습니다! 👏 이번 유형을 통해 고정 너비와 유동 너비, 정중앙 배치, 그리고 중첩 레이아웃까지 한꺼번에 복습할 수 있었죠.
다양한 유형을 반복하다 보면, 어느 순간 새로운 구조도 익숙한 패턴처럼 느껴질 거예요. 중요한 건 흐름을 이해하고, 틀에 맞춰 **빠르고 정확하게 구현하는 연습**을 계속해나가는 것입니다.
다음 유형에서도 함께 성장해봐요! 고생 많으셨습니다 😊💻🔥