QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
웹디자인 기능사 실기 연습
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">
<div class="logo"><a href="#">강원천문대</a></div>
<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 -->
<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>
<!-- slider -->
<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.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>
<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>
<!-- //notice -->
<section class="banner">
<h3>강원천문대 온라인 예매하기</h3>
<a href="#">예매하기</a>
</section>
<!-- banner -->
<article class="link">
<h3>이달의 별자리 구경하기</h3>
<a href="#">바로가기</a>
</article>
</div>
<!-- contents -->
<footer id="footer">
<div class="f1">
<h4>강원천문대</h4>
</div>
<div class="foo1">
<div class="f2">
<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="f3">
COPYTIGHT © 2023, All Rightes Reseved
</div>
</div>
</footer>
<!-- footer -->
</div>
</body>
</html>CSS
@charset "UTF-8";
* {
margin: 0;
padding: 0;
color: #333;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
img {
vertical-align: top;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
/* header */
#header {
width: 100%;
height: 100px;
display: flex;
background-color: #0c51a6;
position: relative;
z-index: 1000;
}
#header .logo {
width: 20%;
background-color: #0c51a6;
}
#header .logo a {
font-weight: 600;
font-size: 24px;
display: inline-block;
padding: 30px 40px;
color: #fff;
}
#header .nav {
width: 80%;
text-align: right;
}
#header .nav > ul {
margin-top: 23px;
}
#header .nav > ul > li {
display: inline-block;
position: relative;
}
#header .nav > ul > li > a {
color: #fff;
padding: 15px 45px;
background-color: #093e7f;
display: block;
}
#header .nav > ul > li > a:hover {
background-color: #638ab8;
}
#header .nav > ul > li > ul {
display: none;
text-align: center;
background-color: #fff;
position: absolute;
top: 51px;
left: 0;
width: 100%;
}
/* #header .nav > ul > li > ul > li {} */
#header .nav > ul > li > ul > li > a {
display: block;
padding: 10px 20px;
}
#header .nav > ul > li > ul > li > a:hover {
background-color: #b8d0ed;
}
/* slider */
#slider {
width: 100%;
height: 300px;
/* background-color: #cdcdcd; */
}
#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;
}
/* contents */
#contents {
display: flex;
width: 1200px;
height: 200px;
}
#contents .info {
width: 400px;
height: 200px;
background-color: #c0ddf6;
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 ul {} */
#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;
}
#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;
}
#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(28, 47, 151, 0.4);
color: #fff;
}
#contents .link {
width: 400px;
height: 200px;
background-image: url(../images/link.jpg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#contents .link h3 {
color: #fff;
background-color: #6261615d;
padding: 15px 25px;
}
#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(28, 47, 151, 0.4);
color: #fff;
}
/* footer */
#footer {
width: 100%;
height: 100px;
display: flex;
}
#footer .f1 {
width: 20%;
height: 100px;
background-color: #093e7f;
}
#footer .f1 h4 {
font-size: 30px;
color: #cdcdcd;
padding: 25px 20px;
}
#footer .foo1 {
width: 80%;
}
#footer .foo1 .f2 {
width: 100%;
height: 50px;
background-color: #093e7f;
text-align: center;
}
#footer .foo1 .f2 ul {
padding-top: 16px;
}
#footer .foo1 .f2 li {
display: inline-block;
border-right: 1px solid #fff;
}
#footer .foo1 .f2 li:last-child {
border: 0;
}
#footer .foo1 .f2 li a {
padding: 10px;
color: #fff;
}
#footer .foo1 .f2 li a:hover {
text-decoration: underline;
text-underline-position: under;
}
#footer .foo1 .f3 {
width: 100%;
height: 50px;
background-color: #093e7f;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
color: #fff;
}SCRIPT
$(function(){
$(".nav > ul > li").on({
mouseover: function() {
$(this).find(".submenu").stop().slideDown(200);
},
focusin: function() {
$(this).find(".submenu").stop().slideDown(200);
},
mouseout: function() {
$(this).find(".submenu").stop().slideUp(200);
},
focusout: 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();
});
});반응형
