2023년 웹디자인 기능사 레이아웃 : D-1
소개
안녕하세요! 웹스토리보이입니다. 이번에는 D유형을 작업해보겠습니다. 이번 유형은 반응형 유형으로 전체화면을 기준으로 작업하게 됩니다. 기존에 레이아웃과는 많은 부분이 다르기 때문에 좀 더 디테일하게 작업하셔야 합니다. 샘플 PDF를 참고하여 수치도 정확하게 작업해야 합니다. 그럼 시작해보겠습니다. 🤩
1. 기본 구조 만들기
웹 문서 만들기 : VSCODE를 실행하고 D-1.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다.
lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 D-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>웹디자인기능사 레이아웃 D-1</title>
</head>
<body>
</body>
</html>
전체적인 구조는 왼쪽 사이드, 콘텐츠 영역, 푸터 영역으로 구성되어 있습니다.
특징이라면 반응형이긴 하지만, 왼쪽 메뉴는 200px로 고정되어 있습니다.
<body>
<div id="wrap">
<aside id="aside"></aside>
<main id="main"></main>
<footer id="footer"></footer>
</div>
</body>
왼쪽 사이드를 고정시키고, 메인 컨텐츠를 100%로 작업하게 되면, 전체 가로 값은 200px + 100%가 되기 때문에 100%를 초과하게 됩니다.
전체 가로 값은 100%에 맞추기 위해서는 콘텐츠 값에서 200px을 빼주어야 합니다.
그 부분을 CSS로 표현하기 위해서는 calc를 사용할 수 있습니다.
즉 연산이 가능합니다. 이렇게 하면 가로로 정렬이 가능해집니다.
한번 확인해보세요! 여기서 주의할점은 width: calc(100% - 200px);를 작성시 하이픈(-) 양 옆으로 공백이 꼭 있어야 합니다.
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
display: flex;
flex-wrap: wrap;
}
#aside {
width: 200px;
height: 850px;
background-color: #efefef;
}
#main {
width: calc(100% - 200px);
height: 850px;
background-color: #e3e3e3;
}
#footer {
width: 100%;
height: 100px;
background-color: #d9d9d9;
}
</style>
메인 콘텐츠의 구조는 슬라이드, 배너, 공지사항 구조로 이루어져 있습니다.
슬라이드와 배너는 article태그로, 공지사항은 section태그로 작업하였습니다.
이렇게 하면 전체적인 레이아웃은 완성이 되었습니다.
이제 세부적인 영역을 작업해보겠습니다.
<div id="wrap">
<aside id="aside"></aside>
<main id="main">
<article id="slider"></article>
<article id="banner"></article>
<section id="contents"></section>
</main>
<footer id="footer"></footer>
</div>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
display: flex;
flex-wrap: wrap;
}
#aside {
width: 200px;
height: 850px;
background-color: #efefef;
}
#main {
width: calc(100% - 200px);
height: 850px;
background-color: #e3e3e3;
}
#slider {
width: 100%;
height: 400px;
background-color: #d9d9d9;
}
#banner {
width: 100%;
height: 200px;
background-color: #d1d1d1;
}
#contents {
width: 100%;
height: 250px;
background-color: #c7c7c7;
}
#footer {
width: 100%;
height: 100px;
background-color: #bcbcbc;
}
2. 각 섹션 작업하기
사이드 영역의 로고와 메뉴를 설정하겠습니다. 따로 크기에 대한 정의가 없으므로, 임의로 설정하겠습니다.
<aside id="aside">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</aside>
#aside {
width: 200px;
}
#aside .logo {
width: 100%;
height: 100px;
background-color: #efefef;
}
#aside .nav {
width: 100%;
height: 750px;
background-color: #e3e3e3;
}
슬라이드 영역을 작업해보겠습니다.
이번 유형의 슬라이드는 특이한게 링크 배너가 슬라이드 위에 위치해 있습니다.
그래서 position:absolute를 이용하여 내가 원하는 위치로 설정할 것입니다.
주의할 점이 있다면 절대 위치를 설정하였다면 기준점이 되는 relative를 설정해야 합니다.
부모 박스를 기준으로 잡기위해 slider에 postion: relative를 설정하였습니다.
<article id="slider">
<div class="link"></div>
</article>
#slider {
width: 100%;
height: 400px;
background-color: #d9d9d9;
position: relative;
}
#slider .link {
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 300px;
background-color: #9d9d9d;
}
배너 영역도 특이한 부분이 없기 때문에 영역만 확인하겠습니다.
<article id="banner"></article>
#banner {
width: 100%;
height: 200px;
background-color: #d1d1d1;
}
콘텐츠 공지사항 영역도 특이한 부분이 없기 때문에 영역만 확인하겠습니다.
<section id="contents"></section>
#contents {
width: 100%;
height: 250px;
background-color: #c7c7c7;
}
푸터 영역은 3개의 영역으로 작업하겠습니다.
<footer id="footer">
<div class="footer1"></div>
<div class="footer2"></div>
<div class="footer3"></div>
</footer>
<!-- //footer -->
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 100px;
background-color: #bcbcbc;
}
#footer .footer2 {
width: 60%;
height: 100px;
background-color: #b1b1b1;
}
#footer .footer3 {
width: 20%;
height: 100px;
background-color: #a3a3a3;
}
3. 마무리
D-1유형도 마무리 되었습니다. 반응형 레이아웃이기 때문에 기존에 레이아웃과는 조금 다룰 수 있지만, 기본 원리는 비슷합니다. 앞에서 배운 레이아웃에 충실하였다면, 새로운 레이아웃이 나와도 응용하여 작업할 수 있습니다. 이번 유형이 조금 이해가 안간다면 한번 더 따라해주세요! 그럼 다음 유형에서 봐요! 🥳
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글