웹디자인기능사 실기 코드 A-3 강원천문대
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>A-3 강원천문대</title>
<link href="./css/style.css" type="text/css" rel="stylesheet">
<script src="./js/jquery-1.12.3.js"></script>
<script src="./js/script.js"></script>
</head>
<body>
<main>
<header>
<a class="logo" href="#">
<img src="./img/logo.png" alt="로고">
</a>
<ul class="navi">
<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>
<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>
</header>
<!-- 이미지슬라이드 -->
<div class="imgSlide">
<a href="#"><img src="./img/img1.jpg" alt="강원천문대 홈페이지 새단장"><span class="imgText">강원천문대 홈페이지 새단장</span></a>
<a href="#"><img src="./img/img2.jpg" alt="이달의 별자리 특강"><span class="imgText">이달의 별자리 특강</span></a>
<a href="#"><img src="./img/img3.jpg" alt="별사진 공모전 개회"><span class="imgText">별사진 공모전 개회</span></a>
</div>
<!-- 컨텐츠 -->
<div class="contents">
<div>
<ul class="tabMenu">
<li class="active">
<a href="#">공지사항</a>
<div class="tabBG notice">
<ul>
<li><a href="#">제1회 별사진 공모전 개회됩니다. <span>2020.11.19</span></a></li>
<li><a href="#">하계기간 야간 연장운영합니다. <span>2020.11.19</span></a></li>
<li><a href="#">청소년 대상 천문교실 안내 <span>2020.11.19</span></a></li>
<li><a href="#">하늘과 바람과 별과 詩 사생대회 <span>2020.11.19</span></a></li>
</ul>
</div>
</li>
<li>
<a href="#">갤러리</a>
<div class="tabBG gallery">
<ul>
<li><a href="#"><img src="./img/icon1.jpg" alt="강원천문대 썸네일1"></a></li>
<li><a href="#"><img src="./img/icon2.jpg" alt="강원천문대 썸네일2"></a></li>
<li><a href="#"><img src="./img/icon3.jpg" alt="강원천문대 썸네일3"></a></li>
</ul>
</div>
</li>
</ul> <!-- tabMenu 끝 -->
</div>
<div class="banner">
<a href="#">배너</a>
</div>
<div class="direct">
<a href="#">바로가기</a>
</div>
</div>
<footer>
<div class="footerLogo">
<img src="./img/footerLogo.png" alt="하단로고">
</div>
<div class="footerGroup">
<div class="footerMenu">
<a href="#">하단메뉴1</a>
<a href="#">하단메뉴2</a>
<a href="#">하단메뉴3</a>
</div>
<div class="footerCright">
COPYRIGHT © by WEBDESIGN. ALL RIGHTS RESERVED
</div>
</div>
</footer>
</main>
<div id="modalWrap">
<div class="modal">
<h1>하늘과 바람과 별과 詩 사생대회</h1>
<p>
윤동주 시인의 시집 <하늘과 바람과 별과 詩> 출간
72주년을 맞이하여 천문대에서 개최하는 사생대회가 열립니다.
별 하나에 추억, 사랑, 쓸쓸함, 동경 그리고 시와, 어머니를 그렸던
시인처럼 별같은 마음을 가진 분들은 참여해주세요.
</p>
<button class="btn">닫기</button>
</div>
</div>
</body>
</html>javascript & jQuery
$(document).ready(function(){
// 마우스오버 메뉴
$('.navi > li').mouseover(function(){
$(this).find('.subMenu').stop().slideDown(300);
}).mouseout(function(){
$(this).find('.subMenu').stop().slideUp(300);
});
// 이미지슬라이드 페이드 인 페이드 아웃
$('.imgSlide a:gt(0)').hide();
setInterval(function(){
$('.imgSlide a:first-child').fadeOut()
.next('a').fadeIn()
.end().appendTo('.imgSlide');
}, 3000);
// ****** 탭 메뉴 공지사항 갤러리 ****** //
$(function(){
$('.tabMenu>li>a').click(function(){
$(this).parent().addClass("active").siblings().removeClass("active");
// return false;
/* return false를 반드시 적기.
버블링(bubbling) 때믄. 버블링이란?
한 요소에 이벤트가 발생하면,
이 요소에 할당된 핸들러가 동작하고,
이어서 부모 요소의 핸들러가 동작합니다.
가장 최상단의 조상 요소를 만날 때까지
이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문입니다.
클릭 이벤트를 중단하고, 호출한 곳으로 되돌아 가라~라는 의미.
a를 클릭했을 때, 부모의 요소도 클릭한것 처럼 처리가 되기때문에
HTML을 클릭 이전 상태로 되돌리기 위해서
*/
});
});
// 레이어 팝업
$('.notice li:first').click(function(){
$('#modalWrap').addClass("active");
});
$('.btn').click(function(){
$('#modalWrap').removeClass("active");
});
});CSS
@charset "UTF-8";
/* 초기설정 */
*{
margin:0;
padding:0;
list-style:none;
box-sizing: border-box;
}
body{
background: #ffffff;
color:#333333;
}
a{
text-decoration:none;
display: block;
}
/********본문시작*********/
/* 모든 컨텐츠를 감싸는 main */
main{
width:1200px;
margin:0 auto;
position:relative; /* 서브 메뉴 때문에 반드시 필요함 */
}
/* 메뉴와 로고가 들어가는 header */
header{
width:100%;
height:100px;
display:flex;
justify-content: space-between;
background:#0066ad;
}
.logo{
width:20%;
height:100%;
display:flex; /*로고 이미지를 중앙에 위치 시키기 위해 flex로 지정하여 수평, 수직 정렬이 되도록 하기 위해.*/
justify-content: center; /* 수평 가운데 정렬 */
align-items: center; /* 수직 가운데 정렬 */
}
.logo > img {
width:200px; /*지시사항에 적힌대로 width값 */
height:40px; /*지시사항에 적힌대로 height값 */
}
/*메인메뉴*/
.navi{
width:60%;
height:100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.navi > li{
width:100%;
padding:20px 0;
position:relative;
cursor:pointer;
}
.navi > li:hover{background:rgba(255,255,255, 0.1) ;}
.navi > li > a{
text-align: center;
color:#ffffff;
}
.subMenu{
display: none;
width:100%;
position:absolute;
left:0;
top:80px;
z-index: 1;
background:#333333;
}
.subMenu > li{
width:100%;
line-height: 40px;
font-size: 14px;
font-weight: bold;
text-align: center;
}
.subMenu > li:hover{
background: rgba(0,0,0, 0.5);
}
.subMenu a {color:#ffffff;}
/* 이미지슬라이드 */
.imgSlide{
position:relative;
width:100%;
height:300px;
overflow: hidden;
background: #eeeeee;
}
.imgSlide a{
position:absolute;
left:0;
top:0;
overflow: hidden;
}
.imgSlide a > img {height:100%;}
.imgText{
position:absolute;
left:50%;
top:50%;
margin: -10px -180px;
background: rgba(0, 102, 173, 0.4);
color:#ffffff;
padding: 20px 100px;
font-weight: bold;
}
/* 컨텐츠 영역 */
.contents{
width: 100%;
height:200px;
padding:0;
margin:10px 0;
display:flex;
justify-content: space-between;
overflow: hidden;
position: relative; /* 탭메뉴의 콘텐츠 영역 absolute 때문에 넣어줌 */
}
/* 각각 컨텐츠 박스의 영역 */
.contents div{ width:33.3%;}
.contents > div:nth-of-type(2){margin:0 10px;}
/*탭메뉴 : 공지사항 갤러리 */
.tabMenu{ display:flex;}
/*공지사항 갤러리 제목*/
.tabMenu > li > a{
padding:0 10px;
min-width: 85px;
line-height:30px;
font-size:14px;
text-align:center;
background:#eeeeee;
border:1px solid #dddddd;
}
.tabMenu > li > a:hover{background-color:#eeeeee;}
/* 공지사항과 갤러리 탭 맞닿는 부분에 보더를 없애줌 */
.tabMenu > li:first-child a{border-right:none;}
/* 활성화된 탭의 스타일 */
.tabMenu > li.active > a{ font-weight: bold; background-color:#ffffff;}
/*탭 콘텐츠 영역 스타일*/
.tabBG{
position:absolute;
overflow:hidden;
height:168px; /* chrome inspect(검사) 보고 수치 계산 */
background:#ffffff;
}
/*active 클래스가 추가된 탭 콘텐츠 영역 스타일*/
.tabMenu > li.active div{
border:1px solid #dddddd;
z-index:1;
}
/* 공지사항 */
.notice ul{ padding:20px 0;}
.notice ul li{ padding:8px 20px;
margin:0 10px;
font-size:14px;
}
.notice li:nth-child(even){ background:rgba(0, 102, 173, 0.1); }
.notice li:hover{color:#222328;background:rgba(0, 102, 173, 0.4);}
.notice li span {float:right;} /* 날짜 오른쪽 정렬 */
/* 갤러리 */
.gallery{ left:0; }
.gallery ul {
display: flex;
justify-content: space-around;
align-items: center;
height:100%; /*높이 값이 있어야 수직 정렬 됨*/
}
.gallery li:hover{ opacity:0.5; }
/*배너와 바로가기 공통 */
.banner, .direct{
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* 배너 이미지 */
.banner{
background: url("../img/banner.jpg") center center ;
}
/* 바로가기 이미지 */
.direct{
background: url("../img/direct.jpg") center center ;
}
/* 배너, 바로가 글자 스타일 */
.banner > a,
.direct > a{
width:50%;
padding:14px 0;
text-align:center;
color:#ffffff;
font-weight:bold;
background-color:rgba(0, 102, 173, 0.4);
}
.banner > a:hover,
.direct > a:hover{
background-color:rgba(255,255,255, 0.5);
color:#222328;
}
/* 하단 */
footer{
width:100%;
height:100px;
background:#737373;
display: flex;
justify-content:space-between;
}
/* footer안에 있는 각 컨텐츠의 영역 */
footer > div:nth-of-type(1) {width:20%;} /* footerLogo */
footer > div:nth-last-of-type(1) {width:60%;} /* footerGroup */
/* 하단 로고 */
.footerLogo {display:flex; justify-content:center; align-items: center;}
.footerLogo img{width:200px;}
/* 하단메뉴 + 카피라이트 묶음 */
.footerGroup{
display:flex;
flex-direction: column;
justify-content: space-around;
padding:0 20px;
}
/* 하단메뉴 */
.footerMenu{
display: flex;
justify-content: space-around;
margin:0 100px;
}
.footerMenu a {color:#ffffff;}
.footerMenu a:hover {color:#dddddd;}
/* 카피라이트 */
.footerCright {
font-size:16px;
text-align:center;
color:#ffffff;
}
/* 레이어 팝업 */
#modalWrap{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index: 1;
}
#modalWrap.active{
display:block;
}
.modal{
position:fixed;
width:350px;
padding:20px;
top:40%;
left:40%;
background:#ffffff;
}
.modal > h1{
margin:10px 0;
text-align: center;
letter-spacing: -1px;
}
.modal > p{
text-align:justify;
}
.btn{
width:100%;
padding:10px;
margin-top:20px;
background: #0066ad;
color:#ffffff;
border:0;
font-weight:bold;
cursor:pointer;
}
.btn:hover{background:rgba(0,102,173,0.2); color:#0066ad;}728x90
300x250
