HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>영상박물관</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.12.3.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap">
<main id="main" class="flx">
<header id="header">
<h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
<nav class="gnb">
<ul>
<li class="dep1">
<a href="#">박물관소개</a>
<ul class="sub_menu">
<li><a href="#">인사말</a></li>
<li><a href="#">박물관연혁</a></li>
<li><a href="#">박물관 조직도</a></li>
<li><a href="#">오시는 길</a></li>
</ul>
</li>
<li class="dep1">
<a href="#">전시</a>
<ul class="sub_menu">
<li><a href="#">전시 리스트</a></li>
<li><a href="#">전시일정</a></li>
<li><a href="#">특별전</a></li>
<li><a href="#">지역작가</a></li>
</ul>
</li>
<li class="dep1">
<a href="#">체험행사</a>
<ul class="sub_menu">
<li><a href="#">문화행사</a></li>
<li><a href="#">진로체험</a></li>
<li><a href="#">명사특강</a></li>
</ul>
</li>
<li class="dep1">
<a href="#">커뮤니티</a>
<ul class="sub_menu">
<li><a href="#">사용자메뉴얼</a></li>
<li><a href="#">박물관 약도</a></li>
<li><a href="#">게시판</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="board">
<div class="banner flx a_center">
<a href="#"><img src="images/banner.png" alt="배너이미지"></a>
<div>
<p class="b_tit">진행중인 이벤트!!</p>
<p class="b_txt">영상박물관과 함께하는 SNS 이벤트! 참여하고 싶은 사람 다 모여!</p>
</div>
</div>
<div class="notice">
<h2>공지사항</h2>
<ul>
<li><a href="#" class="flx a_center j_spc_btw"><span>영상박물관 공지사항 1 입니다.</span><span>2024.06.08</span></a></li>
<li><a href="#" class="flx a_center j_spc_btw"><span>영상박물관 공지사항 1 입니다.</span><span>2024.06.08</span></a></li>
<li><a href="#" class="flx a_center j_spc_btw"><span>영상박물관 공지사항 1 입니다.</span><span>2024.06.08</span></a></li>
<li><a href="#" class="flx a_center j_spc_btw"><span>영상박물관 공지사항 1 입니다.</span><span>2024.06.08</span></a></li>
</ul>
</div>
<div class="gallery">
<h2>갤러리</h2>
<ul class="flx a_center j_spc_btw">
<li><a href="#" class="flx flx_col a_center"><img src="images/gallery1.png" alt="갤러리이미지1"><span>영상박물관 이미지</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/gallery2.png" alt="갤러리이미지2"><span>영상박물관 이미지</span></a></li>
</ul>
</div>
</section>
<div class="slide">
<ul class="slide_wrap flx flx_col">
<li><img id="ih1" src="images/slide1.png" alt="슬라이드이미지1"><span>슬라이드이미지1</span></li>
<li><img id="ih2" src="images/slide2.png" alt="슬라이드이미지2"><span>슬라이드이미지2</span></li>
<li><img src="images/slide3.png" alt="슬라이드이미지3"><span>슬라이드이미지3</span></li>
</ul>
</div>
</main>
<footer id="footer" class="flx j_spc_btw a_center">
<h3 class="f_logo"><a href="#"><img src="images/f_logo.png" alt="푸터로고"></a></h3>
<div class="copy">COPYRIGHT © by WEBDESIGN. ALL RIGHTS RESERVED</div>
<ul class="sns flx a_center">
<li><a href="#"><img src="images/sns1.png" alt="페이스북"></a></li>
<li><a href="#"><img src="images/sns2.png" alt="인스타그램"></a></li>
<li><a href="#"><img src="images/sns3.png" alt="카카오톡"></a></li>
</ul>
</footer>
<div class="modal_bg">
<div class="modal">
<h3>영상박물관 공지사항</h3>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세
</p>
<button type="button">닫기</button>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/*reset*/
* { margin: 0; padding: 0; box-sizing: border-box; }
ul, ol, li { list-style: none; }
a { text-decoration: none; color: inherit; }
html,body { width: 100%; height: 100%; font-size: 15px; color: #333; background-color: #fff; }
button { border: none; cursor: pointer; }
img { vertical-align: top; }
/*공통*/
.flx { display:flex; }
.flx_col { flex-direction: column; }
.a_center { align-items: center; }
.a_flx_end { align-items: flex-end; }
.a_flx_st { align-items: flex-start; }
.j_spc_btw { justify-content: space-between; }
.j_flx_st { justify-content: flex-start; }
.j_flx_end { justify-content: flex-end; }
/*main*/
.wrap { width: 100%; height: 100%; }
#main { width: 100%; height: calc(100% - 100px); }
#header { width: 200px; height:100%; padding: 10px; border-right: 1px solid #eee; }
#header .logo { margin-bottom: 20px; }
#header .logo a { display: block; width: 180px; }
#header .logo a img { width: 100%; }
.gnb .dep1 { position: relative; }
.gnb .dep1 > a { display: block; width: 100%; height: 42px; line-height: 42px; font-size: 17px; font-weight: 700; padding-left: 20px; }
.gnb .dep1 > a:hover { background-color: #0A9B97; color: #fff; }
.gnb .dep1 > a.on { background-color: #0A9B97; color: #fff; }
.sub_menu { position: absolute; top: 0; left: 178px; width: 80%; background-color: #0A9B97; color: #fff; display: none; }
.sub_menu > li { width: 100%; height: 42px; line-height: 42px; padding: 0 10px; }
.sub_menu > li:hover { background-color: rgba(0, 0, 0, 0.3); }
.board { width: 400px; height: 100%; padding: 10px; }
.banner { height: 24%; }
.banner .b_tit { font-size: 17px; font-weight: 700; height: 32px; line-height: 32px; }
.banner .b_txt { font-size: 14px; }
.notice { height: 38%; }
.notice > ul { border: 1px solid #eee; border-top: none; }
.notice h2,.gallery h2{ font-size: 17px; height: 32px; line-height: 32px; font-weight: 700; width: 100px; text-align: center; background: #eee; }
.notice > ul > li { height: 38px; line-height: 38px; padding: 0 10px; }
.notice > ul > li:nth-of-type(odd) { background: #eee; }
.gallery { height: 38%; }
.gallery > ul> li > a > img { width: 185px; }
.gallery > ul> li > a > img:hover { animation: opa 1s ease-in 1; }
@keyframes opa{
0%{
opacity: 50%;
}
50%{
opacity: 80%;
}
100%{
opacity: 100%;
}
}
.slide { width: calc(100% - 200px - 400px); height: 100%; overflow: hidden; }
.slide .slide_wrap { width: 100%; height: 100%; }
.slide .slide_wrap >li { position: relative; }
.slide .slide_wrap >li>span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.3); color: #Fff; padding: 4px 10px; }
#footer { width: 100%; height: 100px; border-top: 1px solid #eee; background-color: #666; color: #fff;}
#footer .sns > li { margin-right: 10px; }
/*modal*/
.modal_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none;}
.modal_bg .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: auto; padding: 20px 30px; background-color: #fff;}
.modal_bg .modal h3 { font-size: 16px; height: 32px; line-height: 32px; }
.modal_bg .modal p { line-height: 28px; }
.modal_bg .modal button { display: block; width: 150px; margin: 0 auto; padding: 4px 0; }
.modal_bg .modal button:hover { background-color: #0A9B97; color: #fff; }
JQUERY
$(document).ready(function(){
//메뉴
$('.dep1').mouseover(function(){
$('.sub_menu').stop().hide();
$(this).children('ul').fadeIn();
$('.dep1 > a').removeClass('on');
$(this).children('a').addClass('on');
})
$('.gnb').mouseleave(function(){
$('.sub_menu').stop().hide();
$('.dep1 > a').removeClass('on');
$(this).children('ul').stop().fadeIn();
})
//모달창
$('.notice > ul >li:first-of-type').click(function(){
$('.modal_bg').fadeIn();
})
$('.modal button').click(function(){
$('.modal_bg').fadeOut();
})
//슬라이드( 위 아래 )
setInterval(function(){
let ih1 = $('#ih1').height();
let ih2 = ih1 + $('#ih2').height();
$('.slide_wrap').delay(3000);
$('.slide_wrap').animate({marginTop : '-' + ih1 + 'px'});
$('.slide_wrap').delay(3000);
$('.slide_wrap').animate({marginTop : '-' + ih2 +'px'});
$('.slide_wrap').delay(3000);
$('.slide_wrap').animate({ marginTop : 0 });
})
})'웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 코드 F-1 주식회사 기능건설 (1) | 2025.02.21 |
|---|---|
| 웹디자인기능사 실기 코드 E-4 철길마을 (0) | 2025.02.20 |
| 웹디자인기능사 실기 코드 D-4 리빙샵아울렛 (1) | 2025.02.17 |
| 웹디자인기능사 실기 코드 D-3 푸른마을 (1) | 2025.02.14 |
| 웹디자인기능사 실기 코드 A-1 JUST쇼핑몰 (1) | 2025.02.11 |