이전까지의 공개도면은 실제로 없는 단체나 행사의 홈페이지 index 페이지를 디자인하는거였다면
해운대빛축제는 실제로 있는 행사더라고요?? ㅋㅋㅋㅋ
큐넷에서 시험지만 제공하지 이미지나 텍스트는 주지 않기 때문에.. 이번에도 제 맘대로 만들어봤습니다 깔깔.
(배너는 정말 대충 만듦..)
※ 맥에서 볼 때랑 윈도우에서 볼 때랑 폰트 이미지가 좀 다르네욤... (집에선 맥북으로 하고 회사에선 윈도우라 ^^;)
HTML
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>해운대빛축제</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="popup">
<div class="popup_title"><a>공지사항</a></div>
<div class="popup_text">
코로나19바이러스의 확산 방지를 위하여<br>
부득이하게 해운대빛축제 개장일이<br>
연장되었음을 안내드립니다.<br>
변경 전 : 2020년 3월 23일<br>
변경 후 : 2020년 5월 4일<br>
관람객 여러분의 많은 양해 부탁드립니다.<br>
</div>
<div class="popup_bottom">
<input type="button" class="팝업닫기" value="닫기">
</div>
</div>
<div id="index_box">
<!---왼쪽메뉴--->
<div id="index_left">
<header>
<!---로고--->
<div class="logo_box"><a href="index.html"><img src="img/logo.png" alt="로고"></a></div>
<!---메뉴네비게이션--->
<div class="menu">
<ul>
<li>
<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>
<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>
<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>
<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>
</div>
</header>
</div>
<!---왼쪽메뉴끝--->
<!---우측메뉴시작--->
<div id="index_right">
<!---이미지 슬라이드 시작--->
<section>
<div id="slide_box">
<ul>
<li><a href="#"><img src="img/slide01.jpg" alt="슬라이드1"></a></li>
<li><a href="#"><img src="img/slide02.jpg" alt="슬라이드2"></a></li>
<li><a href="#"><img src="img/slide03.jpg" alt="슬라이드3"></a></li>
</ul>
</div>
</section>
<!---이미지 슬라이드 끝--->
<!---컨텐츠 시작--->
<section>
<div id="contents_box">
<!---탭메뉴 시작--->
<div class="tab_menu">
<ul class="tab_button">
<li><a>공지사항</a></li>
<li><a>갤러리</a></li>
</ul>
<div class="content">
<div class="tab1">
<ul>
<li><a class="팝업버튼">여기를 누르면 팝업이 나옵니다.</a><span>20-03-24</span></li>
<li><a>빛축제 후원 기업 모집</a><span>20-03-21</span></li>
<li><a>코로나19 전염 방지 자체 소독 실시</a><span>20-03-06</span></li>
<li><a>2020 해운대빛축제 개최 안내</a><span>20-02-15</span></li>
</ul>
</div>
<div class="tab2">
<ul>
<li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>
<li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>
<li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>
</ul>
</div>
</div>
</div>
<!---탭메뉴 끝--->
<!---배너시작--->
<div class="banner"><a href="#"><img src="img/banner.jpg" alt="배너"></a></div>
<!---배너끝--->
<!---바로가기시작--->
<div class="banner"><a href="#"><img src="img/direct.jpg" alt="바로가기"></a></div>
<!---바로가기끝--->
</div>
</section>
<!---컨텐츠 끝--->
<!---푸터 시작--->
<footer>
<div id="footer_box">
<div class="bottom_logo"><a href="#"><img src="img/logo_mono.png" alt="하단로고"></a></div>
<div class="footer_right">
<div class="bottom_menu">
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">광고안내</a></li>
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">저작권</a></li>
<li><a href="#">이용안내</a></li>
<li><a href="#">고객센터(033-0000-0000)</a></li>
</ul>
</div>
<div class="copyright">
<a>Copyright(c) 2019, 웹디자인기능사 All Right Reserved.</a>
</div>
</div>
</div>
</footer>
<!---푸터끝--->
</div>
<!---우측메뉴끝--->
</div>
<script type="text/javascript" src="js/lightfestival.js"></script>
</body>
</html>
CSS
@charset "UTF-8";
*{
margin: 0;
padding: 0;
text-decoration: none;
font-size: 1rem;
list-style: none;
color: #222328;
font-family: monospace;
}
body{
background: #ffffff;
}
/***************팝업시작***************/
#popup{
display: none;
top: 180px;
left: 300px;
position: absolute;
width: 400px;
height: 280px;
background: white;
border: 5px solid darkslateblue;
z-index: 3;
}
.popup_title{
width: 100%;
height: 30px;
background-color: darkslateblue
}
.popup_title a{
color: white;
font-size: 1.2rem;
line-height: 26px;
margin: 0 10px;
}
.popup_text{
height: 180px;
margin: 10px;
line-height: 30px;
}
.팝업닫기{
float: right;
margin-right: 10px;
padding: 5px 20px;
background: dimgrey;
color: white;
cursor: pointer;
}
/***************팝업끝***************/
/***************시작***************/
#index_box{
position: relative;
width: 1000px;
height: 650px;
}
/***************왼쪽메뉴시작***************/
#index_left{
float: left;
width: 240px;
height: 100%;
background-color: steelblue;
}
/*-----로고시작-----*/
.logo_box{
width: 200px;
height: 40px;
padding: 20px;
}
/*-----로고끝-----*/
/*-----메뉴네비게이션시작-----*/
.menu{
width: 200px;
margin: 20px;
border-top: 3px solid white;
border-left: 3px solid white;
border-right: 3px solid white;
}
.menu>ul{
text-align: center;
}
.menu>ul>li>a{
display: block;
padding: 10px 0;
font-size: 1.2rem;
font-weight: 800;
color: darkslategrey;
background: powderblue;
border-bottom: 3px solid white;
}
.sub_menu{
display: none;
padding: 5px 0;
background: white;
}
.sub_menu>li>a{
display: block;
padding: 5px 0;
}
.menu>ul>li:hover>a{
background: darkslateblue;
color: white;
}
.sub_menu>li>a:hover{
background: darkslategrey;
color: white;
}
/*-----메뉴네비게이션끝-----*/
/***************왼쪽메뉴끝***************/
/***************인덱스우측***************/
#index_right{
float: right;
width: 760px;
height: 100%;
}
/***************이미지슬라이드시작***************/
#slide_box{
width: 760px;
height: 350px;
}
#slide_box>ul{
font-size:0;
}
#slide_box>ul>li{
position: absolute;
}
/***************이미지슬라이드끝***************/
/***************컨텐츠시작***************/
#contents_box{
height: 200px;
background: darkslateblue;
}
/*-----탭메뉴시작-----*/
.tab_menu{
float: left;
width: 340px;
height: 180px;
margin: 10px;
}
.tab_button{
display: inline;
text-align: center;
font-size: 0;
}
.tab_button>li{
display: inline-block;
cursor: pointer;
background: darkgrey;
}
.tab_button>li>a{
display: block;
padding: 5px 15px;
width: 60px;
}
.tab_button>li:hover,
.tab_button>li:hover::after,
.tab_button>li:focus,
.tab_button>li:focus::after{
background: white;
}
.content{
width: 320px;
height: 130px;
background: white;
padding: 10px;
}
.tab1{
width: 320px;
height: 130px;
}
.tab1>ul>li>a{
font-size: 0.9rem;
color: dimgrey;
float: left;
line-height: 32px;
cursor: pointer;
}
.tab1>ul>li>span{
font-size: 0.9rem;
color: dimgrey;
float: right;
line-height: 32px;
}
.tab1>ul>li:hover>a{
font-weight: 800;
color: #222328;
}
.tab2{
width: 320px;
height: 130px;
}
.tab2>ul{
display:flex;
justify-content: space-between;
padding: 10px 0;
}
.tab2>ul>li>a>img{
width: 100px;
height: 110px;
}
.tab2>ul>li:hover{
opacity: 0.7;
}
/*-----탭메뉴끝-----*/
/*-----배너+바로가기시작-----*/
.banner{
float: left;
width: 200px;
height: 100%;
}
.banner img{
width: 180px;
height: 180px;
margin: 10px;
}
/*-----배너+바로가기끝-----*/
/***************컨텐츠끝***************/
/***************푸터시작***************/
#footer_box{
height: 100px;
background: #222328;
}
/*-----하단좌측시작-----*/
.bottom_logo{
float: left;
width: 240px;
height: 40px;
text-align: center;
padding: 30px 0;
}
/*-----하단좌측끝-----*/
/*-----하단우측시작-----*/
.footer_right{
float: right;
width: 500px;
}
/*-----하단메뉴시작-----*/
.bottom_menu>ul{
display: inline;
}
.bottom_menu>ul>li{
display: inline-block;
margin: 20px 0;
}
.bottom_menu>ul>li>a{
color: grey;
font-size: 0.9rem;
}
.bottom_menu>ul>li:hover>a{
color: white;
}
/*-----하단메뉴끝-----*/
/*-----카피라이트시작-----*/
.copyright>a{
color: lightblue;
font-size: 0.9rem;
}
/*-----카피라이트끝-----*/
/*-----하단우측끝-----*/
/***************푸터끝***************/
/***************끝***************/Java Script
//메뉴슬라이드
$('.menu>ul>li').hover(function(){
$(this).children('.sub_menu').stop().slideToggle();
});
//이미지 페이드인아웃
$('#slide_box>ul>li:gt(0)').hide();
setInterval(function(){
$('#slide_box > ul > li:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slide_box>ul');
}, 3000);
//탭메뉴
$('.content').children().hide();
$('.tab1').fadeIn();
$('.tab_button>li:first').css('background','white'); //모든탭메뉴내용숨기고 공지사항버튼만 색상변경
$('.tab_button>li:last').click(function(){
$('.tab_button>li:first').css('background','darkgrey');
$(this).css('background','white');
$('.tab1').hide();
$('.tab2').fadeIn();
}); //두번째 탭버튼 눌렀을 때
$('.tab_button>li:first').click(function(){
$('.tab_button>li:last').css('background','darkgrey');
$(this).css('background','white');
$('.tab2').hide();
$('.tab1').fadeIn();
}); //첫번째 탭버튼 눌렀을 때
//팝업
$('.팝업버튼').click(function(){
$('#popup').show();
});
$('.팝업닫기').click(function(){
$('#popup').hide();
});
'꿀팁 공유 > └ 웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 공개도면 C-3 : 남도맛기행축제 (2) | 2020.04.03 |
|---|---|
| 웹디자인기능사 공개문제 C-2 : 부여가을연꽃축제 (0) | 2020.04.01 |
| 웹디자인기능사 공개도면 A-4 : 유진건설 (0) | 2020.03.26 |
| 웹디자인기능사 공개도면 A-3 : 강원천문대 (1) | 2020.03.25 |
| 웹디자인기능사 공개도면 A-2 : Green 복지재단 (0) | 2020.03.24 |
댓글