2023년 웹디자인 기능사 레이아웃 : A-3
소개
안녕하세요! 웹스토리보이입니다.
A-2유형도 A-3유형과 푸터만 빼고 거의 똑같습니다.
하단 메뉴와 카피라이터가 있는 구조로 별로 어렵지 않습니다.
A유형은 기본 골격은 같고 푸터만 살짝 다른 유형으로 이루어져 있어서 어렵지 않습니다.
그럼 바로 시작해보겠습니다.😅
1. 기본 구조 만들기
웹 문서 만들기 : VSCODE를 실행하고 A-3.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다.
lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 A-3으로 변경해주겠습니다.
상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수 있으니 참고해주세요!
<!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>웹디자인기능사 레이아웃 A-3</title>
</head>
<body>
</body>
</html>
전체적인 영역을 감싸고 있는 wrap을 만들고, 자식 요소로 header, slider, contents, footer를 만들겠습니다.
참고로 main 태그는 사이트에서 한번 밖에 사용하지 못합니다.
<body>
<div id="wrap">
<header id="header"></header>
<article id="slider"></article>
<main id="contents"></main>
<footer id="footer"></footer>
</div>
</body>
* 표시는 전체 태그를 선택하는 선택자입니다. 여기에 마진과 패딩을 0을 주는 이유는 모든 태그에는 보이지 않는 여백이 존재합니다. 그 여백이 모든 브라우저에서 동일하다면 상관없지만 조금씩 틀리기 때문에 모든 요소에 여백을 초기화 시켜주는 겁니다. 그래서 넣어 줬어요!😝 각 요소에 가로, 세로, 백그라운드를 넣어주면 영역을 볼 수 있습니다. 이제 다 알죠!
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#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. 각 섹션 작업하기
헤더 영역은 기존과 동일합니다.
로고 영역은 사이트 문서에 있어 가장 중요한 타이틀 역활을 하기 때문에 h1 태그를 사용할 수 있습니다.
딱 정해진건 아니지만 대부분에 이렇게 많이 사용합니다.
여러분들도 쓰고 싶은거 쓰시면 됩니다. 전 h1태그를 사용하겠습니다.
두개의 영역을 나누어 주기 위해 flex를 사용하였고, 자식 요소에 width에 따라 영역이 설정되었습니다.
<div id="header">
<h1 class="logo"></h1>
<div class="nav"></div>
</div>
<!-- //header -->
#header {
width: 100%;
display: flex;
}
#header .logo {
width: 20%;
height: 100px;
background-color: #efefef;
}
#header .nav {
width: 80%;
height: 100px;
background-color: #e3e3e3;
}
슬라이드 영역은 별거 없으니 표시만 하고 넘어가겠습니다. 슝~~~
<div id="slider"></div>
<!-- //slider -->
#slider {
width: 100%;
height: 300px;
background-color: #d9d9d9;
}
컨텐츠 영역은 3개의 섹션으로 구성되어 있어 섹션 태그를 사용하여 작업하였습니다.
태그를 선택하는 방법은 여러가지가 있지만 여기선 class를 이용하여 작업하였습니다.
id와 class 선택자를 사용하는 이유는 여러가지가 있지만, 여기서 class도 쓸 수 있구나 하고 넘어가겠습니다.
많이 코딩하다 보면 자동적으로 익혀지는 부분이라, 처음부터 완벽하게 이해하고 넘어갈 필요는 없습니다.
어째든 태그에 이름을 표시하는 방법에는 ID와 CLASS가 있습니다.
<div id="contents">
<section class="content1"></section>
<section class="content2"></section>
<section class="content3"></section>
</div>
<!-- //contents -->
#contents {
width: 100%;
display: flex;
}
#contents .content1 {
width: 33.3333%;
height: 200px;
background-color: #d1d1d1;
}
#contents .content2 {
width: 33.3333%;
height: 200px;
background-color: #c7c7c7;
}
#contents .content3 {
width: 33.3333%;
height: 200px;
background-color: #bcbcbc;
}
마지막으로 푸터 영역을 확인해보겠습니다. 이번에 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: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 100px;
background-color: #b1b1b1;
}
#footer .footer2 {
width: 80%;
}
#footer .footer2 .footer2-1 {
width: 100%;
height: 50px;
background-color: #a3a3a3;
}
#footer .footer2 .footer2-2 {
width: 100%;
height: 50px;
background-color: #9d9d9d;
}
3. 마무리
세번째 색션까지 잘 따라 했나요? 상단에 완성 코드랑 완성 이미지를 보고 비교해보세요! 😜 느낌이 온다면 바로 네번째로 넘어가죠!!
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글