2023년 웹디자인 기능사 레이아웃 : A-2
소개
안녕하세요! 웹스토리보이입니다.
2023버전 웹디자인 기능사 레이아웃 A-2유형을 작업하겠습니다.
A-1유형과 A-2유형은 동일합니다. 안에 내용물만 틀릴뿐 전체적인 구조는 동일합니다.
A-1유형에는 div태그를 이용해서 작업했다면, 이번에는 시멘틱 태그1를 통해 작업해보겠습니다.
웹디자인 기능사 시험은 웹표준을 준수하여 작업하라고 명시되어 있습니다.
기본 div 태그를 이용하여 작업하여도, 구성하는데에는 문제가 없지만, 웹 접근성 향상을 위해
이번에는 시멘틱 태그를 이용하여 작업하겠습니다.
시멘틱 태그는 기본 태그에 의미를 부여하여 작업한 태그로 이번 예제를 통해 익히시면 되겠습니다.
그럼 시작해보겠습니다.😇 렛츠기릿!
1. 기본 구조 만들기
웹 문서 만들기 : VSCODE를 실행하고 webd2023폴더를 만들고 A-2.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다.
lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 A-2으로 변경해주겠습니다.
상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수 있으니 참고해주세요!
<!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-2</title>
</head>
<body>
</body>
</html>
구조 만들기 : 전체적인 레이아웃을 확인하고 전체적인 구조를 만들어 보겠습니다.
이 유형은 크게 header, slider, contents, footer로 구성되어 있으며,
전체적인 영역을 감싸는 wrap으로 구성되어 있습니다.
이 부분은 body 영역에 아래와 같이 표현하겠습니다.
웹 문서에서 영역을 잡을 때는 블록구조1 태그를 이용하여 작업합니다.
시멘틱 태그를 이용하여 해당 영역 의미에 맞게 태그를 작업하였습니다. 이런 태그를 시멘틱 태그라 합니다.
<body>
<div id="wrap">
<header id="header"></header>
<article id="slider"></article>
<main id="contents"></main>
<footer id="footer"></footer>
</div>
</body>
구조 영역 표시하기 : 전체적인 구조를 작업했으니 CSS를 통해 구조가 잘 잡혔는지 확인해보겠습니다.
시멘틱 태그를 사용하여도, 아이디를 설정하였기 때문에 CSS는 아이디를 통해 설정하면 됩니다.
블록 구조를 가운데 정렬하기 위하여 전체 영역을 감싸고 있는 wrap에 margin: 0 auto;를 설정하였습니다.
샘플 PDF를 보고 width, Height를 설정하고, 백그라운드 색을 설정하였습니다.
이렇게 하면 기본 구조는 다 잡았습니다. 이제는 각 섹션을 세심하게 한번 작업해보겠습니다.
<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. 각 섹션 작업하기
헤더 영역에는 로고 영역과 네비 영역으로 나누어지고 부모 박스한테 display:flex를 주면, 가로로 정렬이 됩니다.
width: 80%는 부모박스를 기준으로 80%를 의미합니다.
<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개의 영역으로 나누어집니다.
각 영역의 독립적인 의미를 가진다면 section 태그를 사용할 수 있습니다.
이번에는 섹션 태그를 사용하여 영역을 나누겠습니다.
나머지 부분은 동일합니다.
<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;
}
푸터 영역도 콘텐츠와 동일하게 3개의 영역으로 나누어집니다.
여기에서는 독립적인 영역을 나타내는 부분이 아니기 때문에 div 태그를 사용하였습니다.
시멘틱 태그는 해당 영역에 적당한 의미가 부여된 태그가 있으면, 적절하게 사용하면 됩니다.
<div id="footer">
<div class="footer1"></div>
<div class="footer2"></div>
<div class="footer3"></div>
</div>
<!-- //footer -->
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 100px;
background-color: #b1b1b1;
}
#footer .footer2 {
width: 60%;
height: 100px;
background-color: #a3a3a3;
}
#footer .footer3 {
width: 20%;
height: 100px;
background-color: #9d9d9d;
}
3. 마무리
A-1유형을 다시 복습하여 만든 A-2유형입니다. 두번 하니까 조금 더 쉽죠! 세번 네번 따라하면 더 쉬어질 겁니다. 두고보세요😜 처음부터 깊이 있는 내용을 한꺼번에 하진 않습니다. 조금씩 반복적으로 하면서 조금씩 깊이 들어가니까! 지금은 살짝 느낌만 보시면 됩니다. 너무 어렵다고 좌절할 필요가 절대 없습니다. 그리고 아마도 처음하시는 분들은 오타 때문에 따라오기 쉽지 않을거예요! 제가 한 코딩과 잘 비교해보며서 잘 따라오길 바랍니다. 그럼 다음 섹션에서 보아요 😶🌫️
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글