2023년 웹디자인 기능사 레이아웃 : E-1
소개
안녕하세요! 웹스토리보이입니다. 이번에는 E유형을 작업해보겠습니다. 아마도 레이아웃 유형 중에 제일 어려운 유형이 아닐까 싶네요! 하지만 몇 번만 만들어 보면 여러분들도 충분히 할 수 있습니다. 그럼 다 같이 시작해봅시다.
1. 기본 구조 만들기
웹 문서 만들기 : VSCODE를 실행하고 E-1.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다.
lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 E-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>웹디자인기능사 레이아웃 E-1</title>
</head>
<body>
</body>
</html>
전체적인 구조는 2단 또는 4단으로 만들수 있습니다.
4단보다는 2단구조가 더 안정적이기 때문에 main과 footer로 만들고 작업하겠습니다.
이번 레이아웃의 특징은 height 값도 화면 height 값에 딱 맞추어야 합니다.
그래서 푸터 영역을 제외한 부분을 100%로 맞추어야 합니다.
메인의 높이 값은 height: calc(100vh - 120px) 이렇게 설정하면
화면 높이에 딱 맞출 수 있습니다.
<body>
<div id="wrap">
<main id="main"></main>
<footer id="footer"></footer>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#main {
width: 100%;
height: calc(100vh - 120px);
background-color: #efefef;
}
#footer {
width: 100%;
height: 120px;
background-color: #e3e3e3;
}
</style>
메인 콘텐츠는 3개의 영역으로 이루어져 있으며, header, contents, slider로 구성하였습니다.
여기서 헤더와 콘텐츠는 고정값이고, 슬라이드는 유동적이기 때문에 width: calc(100% - 600px); 이렇게 설정해야 반응형이 가능합니다.
이렇게 하면 화면의 크기를 변경해도 화면에 맞게 변하는 모습을 볼 수 있습니다.
<div id="wrap">
<main id="main">
<header id="header"></header>
<section id="contents"></section>
<article id="slider"></article>
</main>
<footer id="footer"></footer>
</div>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#main {
width: 100%;
height: calc(100vh - 120px);
display: flex;
}
#header {
width: 200px;
height: 100%;
background-color: #efefef;
}
#contents {
width: 400px;
height: 100%;
background-color: #e3e3e3;
}
#slider {
width: calc(100% - 600px);
height: 100%;
background-color: #d9d9d9;
}
#footer {
width: 100%;
height: 120px;
background-color: #d1d1d1;
}
2. 각 섹션 작업하기
메인 박스 안에 헤더 영역을 작업하겠습니다. 헤더 영역은 로고와 메뉴 영역으로 나누어져 있습니다.
<header id="header">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</header>
<!-- //header -->
#header {
width: 200px;
height: 100%;
}
#header .logo {
width: 100%;
height: 10%;
background-color: #e3e3e3;
}
#header .nav {
width: 100%;
height: 90%;
background-color: #d9d9d9;
}
컨텐츠 영역은 4개의 영역으로 이루어져 있습니다.
배너, 공지사항, 갤러리, 링크 영역으로 이루어져 있으며, 높이 값은 화면 비율에 맞추어야 하기 때문에 %로 작업하였습니다.
<section id="contents">
<article class="banner"></article>
<article class="notice"></article>
<article class="gallery"></article>
<article class="link"></article>
</section>
<!-- //contents -->
#contents {
width: 400px;
height: 100%;
}
#contents .banner {
width: 100%;
height: 15%;
background-color: #d1d1d1;
}
#contents .notice {
width: 100%;
height: 35%;
background-color: #c7c7c7;
}
#contents .gallery {
width: 100%;
height: 35%;
background-color: #bcbcbc;
}
#contents .link {
width: 100%;
height: 15%;
background-color: #b1b1b1;
}
슬라이드 영역은 특별한 것이 없으니 영역만 잡고 넘어가겠습니다.
대신 width 값은 유동적으로 변해야 하기 때문에 width: calc(100% - 600px) 이렇게 설정했습니다.
<article id="slider"></article>
#slider {
width: calc(100% - 600px);
height: 100%;
background-color: #a3a3a3;
}
푸터 영역은 2개의 영역으로 나누고, 두번재 영역은 다시 두개의 영역으로 작업하겠습니다.
<footer id="footer">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</footer>
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 120px;
background-color: #9d9d9d;
}
#footer .footer2 {
width: 80%;
}
#footer .footer2 .footer2-1 {
width: 100%;
height: 60px;
background-color: #929292;
}
#footer .footer2 .footer2-2 {
width: 100%;
height: 60px;
background-color: #838383;
}
3. 마무리
잘 이해하셨나요?
이번 유형은 화면에 딱 맞는 반응형 구조이기 때문에 calc를 많이 사용했습니다.
브라우저 화면의 크기를 조절해보면 딱 맞는 구조를 확인할 수 있습니다.
아직 3개의 레이아웃이 더 남아 있으니 같이 더 연습해봅시다.!🥸
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글