Tutorial/webd
2023년 웹디자인 기능사 실전 사이트 : E유형
소개
안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사에서 가장 어려운 부분인 E유형입니다. 반응형도 신경써야 하고 스크립트까지 접목시켜야 완성할 수 있습니다. 그럼 마지막까지 화이팅해봅시다.
1. 구조 잡기
1-1. 준비하기
우선 폴더를 먼저 셋팅하겠습니다.
폴더를 만들고, 그 안에 css, images, script를 폴더를 만들고 index.html페이지를 만들겠습니다.
!를 쓰고 tab 버튼을 누르고, 언어와 타이들을 수정합니다.
css와 script를 연동합니다.
<!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. 전체 레이아웃 잡기
전체적인 레이아웃은 메인과 푸터로 잡았습니다. 메인에는 헤더와 콘텐츠, 슬라이드로 구성되어 있습니다.
<body>
<div id="wrap">
<main id="main">
<header id="header">
</header>
<!-- //header -->
<section id="contents">
</section>
<!-- //contents -->
<article id="slider">
</article>
<!-- //slider -->
</main>
<!-- //main -->
<footer id="footer">
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
css도 언어설정을 해주어야 합니다.
@charset "UTF-8"를 설정하고 기본 색상은 #333으로 설정합니다.
@charset "UTF-8";=
/* reset */
* {
margin: 0;
padding: 0;
color: #333;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
img {
width: 100%;
display: block;
}
/* wrap */
#wrap {
width: 100%;
}
/* main */
#main {
width: 100%;
height: calc(100vh - 120px);
display: flex;
}
/* header */
#header {
width: 200px;
height: 100%;
background-color: #efefef;
}
/* contents */
#contents {
width: 400px;
height: 100%;
background-color: #e3e3e3;
}
/* slider */
#slider {
width: calc(100% - 600px);
height: 100%;
background-color: #d9d9d9;
}
/* footer */
#footer {
width: 100%;
height: 120px;
background-color: #d1d1d1;
}
1-3. 세부적인 레이아웃 작업하기
헤더 영역은 로고와 네비로 구성되어 있고, 콘텐츠 영역은 4개의 섹션으로 구성되어 있습니다. 푸터는 3개의 영역으로 나누고 가운데 영역은 두개의 영역으로 분리됩니다.
<body>
<div id="wrap">
<main id="main">
<header id="header">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</header>
<!-- //header -->
<section id="contents">
<article class="banner"></article>
<article class="notice"></article>
<article class="gallery"></article>
<article class="link"></article>
</section>
<!-- //contents -->
<article id="slider">
</article>
<!-- //slider -->
</main>
<!-- //main -->
<footer id="footer">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
<div class="footer3"></div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>/* wrap */
#wrap {
width: 100%;
}
/* main */
#main {
width: 100%;
height: calc(100vh - 120px);
display: flex;
}
/* header */
#header {
width: 200px;
}
#header .logo {
width: 100%;
height: 10%;
background-color: #efefef;
}
#header .nav {
width: 100%;
height: 90%;
background-color: #e3e3e3;
}
/* contents */
#contents {
width: 400px;
}
#contents .banner {
width: 100%;
height: 15%;
background-color: #d9d9d9;
}
#contents .notice {
width: 100%;
height: 35%;
background-color: #d1d1d1;
}
#contents .gallery {
width: 100%;
height: 35%;
background-color: #c7c7c7;
}
#contents .link {
width: 100%;
height: 15%;
background-color: #bcbcbc;
}
/* slider */
#slider {
width: calc(100% - 600px);
height: 100%;
background-color: #b1b1b1;
}
/* footer */
#footer {
width: 100%;
display: flex;
flex-wrap: wrap;
}
#footer .footer1 {
width: 200px;
height: 120px;
background-color: #a3a3a3;
}
#footer .footer2 {
width: calc(100% - 400px);
}
#footer .footer2 .footer2-1 {
width: 100%;
height: 60px;
background-color: #9d9d9d;
}
#footer .footer2 .footer2-2 {
width: 100%;
height: 60px;
background-color: #929292;
}
#footer .footer3 {
width: 200px;
height: 120px;
background-color: #838383;
}2. 각 섹션 작업하기
2-1. 헤더 영역 작업하기
헤더 영역은 로고와 메뉴로 구성되어 있습니다.
<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>
<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>
<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>
<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>
<li><a href="#">자료마당</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- //header -->
/* header */
#header {
width: 200px;
height: 100%;
background-color: #ffe5e5;
}
#header .logo {
width: 100%;
text-align: center;
}
#header .logo a {
padding: 24px;
display: block;
color: #b40000;
}
#header .nav {
width: 100%;
height: 90%;
position: relative;
z-index: 1000;
}
#header .nav > ul > li {
text-align: center;
position: relative;
}
#header .nav > ul > li > a {
padding: 10px;
display: inline-block;
background-color: #ff6d6d;
width: 100%;
box-sizing: border-box;
color: #fff;
}
#header .nav > ul > li > a:hover {
background-color: #ff8888;
}
#header .nav > ul > li > ul {
position: absolute;
right: -200px;
top: 0;
width: 200px;
display: none;
}
#header .nav > ul > li > ul > li a {
padding: 10px;
display: inline-block;
background-color: #ff6d6d;
width: 100%;
color: #fff;
box-sizing: border-box;
}
#header .nav > ul > li > ul > li a:hover {
background-color: #ffa9a9;
}
2-2. 콘텐츠 배너 작업하기
콘텐츠 영역의 배너입니다. 배너 이미지는 백그라운드로 넣고 버튼을 작업하였습니다.
<article class="banner">
<h3>기차 여행</h3>
<a href="#">떠나기!</a>
</article>
<!-- //banner -->/* contents : banner */
#contents .banner {
width: 100%;
height: 15%;
background: url(../images/banner.jpg) no-repeat center;
display: flex;
align-items: center;
justify-content: center;
}
#contents .banner h3 {
color: #ffefef;
font-size: 24px;
}
#contents .banner a {
color: #fff;
background-color: #ff6d6dc1;
padding: 10px 20px;
border-radius: 40px;
margin-left: 10px;
}
#contents .banner a:hover {
background-color: #ff6d6d;
}2-3. 콘텐츠 게시판 작업하기
목록과 더보기가 있는 게시판 유형입니다.
<article class="notice">
<h3>철길 마을 공지사항</h3>
<ul>
<li><a href="#">철길 마을 축제 일정 변경 안내</a><span>2023.03.04</span></li>
<li><a href="#">철길 마을 도서관 임시 폐쇄 안내</a><span>2023.05.04</span></li>
<li><a href="#">철길 마을 자원봉사자 모집 공고</a><span>2023.04.04</span></li>
<li><a href="#">철길 마을 청소 캠페인 안내</a><span>2023.05.04</span></li>
<li><a href="#">철길 마을의 최신 소식</a><span>2023.04.04</span></li>
</ul>
<a href="#" class="more">더보기+</a>
</article>
<!-- //notice -->/* contents : notice */
#contents .notice {
width: 100%;
height: 35%;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
#contents .notice h3 {
background-color: #ff6d6d;
color: #fff;
padding: 4px 10px;
margin-bottom: 10px;
}
#contents .notice li {
display: flex;
position: relative;
padding-left: 10px;
line-height: 1.6;
}
#contents .notice li::before {
content: '';
width: 6px;
height: 6px;
background-color: #ff6d6d;
position: absolute;
left: 0;
top: 8px;
border-radius: 50%;
}
#contents .notice li a {
width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#contents .notice li a:hover {
text-decoration: underline;
}
#contents .notice li span {
width: 30%;
text-align: right;
}
#contents .notice .more {
position: absolute;
right: 26px;
top: 26px;
color: #fff;
}2-4. 콘텐츠 갤러리 작업하기
갤러리 형태의 유형입니다. 이미지는 백그라운드로 들어가고 마우스 오버 효과를 추가하였습니다.
<article class="gallery">
<h3>철길 마을 갤러리</h3>
<ul>
<li><a href="#">최고의 뷰</a></li>
<li><a href="#">위험한 뷰</a></li>
<li><a href="#">아름다운 뷰</a></li>
</ul>
<a href="#" class="more">더보기+</a>
</article>
<!-- //gallery -->/* contents : gallery */
#contents .gallery {
width: 100%;
height: 35%;
background-color: #ffecec;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
#contents .gallery h3 {
background-color: #ff6d6d;
color: #fff;
padding: 4px 10px;
margin-bottom: 10px;
}
#contents .gallery ul {
display: flex;
justify-content: space-between;
}
#contents .gallery li {
width: 110px;
height: 150px;
background-size: cover;
}
#contents .gallery li:nth-child(1){
background-image: url(../images/gallery01.jpg);
}
#contents .gallery li:nth-child(2){
background-image: url(../images/gallery02.jpg);
}
#contents .gallery li:nth-child(3){
background-image: url(../images/gallery03.jpg);
}
#contents .gallery li a {
display: block;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
#contents .gallery li a:hover {
background-color: rgba(0,0,0,0.1);
}
#contents .gallery .more {
position: absolute;
right: 26px;
top: 26px;
color: #fff;
}2-5. 콘텐츠 링크 작업하기
링크 영역은 4개의 버튼을 만들었습니다.
<article class="link">
<h3>도움</h3>
<ul>
<li>
<a href="#">
<img src="images/icon01.png" alt="사진">
<span>사진찍기</span>
</a>
</li>
<li>
<a href="#">
<img src="images/icon02.png" alt="사진">
<span>분실물</span>
</a>
</li>
<li>
<a href="#">
<img src="images/icon03.png" alt="사진">
<span>예약하기</span>
</a>
</li>
<li>
<a href="#" class="popup-btn">
<img src="images/icon04.png" alt="사진">
<span>전화하기</span>
</a>
</li>
</ul>
</article>
<!-- //link -->/* contents : link */
#contents .link {
width: 100%;
height: 15%;
overflow: hidden;
}
#contents .link h3 {
width: 1px;
height: 1px;
overflow: hidden;
text-indent: -9999px;
}
#contents .link ul {
display: flex;
padding: 0 10px;
}
#contents .link li {
width: 25%;
padding: 5%;
box-sizing: border-box;
text-align: center;
}
#contents .link li:hover a span {
color: #ff6d6d;
}2-6. 슬라이드 작업하기
슬라이드 영역은 3장의 이미지로 구성되어 있습니다.
<article id="slider">
<div class="sliderWrap">
<div class="slider s1">
<div class="text">
<h3>추억을 소환하는 철길 마을</h3>
<p>철길마을</p>
</div>
</div>
<div class="slider s2">
<div class="text">
<h3>추억을 소환하는 철길 마을</h3>
<p>철길마을</p>
</div>
</div>
<div class="slider s3">
<div class="text">
<h3>추억을 소환하는 철길 마을</h3>
<p>철길마을</p>
</div>
</div>
</div>
</article>
<!-- //slider -->/* slider */
#silder {
width: calc(100% - 600px);
height: 100%;
overflow: hidden;
}
#silder .sliderWrap {
width: 400%;
height: 100%;
display: flex;
}
#silder .sliderWrap .slider {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
#silder .sliderWrap .slider .text {
background-color: #ff6d6da3;
width: 300px;
height: 300px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 50%;
}
#silder .sliderWrap .slider .text h3 {
color: #fff;
font-size: 20px;
}
#silder .sliderWrap .slider .text p {
color: #fff;
margin-top: 5px;
}
#silder .sliderWrap .slider.s1 {
background-image: url(../images/slider01.jpg);
}
#silder .sliderWrap .slider.s2 {
background-image: url(../images/slider02.jpg);
}
#silder .sliderWrap .slider.s3 {
background-image: url(../images/slider03.jpg);
}2-7. 푸터 작업하기
푸터 영역은 세개의 영역으로 작업합니다.
<footer id="footer">s
<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="#">분실물 확인하기</a></li>
</ul>
</div>
<div class="footer2-2">
15073 전라북도 군산시 군산로 237 (정왕동) 철길 마을 COPYRIGHT(C) ALL RIGHTS RESERVED.
</div>
</div>
<div class="footer3">
<select name="family" id="family">
<option value="철길마을1">철길마을1</option>
<option value="철길마을2">철길마을2</option>
<option value="철길마을3">철길마을3</option>
</select>
</div>
</footer>
<!-- //footer -->/* footer */
#footer {
width: 100%;
display: flex;
background-color: #efefef;
}
#footer .footer1 {
width: 200px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
#footer .footer1 h4 {
font-size: 24px;
color: #979797;
}
#footer .footer2 {
width: calc(100% - 400px);
}
#footer .footer2 .footer2-1 {
width: 100%;
height: 60px;
text-align: center;
}
#footer .footer2 .footer2-1 ul {
padding-top: 10px;
}
#footer .footer2 .footer2-1 li {
display: inline-block;
}
#footer .footer2 .footer2-1 li::after {
content: '|';
}
#footer .footer2 .footer2-1 li:last-child:after {
content: '';
}
#footer .footer2 .footer2-1 li a {
padding: 10px;
display: inline-block;
}
#footer .footer2 .footer2-1 li a:hover {
text-decoration: underline;
}
#footer .footer2 .footer2-2 {
width: 100%;
height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#footer .footer3 {
width: 200px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
#footer .footer3 select {
width: 90%;
height: 30px;
}2-8. 팝업 작업하기
공지사항 첫번째 글에 popup-btn클래스를 추가하고
다음과 같이 팝업을 만들어서 숨겼놓겠습니다.
<div class="popup-view">
<h3>철길마을 공지사항</h3>
<p>
안녕하세요, 철길마을 주민 여러분!
철길마을 축제 개최 안내드립니다
참고 하시고 많은 참여 바랍니다.
감사합니다.
</p>
<a href="#" class="popup-close">닫기</a>
</div>
<!-- //popup -->
/* popup */
.popup-view {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: #ffcbcb;
border: 4px solid #ff6d6d;
padding: 20px;
display: none;
}
.popup-view h3 {
font-size: 24px;
margin-bottom: 15px;
border-bottom: 2px solid #ff6d6d;
color: #ff6d6d;
}
.popup-close {
display: inline-block;
padding: 8px 20px;
background-color: #ff6d6d;
color: #fff;
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
}
3. 스크립트 작업하기
3-1. 이미지 슬라이드 작업하기
이미지 슬라이드를 작업하겠습니다.
반응형으로 작업해야 하기 때문에 세부적인 부분은 CSS를 통해서 설정해야 합니다.
이미지를 복사하여 추가하는 형태이므로 전체 가로 값은 400%입니다.
이부분을 고쳐야 오류가 없습니다.
$(function(){
// 이미지 슬라이드
let currentIndex = 0;
$(".sliderWrap").append($(".slider").first().clone(true));
setInterval(function(){
currentIndex++;
$(".sliderWrap").animate({marginLeft: -100 * currentIndex+"%"}, 600);
if(currentIndex == 3){
setTimeout(function(){
$(".sliderWrap").animate({marginLeft: 0}, 0);
currentIndex = 0;
}, 600);
}
}, 3000);
});#slider .sliderWrap {
width: 400%;
}3-2. 메뉴 작업하기
메뉴는 서브메뉴가 오른쪽으로 나오는 구조입니다. 이미 CSS는 처리가 되어 있기 때문에 해당되는 메뉴에 오버했을 때 해당 자식 메뉴가 나오는 구조입니다.
// 메뉴
$(".nav > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown();
});
$(".nav > ul > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp();
});3-3. 팝업 작업하기
마지막 스크립트는 팝업입니다. 버튼을 클릭하면 숨겨놨던 팝업을 보여주고, 버튼을 클릭하면 다시 숨기는 구조입니다.
$(".popup-btn").click(function(){
$(".popup-view").show();
});
$(".popup-close").click(function(){
$(".popup-view").hide ();
});4. 마무리
제일 어렵게 느껴졌던 E유형도 마무리가 되었습니다. 지금까지 5개에 사이트를 만들어 봤습니다. 이 정도 연습했다면 시험을 충분히 합격할 수 있다고 생각합니다. 기타 궁금한 사항이나 질문이 있으면 댓글 부탁드립니다. 그동안 정말 수고하셨습니다. 감사합니다. 🫤🤕🤬🥺😬👻
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글