반응형
웹디자인 기능사 실기 연습 (슬라이드, 메뉴, 갤러리, 제이쿼리)
웹디자인 기능사 실기는 웹디자인 기술과 역량을 평가하는 시험입니다. 일반적으로 다음과 같은 주요 내용을 다룹니다.
1. HTML 및 CSS: 웹 페이지의 구조와 스타일링에 대한 이해와 적용력을 평가합니다. HTML 태그와 CSS 속성을 사용하여 웹 페이지를 만들고 디자인하는 기술이 필요합니다.
2. 웹 그래픽 디자인: Adobe Photoshop, Illustrator 등의 그래픽 편집 도구를 사용하여 웹 그래픽을 디자인하는 능력을 평가합니다. 배경 이미지, 아이콘, 버튼 등을 디자인하고 편집하는 기술이 중요합니다.
3. 웹 접근성: 웹 콘텐츠에 대한 접근성을 고려하는 능력을 평가합니다. 장애인이나 저시력자 등 모든 사용자가 웹 페이지에 접근하고 이용할 수 있도록 구성하는 기술을 이해해야 합니다.
4. 반응형 웹 디자인: 다양한 기기와 화면 크기에 대응하는 반응형 웹 페이지를 제작하는 능력을 평가합니다. CSS 미디어 쿼리를 사용하여 레이아웃 및 디자인을 조정하는 기술이 필요합니다.
5. 웹사이트 제작: 전체적인 웹사이트를 구성하고, 페이지 간의 네비게이션과 상호작용을 구현하는 능력을 평가합니다. 주어진 요구사항에 따라 웹사이트를 제작하고 기능을 추가하는 기술이 필요합니다.
실기 시험에서는 주어진 과제에 대한 해결책을 구현하고 결과물을 제작하는 능력을 평가합니다. 실습 시간이 주어지며, 주어진 조건에 맞춰 웹 페이지를 디자인하고 개발해야 합니다. 주의 깊게 요구사항을 분석하고 문제를 해결할 수 있는 능력이 필요합니다.
VSCode
<!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>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script/script.js"></script>
</head>
<body>
<div id="header">
<div class="header__left">
<h1 class="logo"><a href="#">강원천문대</a></h1>
</div>
<div class="header__right">
<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>
</div>
</div>
<div 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 href="#"><img src="images/slider03.jpg" alt="천문과학교육관 소개"></a>
<div class="text">
<h2>별을 보는 고요한 정상</h2>
<p>강원천문대로 놀러오세요!</p>
</div>
</div>
</div>
</div>
<div id="contents">
<section class="info">
<h3 class="info-menu">
<a href="#" class="active">공지사항 |</a>
<a href="#">갤러리</a>
</h3>
<div class="info-cont">
<ul class="notice">
<li><a href="#">강원천문대 2023년 휴관일 안내</a><span>2023.05.11</span></li>
<li><a href="#">강원천문대 2023년 온라인 예매</a><span>2023.05.10</span></li>
<li><a href="#">강원천문대 휴관일 및 이벤트 안내</a><span>2023.05.09</span></li>
<li><a href="#">강원천문대 휴관일 안내</a><span>2023.05.08</span></li>
</ul>
<ul class="gallery">
<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>
</section>
<!-- //info -->
<section class="banner">
<h3>강원천문대 온라인 예매하기</h3>
<a href="#">예매하기</a>
</section>
<!-- //banner -->
<article class="link">
<h3>이달의 별자리 구경하기</h3>
<a href="#">바로가기</a>
</article>
<!-- link -->
</div>
<div 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 rights reserved
</div>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
* {
margin: 0;
padding: 0;
color: #333333;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #333333;
}
img {
vertical-align: top;
}
/* header */
#header {
width: 1200px;
display: flex;
background-color: #0c51a6;
position: relative;
z-index: 1000;
}
.header__left {
width: 20%;
height: 100px;
}
.header__left a {
display: inline-block;
padding: 30px 40px;
color: #fff;
}
.header__right {
width: 80%;
height: 100px;
text-align: right;
}
.header__right > ul {
margin-top: 24px;
}
.header__right > ul > li {
display: inline-block;
position: relative;
}
.header__right > ul > li > a {
padding: 15px 45px;
background-color: #052b5a;
color: #fff;
display: block;
}
.header__right > ul > li > a:hover {
background-color: #021b3a;
}
.header__right > ul > li > ul {
text-align: center;
background-color: #fff;
display: none;
position: absolute;
top: 48px;
left: 0px;
width: 100%;
}
.header__right > ul > li > ul > li > a {
padding: 10px 20px;
display: block;
}
.header__right > ul > li > ul > li > a:hover {
background-color: #6189b9;
}
/* slider */
#slider {
width: 1200px;
height: 300px;
background-color: #bd9494;
}
#slider .sliderWrap {
position: relative;
}
#slider .sliderWrap .slider {
position: absolute;
left: 0;
top: 0;
}
#slider .sliderWrap .slider img {
vertical-align: top;
}
#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;
}
#slider .sliderWrap .slider .text p {
color: #fff;
}
/* banner */
#contents {
width: 1200px;
height: 200px;
display: flex;
}
#contents .info {
width: 400px;
height: 200px;
box-sizing: border-box;
background-color: #78adcc;
padding: 20px;
}
#contents .info h3 {
margin-bottom: 10px;
font-size: 22px;
}
#contents .info h3 a.active {
text-decoration: underline;
}
#contents .info .notice li {
display: flex;
}
#contents .info .notice li a {
width: 75%;
font-size: 16px;
line-height: 1.8;
}
#contents .info .notice li a:hover {
text-decoration: underline;
}
#contents .info .notice li span {
width: 25%;
text-align: right;
}
#contents .info .gallery {
display: flex;
}
#contents .info .gallery li {
margin-right: 17px;
padding-top: 3px;
}
.banner {
width: 33.3333%;
height: 200px;
background-color: #3f8aa1;
background-image: url(../images/banner.jpg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.banner h3 {
color: #fff;
}
.banner a {
background-color: rgba(255,255,255,0.4);
padding: 10px 20px;
border-radius: 50px;
margin-top: 10px;
}
.banner a:hover {
background-color: rgba(40, 89, 129, 0.4);
}
.link {
width: 33.3333%;
height: 200px;
background-image: url(../images/link.jpg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.link h3 {
color: #fff;
padding: 10px;
}
.link a {
width: 100px;
height: 100px;
background-color: rgba(40, 89, 129, 0.4);
display: block;
border-radius: 50%;
text-align: center;
line-height: 100px;
transition: all 0.3s;
}
.link a:hover {
background-color: rgba(40, 89, 129, 0.7);
}
/* footer */
#footer {
width: 1200px;
display: flex;
background-color: #0c51a6;
}
.footer1 {
width: 20%;
height: 100px;
}
.footer1 h4 {
font-size: 30px;
color: #fff;
padding: 32px 40px;
}
.footer2 {
width: 80%;
height: 100px;
}
.footer2-1 {
width: 100%;
height: 50px;
text-align: center;
}
.footer2-1 ul {
padding-top: 15px;
}
.footer2-1 li {
display: inline-block;
border-right: 1px solid #333;
}
.footer2-1 li:last-child {
border: 0;
}
.footer2-1 li a {
padding: 10px;
color: #fff;
}
.footer2-1 li a:hover {
text-decoration: underline;
}
.footer2-2 {
width: 100%;
height: 50px;
/* background-color: #a04b8b; */
text-align: center;
padding-top: 15px;
box-sizing: border-box;
color: #fff;
}
script
$(function(){
// 메뉴 : 단일
$(".header__right > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown(200);
});
$(".header__right > ul > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp(200);
});
// 슬라이드 : 페이드 효과
let currentIndex = 0;
const $slider = $(".slider");
$slider.hide().first().show(); //모든 이미지 숨기고 첫번째 이미지 등장
setInterval(function(){
let nextIndex = (currentIndex + 1) % $slider.length;
$slider.eq(currentIndex).fadeOut(300);
$slider.eq(nextIndex).fadeIn(300);
currentIndex = nextIndex;
}, 3000)
// 탭 메뉴
const tabBtn = $(".info-menu > a");
const tabCont = $(".info-cont > ul");
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();
});
});이 코드는 jQuery를 사용하여 웹 페이지의 메뉴, 슬라이드 효과, 탭 메뉴를 구현하는 JavaScript 코드입니다.
1. 메뉴: 단일
- $(".header__right > ul > li").mouseover(function(){...});: 헤더 오른쪽에 있는 메뉴의 각 항목에 마우스를 올렸을 때, 해당 항목의 하위 메뉴를 슬라이드 다운으로 보여줍니다.
- $(".header__right > ul > li").mouseout(function(){...});: 마우스가 메뉴 항목에서 벗어났을 때, 하위 메뉴를 슬라이드 업으로 숨깁니다.
2.슬라이드: 페이드 효과
- let currentIndex = 0;: 현재 이미지의 인덱스를 나타내는 변수입니다.
- const $slider = $(".slider");: 슬라이드 이미지를 담고 있는 요소를 선택합니다.
- $slider.hide().first().show();: 모든 슬라이드 이미지를 숨기고, 첫 번째 이미지를 보여줍니다.
- setInterval(function(){...}, 3000): 3초마다 슬라이드 이미지를 변경하는 함수를 실행합니다.
- let nextIndex = (currentIndex + 1) % $slider.length;: 다음에 보여질 이미지의 인덱스를 계산합니다.
- $slider.eq(currentIndex).fadeOut(300);: 현재 이미지를 페이드 아웃합니다.
- $slider.eq(nextIndex).fadeIn(300);: 다음 이미지를 페이드 인합니다.
- currentIndex = nextIndex;: 현재 이미지의 인덱스를 업데이트합니다.
3. 탭 메뉴
- const tabBtn = $(".info-menu > a");: 탭 메뉴의 각 버튼을 선택합니다.
- const tabCont = $(".info-cont > ul");: 탭 메뉴의 내용을 담고 있는 요소를 선택합니다.
- tabCont.hide().eq(0).show();: 모든 탭 내용을 숨기고, 첫 번째 탭 내용을 보여줍니다.
- tabBtn.on("click", function(){...});: 탭 메뉴 버튼을 클릭했을 때, 해당 버튼에 대응하는 탭 내용을 보여줍니다.
- const index = $(this).index();: 클릭한 버튼의 인덱스를 구합니다.
- $(this).addClass("active").siblings().removeClass("active");: 클릭한 버튼에 "active" 클래스를 추가하고, 다른 버튼의 "active" 클래스를 제거합니다.
- tabCont.eq(index).show().siblings().hide();: 클릭한 버튼에 대응하는 탭 내용을 보여주고, 다른 탭 내용을 숨깁니다.