로딩 중...
웹스토리보이1인 개발자를 위한 풀스택 빌더웹스토리보이1인 개발자를 위한 풀스택 빌더안녕하세요! 웹스토리보이입니다 😊
이번에는 F-3 유형 레이아웃을 함께 만들어보겠습니다. 전체적인 구성은 앞선 F-1, F-2 유형과 유사하지만, 콘텐츠 영역의 배치나 푸터 구조에서 조금씩 변화가 있으니 꼼꼼하게 비교하며 따라오면 큰 도움이 될 거예요!
그럼, 오늘도 차근차근 같이 시작해볼까요? 렛츠 기릿! 💪✨
VSCODE를 실행하고 webdesign 폴더 안에 layoutF-3.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인개발기능사 레이아웃 F-3으로 변경해주겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹디자인개발기능사 레이아웃 F-3</title>
</head>
<body>
</body>
</html>
전체 구조는 #wrap이라는 부모 요소 안에 네 개의 주요 섹션으로 구성되어 있습니다. 상단에는 <header>가 위치하고, 그 아래로 <slider>, 메인 콘텐츠를 담는 <section id="contents">, 마지막으로 하단의 <footer>가 차례로 배치되어 있습니다.
<body>
<div id="wrap">
<header id="header"></header>
<article id="slider"></article>
<section id="contents"></section>
<footer id="footer"></footer>
</div>
</body>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 1340px;
height: 100px;
margin: 0 auto;
background-color: #efefef;
}
#slider {
width: 100%;
height: 350px;
background-color: #e3e3e3;
}
#contents {
width: 1340px;
height: 450px;
margin: 0 auto;
background-color: #d9d9d9;
}
#footer {
width: 1340px;
height: 120px;
margin: 0 auto;
background-color: #d1d1d1;
}
<header> 영역은 웹페이지의 상단, 즉 머리 부분을 담당하는 구역입니다. 이 안에는 왼쪽에 위치할 로고 영역과, 오른쪽에 배치될 **내비게이션 메뉴(nav)**가 포함되어 있어요.
<header id="header">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</header>
<!-- //header -->
#header {
width: 1340px;
margin: 0 auto;
display: flex;
}
#header .logo {
width: 20%;
height: 100px;
background-color: #efefef;
}
#header .nav {
width: 80%;
height: 100px;
background-color: #e3e3e3;
}
<slider> 영역은 이미지 슬라이드나 배너가 들어가는 공간입니다. 전체 너비(width: 100%)를 차지하며, 높이는 350px로 설정되어 있어요. 하단에는 .link라는 박스가 하나 들어가 있는데, 이 박스는 슬라이더 영역 안의 하단에 가로 중앙에 위치하도록 CSS로 정렬되었습니다. position: absolute와 left: 50%, 그리고 transform: translateX(-50%) 조합은 정중앙 정렬 공식처럼 자주 쓰이는 패턴이니 꼭 기억해두세요! 😉
<article id="slider">
<div class="link">링크</div>
</article>
<!-- //slider -->
#slider {
width: 100%;
height: 350px;
background-color: #d9d9d9;
position: relative;
}
#slider .link {
width: 1340px;
height: 100px;
background-color: #c7c7c7;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
<section id="contents">는 페이지의 핵심 콘텐츠가 들어가는 본문 영역입니다. 이 안에는 .banner와 .notice 두 개의 박스가 세로로 나란히 구성되어 있습니다. 각각은 상단 배너 영역과 하단 공지사항 영역으로 사용되며, width: 100%로 가로 너비를 꽉 채우고, height 속성으로 세로 크기를 구분해주었습니다.
<section id="contents">
<article class="banner"></article>
<article class="notice"></article>
</section>
<!-- //contents -->
#contents {
width: 1340px;
height: 450px;
margin: 0 auto;
}
#contents .banner {
width: 100%;
height: 150px;
background: #bcbcbc;
}
#contents .notice {
width: 100%;
height: 300px;
background: #b1b1b1;
}
<footer>는 웹페이지의 하단을 구성하는 영역으로, 정보, 저작권, 하단 메뉴 등을 정리해 넣는 공간입니다. 이 구조는 좌우 2분할 + 내부 2단 형태로 이루어져 있어요. 왼쪽 .footer1은 로고나 간단한 소개에, 오른쪽 .footer2는 다시 위아래 두 개 박스(.footer2-1, .footer2-2)로 나뉘어 메뉴, 저작권 등 다양한 정보를 분리해서 배치할 수 있도록 구성되어 있습니다.
<footer id="footer">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</footer>
<!-- //footer -->
#footer {
width: 1340px;
margin: 0 auto;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 120px;
background-color: #a3a3a3;
}
#footer .footer2 {
width: 80%;
}
#footer .footer2 .footer2-1 {
width: 100%;
height: 60px;
background-color: #9d9d9d;
}
#footer .footer2 .footer2-2 {
width: 100%;
height: 60px;
background-color: #838383;
}
<header> : 페이지의 상단 영역으로, 로고와 내비게이션 메뉴가 포함됩니다.<article id="slider"> : 슬라이드 배너를 구성하는 영역으로, 하단에 링크 박스도 포함됩니다.<section id="contents"> : 본문 콘텐츠가 배치되는 공간으로, 배너와 공지사항으로 구성되어 있습니다.<footer> : 페이지의 하단 영역으로, 좌우 2분할 구조이며 우측에는 내부 2단 구조를 포함합니다.width: 1340px + margin: 0 auto → 고정형 콘텐츠를 화면 중앙에 정렬할 때 사용됩니다.position: absolute + left: 50% + transform: translateX(-50%) → 슬라이더 안의 링크 박스를 정확히 가로 중앙에 배치하기 위한 조합입니다.display: flex → 헤더나 푸터와 같은 영역을 가로로 나열할 때 사용하는 기본 레이아웃 방식입니다.background-color → 각 영역의 시각적 구분을 위해 임시로 배경색을 지정하여 구조를 빠르게 파악할 수 있도록 합니다.transform: translateX(-50%)는 요소의 너비 기준으로 50% 왼쪽으로 이동시켜, left: 50%와 함께 사용할 경우 정확한 가로 중앙 정렬이 가능합니다.scale(), rotate(), skew() 등 다양한 변형 효과를 적용할 수 있습니다.position과 transform 조합을 활용한 링크 박스의 정중앙 정렬 기법을 연습했습니다.이번 F-3 유형도 멋지게 완성하셨습니다! 👏 반복 연습을 통해 패턴을 익혀두면 새로운 구조도 훨씬 빠르게 구현할 수 있어요.
조금씩 익숙해지다 보면, 시험장에서도 자연스럽게 손이 움직일 거예요. 오늘도 수고 많으셨습니다! 다음 유형도 함께 힘내서 완성해봐요 💪😊