2023년 웹디자인 기능사 레이아웃 : B-1
소개
안녕하세요! 웹스토리보이입니다. 이제 B유형을 만들어보겠습니다. B유형은 A유형과 다르게 전체 영역이 들어갑니다. 이런 유형은 실제 사이트에서도 많이 쓰는 부분이기에, 꼭 알고 넘어가는게 좋습니다. 전체 영역이 들어가기 때문에 A유형 보다는 조금 복잡할 수 있습니다. 그래도 반복연습하면 금방 이해가 될거예요! 그럼 시작해보겠습니다. 🥲
1. 기본 구조 만들기
웹 문서 만들기 : VSCODE를 실행하고 B-1.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다.
lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 B-1으로 변경해주겠습니다.
상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수 있으니 참고해주세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹디자인기능사 레이아웃 B-1</title>
</head>
<body>
</body>
</html>
전체적인 구조는 wrap박스 안에 4개의 박스가 있는 구조입니다.
섹션 태그를 이용하여 해당 아이디를 설정했습니다.
<body>
<div id="wrap">
<header id="header"></header>
<article id="slider"></article>
<main id="contents"></main>
<footer id="footer"></footer>
</div>
</body>
해당 영역을 확인하기 위해 width, height, background-color를 설정하였습니다.
전과 다른 점이 있다면 전체 영역이기 때문에 width값을 100%를 설정한 점이 다릅니다.
100%로 설정하면 브라우저 크기에 맞게 전체로 표현 될 것입니다.
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #efefef;
}
#slider {
width: 100%;
height: 300px;
background-color: #e3e3e3;
}
#contents {
width: 100%;
height: 200px;
background-color: #d9d9d9;
}
#footer {
width: 100%;
height: 100px;
background-color: #d1d1d1;
}
</style>
2. 각 섹션 작업하기
헤더 영역은 전체 영역과 가운데 영역으로 구성되어 있고, 가운데 영역은 로고 영역과 네비 영역으로 구성되어 있습니다.
전체 영역을 나타내는 header 영역에는 width: 100%를 설정하고 header_container 영역에는 width 값을 1200px로 설정합니다.
header_container 영역은 가운데로 오기 위해서 margin: 0 auto를 설정하겠습니다.
<div id="header">
<div class="header_container">
<h1 class="logo"></h1>
<div class="nav"></div>
</div>
</div>
<!-- //header -->
#haeader {
width: 100%;
background-color: #efefef;
}
#haeader .header_container {
width: 1200px;
margin: 0 auto;
display: flex;
}
#haeader .header_container .logo {
width: 20%;
height: 100px;
background-color: #d9d9d9;
}
#haeader .header_container .nav {
width: 80%;
height: 100px;
background-color: #d1d1d1;
}
슬라이드 영역은 전체 영역이 없고 가운데 영역만 있기 때문에 margin: 0 auto;를 설정하겠습니다.
<div id="slider"></div>
<!-- //slider -->
#slider {
width: 1200px;
height: 300px;
margin: 0 auto;
background-color: #c7c7c7;
}
컨텐츠 영역도 전체 영역은 없고 가운데 영역만 있는 구조입니다.
가운데 영역 안에 3개의 자식 영역이 들어가는 형태입니다.
3개의 영역은 width값을 33.3333%로 설정하고, 상위 박스영역에는 flex를 설정하겠습니다.
<div id="contents">
<section class="content1"></section>
<section class="content2"></section>
<section class="content3"></section>
</div>
<!-- //contents -->
#contents {
width: 1200px;
margin: 0 auto;
display: flex;
}
#contents .content1 {
width: 33.3333%;
height: 200px;
background-color: #bcbcbc;
}
#contents .content2 {
width: 33.3333%;
height: 200px;
background-color: #b1b1b1;
}
#contents .content3 {
width: 33.3333%;
height: 200px;
background-color: #a3a3a3;
}
마지막으로 부터 영역은 전체 영역이 들어가기 때문에 footer 영역한테는 width를 100%로 설정하고,
footer_container에게는 width값을 1200px로 설정하고
가운데 정렬를 위해 margin: 0 auto를 설정하겠습니다.
자식으로 3개의 박스가 있으니 이 부분도 width, height을 설정하고 부모박스한테 flex를 설정하면 가로로 정렬이 됩니다.
<footer id="footer">
<div class="footer_container">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</div>
</footer>
<!-- //footer -->
#footer {
width: 100%;
background-color: #d1d1d1;
}
#footer .footer__container {
width: 1200px;
margin: 0 auto;
display: flex;
}
#footer .footer__container .footer1 {
width: 20%;
height: 100px;
background-color: #9d9d9d;
}
#footer .footer__container .footer2 {
width: 80%;
}
#footer .footer__container .footer2 .footer2-1 {
width: 100%;
height: 50px;
background-color: #929292;
}
#footer .footer__container .footer2 .footer2-2 {
width: 100%;
height: 50px;
background-color: #838383;
}
3. 마무리
새로운 B유형은 어떤가요? 어렵나요? 어려우면 B유형의 두번째 유형으로 다시 한번 복습하고, 이해했다면 C유형으로 가도됩니다. 그럼 다음 유형에서 봅시다. 😇
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글