오늘은 웹디자인 실기 A-3 유형을 연습해봅시당!
A-3 pdf를 참고해주세여!
구조
<!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> -->
<script src="script/script1.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>
<main id="main">
<div class="slider">
<div class="sliderWrap">
<div class="slider">
<a href="#"><img src="images/slider01.jpg" alt="천문관학교육관 소개"></a>
<div class="text">
<h2>천문과학교육관 시설 소개</h2>
<p>영상강의실로 놀러오세요!</a></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 class="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.12</span></li>
<li><a href="#">강원천문대 2023년 온라인 예매 안내</a><span>2023.05.12</span></li>
<li><a href="#">강원천문대 휴관일 및 이벤트 안내</a><span>2023.05.13</span></li>
<li><a href="#">강원천문대 주차장 이용 및 숙박 안내</a><span>2023.05.14</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>
</main>
<footer id="footer">
<div class="left"><h4>강원천문대</h4></div>
<div class="right">
<div class="foot1">
<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="foot2">COPYRIGHT © 2023, All Rightes Reseved</div>
</div>
</footer>
</div>
</body>
</html>
CSS
@charset "UTF-8";
* {
margin: 0;
padding: 0;
color: #333;
}
/* reset */
ul, li {
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;
display: flex;
background-color: #0C51A6;
position: relative;
z-index: 1000;
}
#header .logo {
width: 20%;
}
#header .logo a {
display: inline-block;
padding: 30px 40px;
color: #fff;
font-size: 30px;
}
#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: #0a3c79;
display: block;
}
#header .nav > ul > li > a:hover {
background-color: #144888;
transition: all 0.3s;
}
#header .nav > ul > li > ul {
text-align: center;
display: none;
background-color: #fff;
position: absolute;
top: 51px;
left: 0;
width: 100%;
}
#header .nav > ul > li > ul > li > a {
display: block;
padding: 10px 20px;
}
#header .nav > ul > li > ul > li > a:hover {
background-color: #bad9ff;
transition: all 0.3s;
}
/* main */
#main {}
/* sliderWrap */
.slider {
width: 100%;
height: 300px;
background-color: #777;
}
.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.3);
padding: 20px 30px;
}
.slider .sliderWrap .slider .text h2 {
color: #fff;
margin-bottom: 10px;
}
.slider .sliderWrap .slider .text p {
color: #fff;
}
.contents {
display: flex;
width: 100%;
height: 200px;
}
.contents .info {
width: 33.3333%;
padding: 20px;
background-color: #bad9ff;
}
.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: 14px;
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;
}
.contents .banner {
width: 33.3333%;
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(47, 42, 85, 0.3);
padding: 10px 20px;
border-radius: 50px;
margin-top: 10px;
color: #fff;
}
.contents .link {
width: 33.3333%;
background-image: url(../images/link.jpg);
}
.contents .link h3 {
color: #fff;
padding: 20px;
}
.contents .link a {
width: 100px;
height: 100px;
background-color: #737bc2a2;
display: block;
border-radius: 50%;
text-align: center;
line-height: 100px;
margin: 0 auto;
color: #fff;
}
.contents .link a:hover {
background-color: #2f3674a2;
transition: all 0.3s;
}
#footer {
width: 100%;
display: flex;
}
#footer .left {
width: 20%;
height: 100px;
background-color: #58595b;
}
#footer .left h4 {
font-size: 30px;
color: #cdcdcd;
padding: 32px 30px;
}
#footer .right {
width: 80%;
}
#footer .right .foot1 {
width: 100%;
height: 50px;
text-align: center;
background-color: #ababd1;
}
#footer .right .foot1 ul {
padding-top: 16px;
}
#footer .right .foot1 li {
display: inline-block;
border-right: 1px solid #333;
}
#footer .right .foot1 li:last-child {
border: 0;
}
#footer .right .foot1 li a {
padding: 10px;
}
#footer .right .foot1 li a:hover {
text-decoration: underline;
}
#footer .right .foot2 {
padding-top: 10px;
text-align: center;
background-color: #7979b8;
box-sizing: border-box;
}
.foot2 {
width: 100%;
height: 50px;
}제이쿼리
$(function(){
// 메뉴 : 하나씩
$(".nav > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown();
});
$(".nav > ul > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp();
});
// 슬라이드 : 페이드 효과
let currentIndex = 0;
const $slider = $(".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();
});
});제이쿼리_메뉴 구현
메뉴 항목에 마우스가 올라갔을 때($(".nav > ul > li").mouseover(function(){}), 코드는 해당 하위 메뉴를 찾아서 슬라이드 다운($(this).find(".submenu").stop().slideDown();)합니다.
메뉴 항목에서 마우스가 벗어났을 때($(".nav > ul > li").mouseout(function(){}), 코드는 해당 하위 메뉴를 찾아서 슬라이드 업($(this).find(".submenu").stop().slideUp();)합니다.
제이쿼리_슬라이드
현재 인덱스를 나타내는 변수 currentIndex를 0으로 초기화합니다.
슬라이더 요소를 선택하여 $slider 변수에 할당합니다.
$slider의 모든 요소를 숨기고 첫 번째 요소를 보이게 설정합니다.
일정 시간 간격으로 반복되는 함수가 실행됩니다.
다음에 보여질 슬라이드의 인덱스를 계산하고, $slider의 현재 인덱스에 해당하는 슬라이드를 페이드아웃($slider.eq(currentIndex).fadeOut(1200))하고, 다음 인덱스에 해당하는 슬라이드를 페이드인($slider.eq(nextIndex).fadeIn(1200))합니다.
마지막으로 currentIndex를 nextIndex로 업데이트합니다.
이 과정은 3초마다 반복됩니다.
제이쿼리_탭메뉴
tabBtn은 .info-menu > a 요소를 선택한 것이고, tabCont는 .info-cont > ul 요소를 선택한 것입니다.
첫 번째 탭 컨텐츠를 제외한 나머지 탭 컨텐츠를 숨깁니다(tabCont.hide().eq(0).show;).
tabBtn이 클릭되었을 때 실행할 함수를 정의합니다(tabBtn.on("click", function(){}).
클릭된 요소의 인덱스를 가져와서 index 변수에 할당합니다(const index = $(this).index();).
클릭된 요소에 "active" 클래스를 추가하고, 형제 요소 중에서도 "active" 클래스를 가진 요소를 찾아서 해당 클래스를 제거합니다($(this).addClass("active").sib). 이 부분은 코드가 불완전한 상태이므로 계속되는 부분이 필요합니다.
즉, 이 코드는 탭 버튼이 클릭되었을 때 해당 버튼에 "active" 클래스를 추가하고, 다른 버튼에서는 "active" 클래스를 제거하는 동작을 수행합니다. 탭 컨텐츠는 처음에 첫 번째 컨텐츠가 보이고, 다른 컨텐츠는 숨겨져 있습니다. 따라서 추가적인 코드가 필요합니다.
완성된 페이지
728x90
반응형
