2023년 웹디자인 기능사 실전 사이트 : A유형
소개
안녕하세요! 웹스토리보이입니다. 지금까지는 연습을 하였고, 이제부터는 실전 사이트를 만들어보겠습니다. 실제 시험인 것처럼 작업을 하겠습니다. 각 유형에서 한가지를 골라서 작업해보겠습니다. A유형에서는 강원천문대 A-3유형을 작업해보겠습니다. 그럼 시작해볼까요? 🫤
1. 구조 잡기
1-1. 레이아웃 작업
우선 레이아웃을 작업해보겠습니다.
기본 레이아웃을 잡고, 스크립트를 작업할 것입니다.
시험지를 받으면, 전체적인 디자인과 구조를 확인하고, 받은 이미지를 확인합니다.
이미지에 따라 사이트의 주색, 보조색을 설정하면 됩니다.
저희는 A-3 유형 샘플 시험지를 보고 작업해보겠습니다.
폴더를 하나 만들고 css, images, script를 폴더를 만들고 index.html페이지를 만들겠습니다.
시험지를 보면 확안할 수 있습니다.
!를 치고 css와 script를 연동합니다.
스크립트는 제이쿼리를 사용할거라면 라이브러리 소스도 연동해야 합니다.
lang와 타이틀을 수정합니다.
<!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>강원천문대</title>
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<!-- script -->
<script src="script/jquery.min.js"></script>
<script src="script/script.js"></script>
</head>
<body>
</body>
</html>
1-2. 전체 레이아웃 잡기
전체 적인 구조는 header, slider, contents, footer로 구성합니다.
<body>
<div id="wrap">
<header id="header">
</header>
<!-- //header -->
<aside id="slider">
</aside>
<!-- //slider -->
<main id="contents">
</main>
<!-- //main -->
<footer id="footer">
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
CSS도 @charset "UTF-8"; 언어 설정을 해주어야 합니다.
시험지에 명시되어 있으니, 꼭 넣어주셔야 합니다.
리셋과 관련된 속성들도 한번에 넣어주고,
각 섹션의 영역도 잡아주겠습니다.
소스마다 주석을 표시해주고, 가독성을 높여 주겠습니다.
@charset "UTF-8";
/* reset */
* {
margin: 0;
padding: 0;
color: #333;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
/* wrap */
#wrap {
width: 1200px;
margin: 0 auto;
}
/* header */
#header {
width: 100%;
height: 100px;
background-color: #efefef;
}
/* slider */
#slider {
width: 100%;
height: 300px;
background-color: #e3e3e3;
}
/* contents */
#contents {
width: 100%;
height: 200px;
background-color: #d9d9d9;
}
/* footer */
#footer {
width: 100%;
height: 100px;
background-color: #d1d1d1;
}
1-3. 각 섹션 작업하기
각 섹션도 레이아웃을 잡아주겠습니다.
header는 두개의 박스로, contents는 3개의 박스로, footer는 두개의 박스로 설정했습니다.
<body>
<div id="wrap">
<header id="header">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</header>
<!-- //header -->
<aside id="slider">
</aside>
<!-- //slider -->
<main id="contents">
<section class="info"></section>
<section class="banner"></section>
<section class="link"></section>
</main>
<!-- //main -->
<footer id="footer">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>/* wrap */
#wrap {
width: 1200px;
margin: 0 auto;
}
/* header */
#header {
width: 100%;
display: flex;
}
#header .logo {
width: 20%;
height: 100px;
background-color: #efefef;
}
#header .nav {
width: 80%;
height: 100px;
background-color: #e3e3e3;
}
/* slider */
#slider {
width: 100%;
height: 300px;
background-color: #d9d9d9;
}
/* contents */
#contents {
width: 100%;
display: flex;
}
#contents .info {
width: 400px;
height: 200px;
background-color: #d1d1d1;
}
#contents .banner {
width: 400px;
height: 200px;
background-color: #c7c7c7;
}
#contents .link {
width: 400px;
height: 200px;
background-color: #bcbcbc;
}
/* 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;
}
2. 각 섹션 작업하기
2-1. 헤더 작업하기
헤더 영역은 로고와 네비게이션으로 이루어져 있습니다.
메뉴는 ul과 li를 사용하였고,
li 안에 li가 있는 구조이기 때문에 CSS 작업을 할 때 신경써야 합니다.
메뉴 제목은 시험지를 통해 작성합니다.
<header id="header">
<h1 class="logo">
<a href="#">강원천문대</a>
</h1>
<nav class="nav">
<ul>
<li>
<a href="#">강원천문대</a>
<ul class="submenu">
<li><a href="#">천문대소개</a></li>
<li><a href="#">인사말</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</li>
<li>
<a href="#">이용안내</a>
<ul class="submenu">
<li><a href="#">프로그램</a></li>
<li><a href="#">관람시간표</a></li>
<li><a href="#">이달의 별자리</a></li>
</ul>
</li>
<li>
<a href="#">천문대예약</a>
<ul class="submenu">
<li><a href="#">예약하기</a></li>
<li><a href="#">예약확인</a></li>
<li><a href="#">예약취소</a></li>
</ul>
</li>
<li>
<a href="#">커뮤니티</a>
<ul class="submenu">
<li><a href="#">공지사항</a></li>
<li><a href="#">방문후기</a></li>
<li><a href="#">자유게시판</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- //header -->
메뉴 작업시 자식 선택자한테만 선택하기 위해서 <를 사용했습니다.
이렇게 해야 속성이 중복되지 않고, 쉽게 작업할 수 있습니다.
오버 효과를 주기 위해서 a 태그에 속성을 작성하고 인라인 구조이기 때문에 block을 사용했습니다.
/* header */
#header {
width: 100%;
display: flex;
background-color: #0c51a6;
}
#header .logo {
width: 20%;
height: 100px;
}
#header .logo a {
display: inline-block;
color: #fff;
padding: 30px 40px;
}
#header .nav {
width: 80%;
height: 100px;
position: relative;
z-index: 1000;
}
#header .nav > ul {
display: flex;
justify-content: right;
align-items: center;
height: 100%;
}
#header .nav > ul > li {
position: relative;
}
#header .nav > ul > li > a {
color: #fff;
padding: 15px 45px;
background-color: #0a4288;
display: block;
}
#header .nav > ul > li > a:hover {
background-color: #126bd8;
}
#header .nav > ul > li > ul {
position: absolute;
left: 0;
background-color: #fff;
width: 100%;
text-align: center;
display: none;
}
#header .nav > ul > li > ul > li > a {
padding: 10px 20px;
display: block;
}
#header .nav > ul > li > ul > li > a:hover {
background-color: #c0dcff;
}
2-2. 슬라이드 작업하기
이미지는 총 3장이 들어가며, 이미지마다 제목과 설명글을 적었습니다.
이미지 위에 위치하기 위해 position: absolute를 사용했습니다.
여기서 이미지 태그를 사용하면 alt 속성을 꼭 적어주셔야 합니다.
만약 이미지가 나오지 않으면 대신 글씨가 나오는 속성입니다.
웹 표준을 위해서는 꼭 설정해야 합니다.
<aside id="slider">
<div class="sliderWrap">
<div class="slider">
<a href="#"><img src="images/slider01.jpg" alt="천문관학교육관 소개"></a>
<div class="text">
<h2>천문과학교육관 시설 소개</h2>
<p>영상강의실로 놀러오세요!</p>
</div>
</div>
<div class="slider">
<a href="#"><img src="images/slider02.jpg" alt="천문과학교육관 이용 안내"></a>
<div class="text">
<h2>천문과학교육관 이용 안내</h2>
<p>어린이를 위한 천문 과학관!</p>
</div>
</div>
<div class="slider">
<a><img src="images/slider03.jpg" alt="천문관학교육관 소개"></a>
<div class="text">
<h2>별을 보는 고요한 정상</h2>
<p>강원천문대로 놀러오세요!</p>
</div>
</div>
</div>
</aside>
<!-- //slider -->
모든 이미지는 한 곳에 모여 있어야 하기 때문에
position: absolute를 사용하고, 기준점 역할을 해주는 곳에
position: relative를 꼭 적어주셔야 합니다.
글씨는 가운데 오기 위해서 position: absolute를 사용하고,
요소 크기만틈 위로, 왼쪽으로 위치시켜 정가운데로 오게 했습니다.
나머지는 스크립트에서 처리하겠습니다.
/* slider */
#slider {
width: 100%;
height: 300px;
background-color: #d9d9d9;
}
#slider .sliderWrap {
position: relative;
}
#slider .sliderWrap .slider {
position: absolute;
left: 0;
top: 0;
}
#slider .sliderWrap .slider .text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: rgba(0,0,0,0.4);
padding: 20px 30px;
}
#slider .sliderWrap .slider .text h2 {
color: #fff;
font-size: 30px;
margin-bottom: 3px;
}
#slider .sliderWrap .slider .text p {
color: #fff;
font-size: 16px;
}2-3. 게시판/갤러리 작업하기
여기에는 탭 메뉴가 들어가기 때문에 두개를 같이 작업해야 합니다.
이름은 info라고 설정하고,
게시판과 갤러리를 각자 만듭니다.
여기서 section를 사용했기 때문에 제목 태그가 반드시 나와야 합니다.
이것 또한 웹표준을 준수한 방법이고, 그래서 h3태그에 제목 두개를 넣었습니다.
<section class="info">
<h3 class="info-menu">
<a href="#" class="active">공지사항</a> |
<a href="#">갤러리</a>
</h3>
<div class="info-cont">
<div class="notice">
<ul>
<li><a href="#">강원천문대 2023년 휴관일 안내</a><span>2023.05.01</span></li>
<li><a href="#">강원천문대 2023년 온라인 예매 안내</a><span>2023.05.02</span></li>
<li><a href="#">강원천문대 휴관일 및 이벤트 안내</a><span>2023.05.03</span></li>
<li><a href="#">강원천문대 주차장 이용 및 숙박 안내</a><span>2023.05.04</span></li>
</ul>
</div>
<div class="gallery">
<ul>
<li><a href="#"><img src="images/gallery01.jpg" alt="독일 천문대"></a></li>
<li><a href="#"><img src="images/gallery02.jpg" alt="미국 천문대"></a></li>
<li><a href="#"><img src="images/gallery03.jpg" alt="영국 천문대"></a></li>
</ul>
</div>
</div>
</section>
<!-- //info -->
탭 메뉴를 선택했을 때 선택한 느낌을 주기 위해 active 클래스를 추가했습니다.
여기에는 언더라인을 주었고, 갤러리 부분은 우선 안보이도록 설정했습니다.
/* contents : info */
#contents .info {
width: 400px;
height: 200px;
background-color: #e5f1ff;
padding: 20px;
box-sizing: border-box;
}
#contents .info .info-menu {
margin-bottom: 10px;
}
#contents .info .info-menu a {
font-size: 24px;
}
#contents .info .info-menu a.active {
text-decoration: underline;
}
#contents .info .info-cont .notice {
display: none;
}
#contents .info .info-cont .notice li {
display: flex;
}
#contents .info .info-cont .notice li a {
width: 75%;
font-size: 16px;
line-height: 1.8;
}
#contents .info .info-cont .notice li a:hover {
text-decoration: underline;
}
#contents .info .info-cont .notice li span {
width: 25%;
font-size: 16px;
line-height: 1.8;
text-align: right;
}
#contents .info .info-cont .gallery ul {
display: flex;
justify-content: space-between;
}
#contents .info .info-cont .gallery ul li a {
border: 2px solid transparent;
display: block;
}
#contents .info .info-cont .gallery ul li a:hover {
border-color: #0a4288;
}2-4. 배너 작업하기
배너 영역에는 백그라운드로 이미지를 넣고 링크를 걸어주면 끝입니다. 버튼을 오버하면 살짝 배경만 변경되도록 처리했습니다.
<section class="banner">
<h3>강원천문대 온라인 예매하기</h3>
<a href="#">예매하기</a>
</section>
<!-- //banner -->/* contents : banner */
#contents .banner {
width: 400px;
height: 200px;
background-image: url(../images/banner.jpg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#contents .banner h3 {
color: #fff;
font-size: 26px;
}
#contents .banner a {
background-color: rgba(0,0,0,0.4);
padding: 10px 20px;
color: #fff;
border-radius: 50px;
margin-top: 10px;
}
#contents .banner a:hover {
background-color: rgba(0,0,0,1);
}2-5. 링크 작업하기
링크부분도 배너와 같이 처리했습니다. 방법은 동일합니다. 디자인만 살짝 변경했습니다.
<section class="link">
<h3>이달의 별자리 구경하기</h3>
<a href="#">바로가기</a>
</section>
<!-- //link -->/* contents : link */
#contents .link {
width: 400px;
height: 200px;
background-image: url(../images/link.jpg);
}
#contents .link h3 {
color: #fff;
padding: 20px;
}
#contents .link a {
width: 100px;
height: 100px;
background-color: rgba(1, 52, 96, 0.8);
display: block;
border-radius: 50%;
text-align: center;
color: #fff;
line-height: 100px;
margin: 0 auto;
}
#contents .link a:hover {
background-color: rgba(1, 52, 96, 1);
}2-6. 푸터 작업하기
제목 부분은 음영으로 처리하기 위해 폰트 색을 변경했지만, 실제 시험에서는 포토샵으로 작업을 해야 합니다. 참고하세요! 하단 메뉴와 카피라이터를 추가하였습니다. 이제 코딩은 마무리 되었습니다. 마지막으로 스크립트를 작업하겠습니다.
<footer id="footer">
<div class="footer1">
<h4>강원천문대</h4>
</div>
<div class="footer2">
<div class="footer2-1">
<ul>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">저작권보호정책</a></li>
<li><a href="#">이메인무단수집거부</a></li>
<li><a href="#">CCTV설치 및 운영지침</a></li>
</ul>
</div>
<div class="footer2-2">
COPYRIGHT © 2023, All Rightes Reseved
</div>
</div>
</footer>
<!-- //footer -->/* footer */
#footer {
width: 100%;
display: flex;
background-color: #e7e7e7;
}
#footer .footer1 {
width: 20%;
height: 100px;
}
#footer .footer1 h4 {
font-size: 30px;
color: #7f7f7f;
padding: 32px 30px;
}
#footer .footer2 {
width: 80%;
}
#footer .footer2 .footer2-1 {
width: 100%;
height: 50px;
text-align: center;
}
#footer .footer2 .footer2-1 ul {
padding-top: 24px;
}
#footer .footer2 .footer2-1 li {
display: inline-block;
border-right: 1px solid #333;
}
#footer .footer2 .footer2-1 li:last-child {
border: 0;
}
#footer .footer2 .footer2-1 li a {
padding: 10px;
}
#footer .footer2 .footer2-1 li a:hover {
text-decoration: underline;
}
#footer .footer2 .footer2-2 {
width: 100%;
height: 50px;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
}2-7. 팝업 작업하기
팝업은 평소에 숨겨놓고 버튼을 크릭하면 나오는 방식입니다.
팝업 소스는 wrap 제일 마지막에 넣을 겁니다.
기준점인 position: relative도 넣어줍니다.
이렇게 해야 사이트 영역 가운데에 나옵니다.
클릭 버튼은 게시판 첫 번째 글에 설정했습니다.
<div class="notice">
<ul>
<li><a href="#" class="popup-btn">강원천문대 2023년 휴관일 안내</a><span>2023.05.01</span></li>
<li><a href="#">강원천문대 2023년 온라인 예매 안내</a><span>2023.05.02</span></li>
<li><a href="#">강원천문대 휴관일 및 이벤트 안내</a><span>2023.05.03</span></li>
<li><a href="#">강원천문대 주차장 이용 및 숙박 안내</a><span>2023.05.04</span></li>
</ul>
</div>
<div class="popup-view">
<h3>강원천문대 공지사항</h3>
<p>
2023년 하반기 천체 관측 프로그램 참가 신청 안내
안녕하세요. 강원천문대입니다. 2023년 하반기 천체 관측 프로그램에 참가하실 분들을 모집하고 있습니다.
관심 있는 분들은 많은 연락바랍니다.
</p>
<a href="#" class="popup-close">닫기</a>
</div>
<!-- //popup -->
#wrap {
position: relative;
width: 1200px;
margin: 0 auto;
}
/* popup */
.popup-view {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: #8ec1ff;
border: 4px solid #0a4288;
padding: 20px;
display: none;
}
.popup-view h3 {
font-size: 24px;
margin-bottom: 15px;
border-bottom: 2px solid #0a4288;
color: #0a4288;
padding-bottom: 5px;
}
.popup-close {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
background-color: #0a4288;
color: #fff;
padding: 8px 20px;
}
3. 스크립트 작업하기
스크립트 작업할 때에는 가장 어려운 이미지 슬라이드부터 작업하는게 좋습니다.
열심히 공부했지만 막상 시험장 가서 막히는 경우가 많습니다.
이미지 슬라이드를 못하면 무조건 탈락이기 때문에 이것부터 해결하는게 가장 좋습니다.
스크립트 파일을 외부 파일로 작업했기 때문에 설정을 잘 하셔야 합니다.
스크립트의 위치는 상단이든 하단이든 어떤 곳에 위치해도 크게 상관은 없습니다.
하지만 상단에 많이 사용하기 때문에 저희도 상단에 넣겠습니다.
제이쿼를 사용한다면 라이브러리 파일을 연동해야 하고, 그 밑에 우리가 작업한 소스를 연동하면 됩니다.
대신 주의할 점은 순서가 바뀌면 안되고요, script.js 파일 안에는
$(function(){ });가 설정되어 있어야 합니다.
그래야 문서가 다 로딩하고, 제이쿼리 리이브러리 파일을 읽고, 저의가 작성한 파일을 읽게 됩니다.
이 순서가 맞아야 작동하게 됩니다.
<!-- script -->
<script src="script/jquery.min.js"></script>
<script src="script/script.js"></script>
3-1. 이미지 슬라이드 작업하기
겹쳐 있는 3장의 이미지를 안보이게 설정 후 첫 번째 이미지만 보이게 합니다.
현재 이미지는 0이라고 설정 후
3초에 한번씩 실행문을 작동시키기 위해 setInterval을 설정합니다.
첫번째 이미지를 감추고, 두번째 이미지를 보이게 설정합니다.
두번째 이미지 값을 현재 이미지에 저장을 하고, 무한으로 반복하게 설정합니다.
nextIndex 값은 1 2 0 1 2 0 1 2 0 이렇게 나오게 됩니다.
여기서 3은 이미지 총 갯수를 의미하고, 이렇게 나머지 값을 구하면 값은 무한 반복하게 됩니다.
$(function(){
//슬라이드 : 페이드 효과
let currentIndex = 0; //현재 이미지 설정
$(".slider").hide().first().show(); //모든 이미지 숨기고 첫번째 이미지 나타남
setInterval(function(){ //3초에 한번씩 실행
let nextIndex = (currentIndex + 1) % 3; //다음 이미지 설정
$(".slider").eq(currentIndex).fadeOut(1200); //첫 번재 이미지 안보이게 함
$(".slider").eq(nextIndex).fadeIn(1200); //두번째 이미지 보이게 함
currentIndex = nextIndex; //두번재 값을 현재 인덱스에 저장
}, 3000);
});3-2. 메뉴 작업하기
이번 메뉴는 하나씩 나오는 메뉴입니다.
어렵지 않으니 하나식 따라하시면 됩니다.
메뉴 선택자 $(".nav > ul > li")를 선택후 마우스 오버 효과를 설정합니다.
해당 메뉴에 자식 메뉴 submenu를 선택하기 위해 find() 메서드를 사용하여, 보여주도록 설정했습니다.
여기에서 stop() 메서드는 애니메이션이 무한으로 작동하는 것을 막기 위함이고,
slideDown()는 천천히 슬라이드 식으로 보여주기 위해서 설정했습니다.
마우스 아웃했을 때에도 똑같이 설정하면 끝납니다.
마지막으로 버그가 하나 발생하는데 메뉴가 슬라이드 영역에 가려지는 현상이 생깁니다.
이 부분은 아래처럼 CSS를 설정해서 z-index 값을 설정하면 해결됩니다.
// 메뉴 : 하나씩 나오기
$(".nav > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown(200);
});
$(".nav > ul > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp(200);
});#header .nav {
position: relative;
z-index: 1000;
}3-3. 탭메뉴 작업하기
탭 메뉴를 작업해보겠습니다. 우선 선택자를 변수에 넣어서 처리하겠습니다.
탭 컨텐츠를 숨기고 첫 번째 컨텐츠만 보이도록 설정했습니다.
버튼을 클릭하면 클릭한 버튼의 번호를 가져오도록 index를 설정했습니다.
그리고 그 번에 맞는 컨텐츠를 보이도록 설정하면 됩니다.
우선 버튼의 활성화 비활성화를 표현하기 위해
클릭한 버튼 $(this)에 클래스를 추가하고 형제 선택자 siblings()를 선택하고 클래스를 다 지웁니다.
그리고 콘텐츠 번호 숫서에 맞는 콘텐츠를 보여주고 나머지를 숨겨주면 탭 메뉴는 완성이 됩니다.
// 탭 메뉴
const tabBtn = $(".info-menu > a"); //탭 버튼 설정
const tabCont = $(".info-cont > div"); //탭 콘텐츠 설정
tabCont.hide().eq(0).show(); //탭 콘텐츠를 숨기고 첫 번째 콘텐츠만 보여줌
tabBtn.on("click", function(){ //버튼을 클릭하면
const index = $(this).index(); //클릭한 버튼의 번호를 저장
$(this).addClass("active").siblings().removeClass("active"); //클릭한 버튼에 클래스를 추가하고 나머지는 제거함
tabCont.eq(index).show().siblings().hide(); //클릭한 버튼 순서에 맞는 콘텐츠에 클래스를 추가하고 나머지는 숨김
});3-4. 팝업 작업하기
팝업 스크립트는 비교적 간단합니다. 버튼을 클릭하면 보여주고, 닫기 버튼을 클릭하면 숨기면 됩니다.
// 팝업
$(".popup-btn").click(function(){ //팝업 버튼 클릭
$(".popup-view").show(); //팝업 나타나기
});
$(".popup-close").click(function(){ //팝업 닫기 버튼 클릭
$(".popup-view").hide (); //팝업 숨기기
});4. 마무리
이렇게 하여 A유형을 마무리 했습니다. 만만치 않죠? 기본 HTML/CSS를 작업하여, 스크립트 작업까지 완수했습니다. 시험은 이정도의 레벨로 출제되지만, 이번에 업데이트된 D유형과 E유형은 이것보다 신경써야 할 것이 조금 더 있습니다. 하지만 이정도 수준에서 크게 벗어나지 않을거라고 생각이 듭니다. 작업하시다가 궁금한 점이나 이상한 점이 있으면 댓글 달아주세요! 감사합니다. 수고하셨습니다. 🫣
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글