728x90
반응형
2023 웹디자인 기능사 실기 A-3 유형
- HTML : https://github.com/dongjin6539/web2023/blob/main/webd/site1/index.html
- CSS : https://github.com/dongjin6539/web2023/blob/main/webd/site1/css/style.css
- SCRIPT.JS : https://github.com/dongjin6539/web2023/blob/main/webd/site1/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>강원천문대</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="#">강원천문대</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 -->
<aside id="slider">
<div class="slider__wrap">
<div class="slider">
<a href="#"><img src="images/slider01_01.jpg" alt="천문관학교육관 소개"></a>
<div class="text">
<h2>천문과학교육관 시설 소개</h2>
<p>영상강의실로 놀러오세요!</p>
</div>
</div>
<div class="slider">
<a href="#"><img src="images/slider01_02.jpg" alt="천문과학교육관 이용 안내"></a>
<div class="text">
<h2>천문과학교육관 이용 안내</h2>
<p>어린이를 위한 천문 과학관!</p>
</div>
</div>
<div class="slider">
<a href="#"><img src="images/slider01_03.jpg" alt="별을 보는 고요한 정상"></a>
<div class="text">
<h2>별을 보는 고요한 정상</h2>
<p>강원천문대로 놀러오세요!</p>
</div>
</div>
</div>
</aside>
<!-- slider -->
<main 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_01.jpg" alt="독일 천문대1"></a></li>
<li><a href="#"><img src="images/gallery01_02.jpg" alt="미국 천문대1"></a></li>
<li><a href="#"><img src="images/gallery01_03.jpg" alt="영국 천문대1"></a></li>
</ul>
</div>
</section>
<section class="banner">
<h3>강원천문대 온라인 예매하기</h3>
<a href="#">예매하기</a>
</section>
<article class="link">
<h3>이달의 별자리 구경하기</h3>
<a href="#">바로가기</a>
</article>
</main>
<!-- conents -->
<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 -->
</div>
<!-- wrap -->
</body>
</html>- 웹 사이트 표준에 맞게 알맞는 태그를 사용하고 css 링크와 script 링크를 입력해서 이 html 코드에 적용되게 해줍니다.
CSS
@charset "UTF-8";
* {
margin: 0;
padding: 0;
color: #333;
}
ul, li, ol {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: top;
}
/* wrap */
#wrap {
width: 1200px;
margin: 0 auto;
}
/* header */
#header {
width: 100%;
height: 100px;
background-color: #0C51A6;
display: flex;
position: relative;
z-index: 1000;
}
#header .logo {
width: 20%;
background-color: #0C51A6;
}
#header .logo a {
display: inline-block;
padding: 25px 40px;
color: #fff;
}
#header .nav {
width: 80%;
text-align: right;
}
#header .nav > ul {
margin-top: 25px;
}
#header .nav > ul > li {
display: inline-block;
position: relative;
}
#header .nav > ul > li > a {
color: #fff;
padding: 15px 45px;
display: block;
}
#header .nav > ul > li > a:hover {
background-color: #427cc4;
}
#header .nav > ul > li > ul {
text-align: center;
background-color: #fff;
display: none;
position: absolute;
top: 50px;
left: 0;
width: 100%;
}
#header .nav > ul > li > ul > li > a {
padding: 10px 20px;
display: block;
}
#header .nav > ul > li > ul > li > a:hover {
background-color: #a9c8ee;
}
/* slider */
#slider {
width: 100%;
height: 300px;
background-color: #9abbe2;
}
#slider .slider__wrap {
position: relative;
}
#slider .slider__wrap .slider {
position: absolute;
left: 0;
top: 0;
}
#slider .slider__wrap .slider img {
vertical-align: top;
}
#slider .slider__wrap .slider .text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
padding: 20px 30px;
}
#slider .slider__wrap .slider .text h2 {
color: #fff;
}
#slider .slider__wrap .slider .text p {
color: #fff;
}
/* contents */
#contents {
width: 100%;
height: 200px;
display: flex;
}
#contents .info {
width: 33.333%;
background-color: #CFE6FF;
padding: 20px;
box-sizing: border-box;
}
#contents .info h3 {
margin-bottom: 10px;
font-size: 22px;
}
#contents .info h3 a.active {
text-decoration: underline;
text-underline-position: under;
}
#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;
text-underline-position: under;
}
#contents .info .notice li span {
width: 25%;
text-align: right;
}
#contents .info .gallery {
display: flex;
}
#contents .info .gallery li a {
margin-right: 17px;
padding-top: 3px;
}
#contents .banner {
width: 33.333%;
background-image: url(../images/banner01.jpg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#contents .banner h3 {
color: #fff;
}
#contents .banner a {
background-color: rgba(255, 255, 255, 0.4);
padding: 10px 20px;
border-radius: 50px;
margin-top: 10px;
}
#contents .banner a:hover {
background-color: rgba(88, 128, 221, 0.752);
}
#contents .link {
width: 33.333%;
background-image: url(../images/link01.jpg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#contents .link h3 {
color: #fff;
}
#contents .link a {
background-color: rgba(255, 255, 255, 0.4);
padding: 10px 20px;
border-radius: 50px;
margin-top: 10px;
}
#contents .link a:hover {
background-color: rgba(210, 106, 220, 0.841);
}
/* footer */
#footer {
width: 100%;
height: 100px;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 100px;
background-color: #0C51A6;
border-right: 1px solid #fff;
}
#footer .footer1 h4 {
font-size: 30px;
color: #7f7f7f;
padding: 30px 30px;
text-align: center;
}
#footer .footer2 {
width: 80%;
}
#footer .footer2-1 {
width: 100%;
height: 50px;
background-color: #0C51A6;
border-bottom: 1px solid #fff;
text-align: center;
}
#footer .footer2-1 ul {
padding-top: 16px;
}
#footer .footer2-1 li {
display: inline-block;
border-right: 1px solid #fff;
}
#footer .footer2-1 li:last-child {
border: 0;
}
#footer .footer2-1 li a {
padding: 10px;
color: #fff;
}
#footer .footer2-1 li a:hover {
text-decoration: underline;
text-underline-position: under;
}
#footer .footer2-2 {
width: 100%;
height: 50px;
background-color: #0C51A6;
padding-top: 10px;
box-sizing: border-box;
text-align: center;
color: #fff;
}- html 코드의 태그와 id명 class명을 가져와서 알맞는 스타일과 속성을 입력해줍니다.
SCRIPT
$(function(){
// 메뉴 : 하나씩 나오기
$(".nav > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown(200);
});
$(".nav > 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(1200);
$slider.eq(nextIndex).fadeIn(1200);
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();
});
})- 이번 script는 jQuery를 사용해봤습니다.
- html 코드에서 script 링크를 상단 부분에 입력을 했기 때문에 script 처음 스타트를 $(function(){})으로 시작해줍니다. 그런 다음 { } 안에 script를 입력해줍니다.
- 먼저 메뉴에 마우스를 오버했을 때 submenu가 내려오게 해주고 마우스가 아웃되면 submenu가 올라가게 해줍니다.
- $( )으로 먼저 선택자를 가져오고 .mouseover 메서드를 사용하고 함수로 this로 위의 선택자를 그대로 가져오고 거기서 submenu를 찾기 위해 .find( )를 사용해주고 부드럽게 내려오게 하기 위해 .slideDown( )을 사용해줍니다.
- 반대로 올라가게 하기 위해 .mouseout 메서드를 사용하고 함수로 this로 위의 선택자를 그대로 가져오고 거기서 submenu를 찾기 위해 .find( )를 사용해주고 부드럽게 올라가게 하기 위해 .slideUp( )을 사용해줍니다.
- 슬라이드 부분에 이미지를 페이드 효과를 줄겁니다. 먼저 변수를 0으로 저장해줍니다. 이미지 부분에 선택자를 가져오고 나머지는 숨기고 첫번째 이미지를 보여주기 위해 .hide( ).first( ).show( )를 입력해줍니다. 시간을 3초 지나면 페이드 효과를 주기 위해 setInterval(function(){}, 3000) 함수를 사용해줍니다. 다음 이미지의 변수를 nextIndex로 저장해주고 eq( )를 사용해서 값을 가져오고 fadeOut과 fadeIn 메서드를 사용해서 효과를 줍니다.
- 탭 메뉴 효과를 주겠습니다. 먼저 변수를 저장하기위해 탭 메뉴 부분의 선택자를 가져옵니다. 그리고 첫번째 index의 값을 보여주기위해 .hide( ).eq(0).show( )를 입력해줍니다. 그리고 탭 메뉴 버튼을 클릭하면 효과를 주기 위해 .on("click") 메서들 사용해서 탭 메뉴의 this를 가져와서 index 값을 가져옵니다. 그리고 index 값을 활용해 content를 eq(index)를 가져와서 show()로 보여주고 일치하는 요소 집합의 형제를 가져오기 위해 siblings()를 사용하고 나머지 content는 hide()에서 숩겨줍니다.
728x90
반응형
