728x90
반응형
2023 웹디자인 기능사 실기 C-4 유형
- HTML : https://github.com/dongjin6539/web2023/blob/main/webd/site3/index.html
- CSS : https://github.com/dongjin6539/web2023/blob/main/webd/site3/css/style.css
- SCRIPT.JS : https://github.com/dongjin6539/web2023/blob/main/webd/site3/script/script.js
HTML
<!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>Vallery Festival</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="wrap">
<header id="header">
<h1 class="logo"><a href="#">Vallery<br>Festival</a></h1>
<nav class="nav">
<ul>
<li><a href="#">축제소식</a>
<ul class="submenu">
<li><a href="#">Festival 소개</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="#">Festival 소개</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="#">Festival 소개</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="#">Festival 소개</a></li>
<li><a href="#">행사장 안내</a></li>
<li><a href="#">조직위원회</a></li>
<li><a href="#">오시는 길</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- header -->
<main id="main">
<aside id="slider">
<div class="slider__wrap">
<div class="slider s1">
<a href="#"><img src="images/slider03_01.jpg" alt="Vallery Festival"></a>
<div class="text">
<h2>Vallery <span>Festival</span></h2>
<p>신나는 축제 시작합니다.</p>
</div>
</div>
<div class="slider s2">
<a href="#"><img src="images/slider03_02.jpg" alt="Vallery Festival"></a>
<div class="text">
<h2>Vallery <span>Festival</span></h2>
<p>신나는 축제 시작합니다.</p>
</div>
</div>
<div class="slider s3">
<a href="#"><img src="images/slider03_03.jpg" alt="Vallery Festival"></a>
<div class="text">
<h2>Vallery <span>Festival</span></h2>
<p>신나는 축제 시작합니다.</p>
</div>
</div>
</div>
</aside>
<div id="contents">
<div class="content1">
<h3><a href="#">공지사항</a></h3>
<ul>
<li><a href="#">티켓 예매 일정 변경 안.</a><span>2023.04.01</span></li>
<li><a href="#">지역 축제 소개 안내</a><span>2023.04.01</span></li>
<li><a href="#">지역 맛집소개 안내</a><span>2023.04.01</span></li>
<li><a href="#">예약 접수 방법 안내</a><span>2023.04.01</span></li>
<li><a href="#">숙박시설 안내 및 주차..</a><span>2023.04.01</span></li>
</ul>
<a href="#" class="more">더보기</a>
</div>
<div class="content2">
<h3><a href="#">공지사항</a></h3>
<div class="content2__img">
<img src="images/gallery03_01.jpg" alt="행사장">
<img src="images/gallery03_02.jpg" alt="행사장">
</div>
<a href="#" class="more">더보기</a>
</div>
<div class="content3">
<h3><a href="#">축제<br>신청하기</a></h3>
</div>
</div>
<footer id="footer">
<div class="footer1">
<h4><a href="#">Vallery<br>Festival</a></h4>
</div>
<div class="footer2">
<div>발레리 페스티벌</div>
<div>Copyright © 2023 Vallery Festival.</div>
<div>All rights reserved. Designed by Vallery Festival</div>
</div>
<div class="footer3">
<select name="#" id="#">
<option value="1">패밀리 사이트</option>
<option value="2">패밀리 사이트</option>
<option value="3">패밀리 사이트</option>
</select>
</div>
</footer>
<div class="modal">
<h4>Vallery Festival<br>2023 티켓 예매 일정 변경 안내</h4>
<p>안녕하세요, Vallery Festival 운영팀입니다. 2023년 Vallery Festival 티켓 예매 일정에 변경이 있어 안내드립니다.
기존 예매 일정에 따르면 6월 1일부터 6월 30일까지 티켓 예매가 가능하였으나, 운영상의 문제로 인해 일정이 변경되었습니다.</p>
<a href="#">닫기</a>
</div>
</main>
<!-- main -->
</div>
</body>
</html>- 웹 사이트 표준에 맞게 알맞는 태그를 사용하고 css 링크와 script 링크를 입력해서 이 html 코드에 적용되게 해줍니다.
CSS
@charset "UTF-8";
* {
margin: 0;
padding: 0;
color: #333;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: top;
}
#wrap {
width: 1000px;
height: 650px;
display: flex;
position: relative;
}
#header {
width: 25%;
text-align: center;
}
#header .logo {
padding: 10px 0;
}
#header .nav {
background-color: #58339E;
}
#header .nav > ul > li {
position: relative;
}
#header .nav > ul > li > a {
display: block;
color: #fff;
padding: 15px 0;
}
#header .nav > ul > li > a:hover {
background-color: #8558d8;
}
#header .nav > ul > li > ul {
background-color: #C7A9FF;
position: absolute;
right: -130px;
top: 0;
z-index: 1;
padding: 20px 0 50px 0;
display: none;
}
#header .nav > ul > li > ul > li > a {
display: block;
color: #fff;
padding: 10px 20px;
}
#header .nav > ul > li > ul > li:hover {
background-color: #A578FC;
}
#header .nav > ul > li > ul > li > a:hover {
background-color: #A578FC;
}
#main {
width: 75%;
}
#main #slider {
width: 100%;
height: 350px;
overflow: hidden;
}
#main #slider .slider__wrap {
height: 1400px;
position: relative;
/* transform: translateY(-700px); */
}
#main #slider .slider__wrap .slider {
position: relative;
}
#main #slider .slider__wrap .slider img {
width: 100%;
height: 350px;
}
#main #slider .slider__wrap .slider .text {
background-color: rgba(32, 39, 55, 0.8);
position: absolute;
right: 0;
bottom: 0;
text-align: right;
line-height: 1.5;
padding: 50px 40px 50px 100px;
}
#main #slider .slider__wrap .slider .text h2 {
font-size: 40px;
text-align: right;
color: #fff;
}
#main #slider .slider__wrap .slider .text h2 span {
color: #B2AAFF;
}
#main #slider .slider__wrap .slider .text p {
font-size: 20px;
color: #fff;
}
#main #contents {
width: 100%;
height: 200px;
/* background-color: #F2EBFF; */
display: flex;
}
#main #contents .content1 {
width: 40%;
background-color: #F2EBFF;
padding: 10px;
position: relative;
}
#main #contents .content1 h3 {
background-color: #212635;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
margin-bottom: 20px;
}
#main #contents .content1 h3 a {
color: #fff;
padding: 5px;
}
#main #contents .content1 li {
display: flex;
margin-left: 10px;
line-height: 1.6;
position: relative;
}
#main #contents .content1 li::before {
content: '';
position: absolute;
left: -10px;
top: 10px;
width: 5px;
height: 5px;
background-color: #000;
border-radius: 50%;
}
#main #contents .content1 li a {
width: 70%;
}
#main #contents .content1 li a:hover {
text-decoration: underline;
text-underline-position: under;
}
#main #contents .content1 li span{
width: 30%;
text-align: right;
}
#main #contents .content1 .more {
position: absolute;
right: 15px;
top: 15px;
color: #fff;
font-size: 12px;
}
#main #contents .content1 .more:hover {
text-decoration: underline;
text-underline-position: under;
}
#main #contents .content1 .more::after{
content: '+';
}
#main #contents .content2 {
width: 30%;
background-color: #E4D7FE;
padding: 10px;
position: relative;
}
#main #contents .content2 h3 {
background-color: #212635;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
margin-bottom: 10px;
}
#main #contents .content2 h3 a {
color: #fff;
padding: 5px;
}
#main #contents .content2 .content2__img {
display: flex;
justify-content: space-between;
}
#main #contents .content2 .content2__img img {
width: 45%;
}
#main #contents .content2 .more {
position: absolute;
right: 15px;
top: 15px;
color: #fff;
font-size: 12px;
}
#main #contents .content2 .more:hover {
text-decoration: underline;
text-underline-position: under;
}
#main #contents .content2 .more::after{
content: '+';
}
#main #contents .content3 {
width: 30%;
background: url(../images/banner03_01.jpg);
position: relative;
}
#main #contents .content3 h3 {
background-color: rgba(63, 62, 85, 0.7);
padding: 30px 40px;
position: absolute;
left: 25%;
top: 50%;
transform: translate(-15%, -50%);
text-align: center;
}
#main #contents .content3 h3:hover {
background-color: rgba(0, 0, 0, 0.9);
}
#main #contents .content3 h3 a {
color: #fff;
}
#main #footer {
width: 100%;
height: 100px;
background-color: #4A4D56;
display: flex;
}
#main #footer .footer1 {
width: 30%;
}
#main #footer .footer1 h4 {
text-align: center;
padding: 15px;
font-size: 24px;
}
#main #footer .footer2 {
width: 40%;
font-size: 12px;
padding: 20px;
}
#main #footer .footer2 div {
color: #fff;
margin-bottom: 5px;
}
#main #footer .footer3 {
width: 30%;
text-align: center;
padding-top: 32px;
}
#main #footer .footer3 select {
padding: 3px 5px;
width: 80%;
}
.modal {
width: 30%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #D0AEF0;
border: 4px solid #7636B1;
padding: 20px;
text-align: center;
display: none;
word-break: keep-all;
}
.modal h4 {
margin-bottom: 20px;
text-align: left;
}
.modal p {
margin-bottom: 50px;
text-align: left;
font-size: 14px;
}
.modal a {
display: inline-block;
background-color: #7636B1;
color: #fff;
padding: 10px 20px;
}- html 코드의 태그와 id명 class명을 가져와서 알맞는 스타일과 속성을 입력해줍니다.
SCRIPT
$(function(){
// 메뉴
$(".nav > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown();
$(this).css("backgroundColor", "#8558d8");
});
$(".nav > ul > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp();
$(this).css("backgroundColor", "#58339E");
});
// 슬라이드
const $sliderWrap = $("#slider .slider__wrap");
const $slider = $(".slider");
const $sliderImg = $(".slider img");
const $sliderHeight = $sliderImg.height();
console.log($sliderHeight);
$sliderWrap.append($slider.first().clone(true));
let currentIndex = 0;
setInterval(function(){
currentIndex++;
$sliderWrap.animate({top: -$sliderHeight * currentIndex}, 600);
console.log(currentIndex);
if(currentIndex === $slider.length){
setTimeout(function(){
$sliderWrap.animate({top: 0}, 0);
currentIndex = 0;
});
};
}, 3000);
// 모달창
$(".content3 h3").click(function(){
$(".modal").show();
})
$(".modal a").click(function(){
$(".modal").hide();
})
});- 이번 script는 jQuery를 사용해봤습니다.
- html 코드에서 script 링크를 상단 부분에 입력을 했기 때문에 script 처음 스타트를 $(function(){})으로 시작해줍니다. 그런 다음 { } 안에 script를 입력해줍니다.
- 먼저 메뉴에 마우스를 오버했을 때 submenu가 내려오고 마우스가 아웃되면 submenu가 올라가게 해줍니다.
- $( )으로 먼저 선택자를 가져오고 .mouseover 메서드를 사용하고 함수로 submenu 메뉴 부분을 가져와서 내려오게 하기 위해 slideDown( )을 사용해줍니다. 그리고 menu 부분에 backgroundColor를 주기 위해 css를 주고 색을 입력해줍니다.
- 반대로 올라가게 하기 위해 .mouseout 메서드를 사용하고 함수로 submenu 메뉴 부분을 가져와서 올라가게 하기 위해 slideUp( )을 사용해줍니다. 그리고 menu 부분에 backgroundColor를 주기 위해 css를 주고 색을 입력해줍니다.
- 슬라이드 부분의 이미지를 위로 움직이게 슬라이드 효과를 줄겁니다. 먼저 변수를 0으로 저장해줍니다. 이미지의 움직이는 영역을 가져오기 위해 영역의 부모를 선택자로 가져옵니다. 그리고 슬라이더의 이미지를 선택자로 가져옵니다. 그리고 이미지의 height값을 가져오기 위해 .height( ) 메서드를 사용해줍니다. 그리고 끊기지 않게 나타나게 하기 위해 첫번째 이미지를 복사해서 마지막 이미지 뒤에 붙여줄겁니다. 그러기 위해 append( ) 메서드를 사용해서 .first.clone(true)를 사용해줍니다.
- 시간을 3초 지나면 슬라이드 효과를 주기 위해 setInterval(function(){}, 3000) 함수를 사용해줍니다. 변수를 0으로 저장해준 것을 ++연산자를 사용해서 1씩 증가시켜줍니다. 이미지의 움직이는 영역을 .animate( ) 메서드를 사용해서 왼쪽으로 이미지의 가로값만큼 보내기 위해 top으로 (-이미지의 세로값*변수) 만큼 보냅니다. 그리고 변수의 인덱스 값이 이미지의 갯수의 값과 같을 때 이미지의 움직이는 영역을 .animate( ) 메서드를 사용해서 top을 0으로 옮겨줍니다. 그리고 변수를 0으로 다시 되돌려줍니다.
- 모달창(팝업창)은 페이지 부분의 class 명을 선택자로 가져와서 그 부분을 클릭했을때 나타나고 창의 닫기 버튼을 클릭했을때 사라지게 해줍니다. 그래서 $( )으로 선택자를 가져와서 .click( ) 메서드를 사용해서 모달창의 class 명을 가져와서 .show( )를 사용해서 나타나게 하고 창의 닫기 버튼을 선택자로 가져와서 .hide( )를 사용해서 사라지게 해줍니다.
728x90
반응형
