웹디자인기능사 실기 B-3 입니다.
과제명 : 세계의 미술작품
문제PDF : https://devpiki.github.io/assets/web_design/plan/B-3.pdf
결과물
https://devpiki.github.io/assets/web_design/result/B_3/index.html
세계의 미술작품
Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quis dignissimos veniam quia aperiam temporibus architecto adipisci totam eum. Maxime rerum molestias amet libero. Ducimus quam libero eos esse saepe. X 닫기
devpiki.github.io
소스
<!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="./js/jquery-1.12.4.min.js"></script>
<script src="./js/action.js"></script>
</head>
<body>
<div class="modal">
<div class="modal-pop">
<p>Title</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet quis dignissimos veniam quia aperiam temporibus architecto adipisci totam eum. Maxime rerum molestias amet libero. Ducimus quam libero eos esse saepe.</p>
<p><button type="button">X 닫기</button></p>
</div>
</div>
<div id="wrap">
<header id="header">
<div class="container">
<h1><a href="#"><img src="./img/logo.png" alt="세계의 미술작품"></a></h1>
<nav class="clearfix">
<ul>
<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>
<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="#">1900년이전</a></li>
<li><a href="#">1900년대</a></li>
<li><a href="#">현대</a></li>
<li><a href="#">그외</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="container">
<div class="slide">
<ul>
<li><a href="#"><img src="./img/slide01.png" alt="슬라이드01"></a></li>
<li><a href="#"><img src="./img/slide02.png" alt="슬라이드02"></a></li>
<li><a href="#"><img src="./img/slide03.png" alt="슬라이드03"></a></li>
</ul>
</div>
<div class="contents">
<section class="board">
<h2 class="title on">공지사항</h2>
<ul>
<li><a href="#">공지사항타이틀01<span>2021-01-01</span></a></li>
<li><a href="#">공지사항타이틀02<span>2021-01-01</span></a></li>
<li><a href="#">공지사항타이틀03<span>2021-01-01</span></a></li>
<li><a href="#">공지사항타이틀04<span>2021-01-01</span></a></li>
<li><a href="#">공지사항타이틀05<span>2021-01-01</span></a></li>
</ul>
</section>
<section class="gall">
<h2 class="title">갤러리</h2>
<ul class="clearfix">
<li><a href="#"><img src="./img/gall01.png" alt="갤러리01"></a></li>
<li><a href="#"><img src="./img/gall02.png" alt="갤러리02"></a></li>
<li><a href="#"><img src="./img/gall03.png" alt="갤러리03"></a></li>
</ul>
</section>
<section class="banner">
<h2 class="hide-title">배너</h2>
<a href="#"><img src="./img/banner.png" alt="배너01"></a>
</section>
</div>
</main>
<footer id="footer">
<div class="container">
<div class="logo">
<img src="./img/logo2.png" alt="">
</div>
<div class="copy">
Copyright by 세계의 미술작품, All right reserved.
</div>
<div class="sns">
<ul>
<li><a href="#"><img src="./img/SNS1.png" alt="sns01"></a></li>
<li><a href="#"><img src="./img/SNS2.png" alt="sns02"></a></li>
<li><a href="#"><img src="./img/SNS3.png" alt="sns03"></a></li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>@charset "UTF-8";
*{margin: 0; padding: 0; vertical-align: top;box-sizing: border-box;}
html, body{width: 100%; height: 100%; background-color: #fff; color: #888;}
a{text-decoration: none;width: 100%; height: 100%; text-align: center;display: inline-block;color: inherit;}
ul, li{list-style-type: none;}
.clearfix::before, .clearfix::after{
content: "";clear: both;display: table;
}
.hide-title{width: 1px;height: 1px;position: absolute !important; margin: -1px; font-size: 1px;text-indent: -99999px; z-index: -99999;}
.modal{position: fixed;width: 100%; height: 100%; background-color: rgba(0,0,0,.3);z-index: 5;display: none;}
.modal .modal-pop{position: absolute;width: 500px; top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;}
.modal p{margin: 15px;}
.modal p:nth-child(1){font-size: 25px;font-weight: 900;}
.modal p:nth-child(2){}
.modal p:nth-child(3){text-align: right;}
.modal button{width: 100px;height: 40px;}
#wrap{width: 100%; height: 100%;}
.container{width: 1200px; margin: 0 auto;}
#header{width: 100%; height: 100px;position: relative;}
#header h1{float: left;width: 200px;height: 100px;}
#header h1 a{padding-top: 30px;}
#header h1 a img{width: 100%;}
#header nav{float: right;width: 800px;position: relative;margin: 30px 30px 0 0; }
#header nav>ul{position: absolute;z-index: 1;}
#header nav>ul>li{float: left; width: 200px;}
#header nav>ul>li>a{height: 40px; line-height: 40px;}
#header nav>ul>li:hover >a{background-color: #4A4948;color: #fff;}
#header nav ul.submenu{display: none;height: 180px;background-color: #fff;}
#header nav ul.submenu li{}
#header nav ul.submenu li a{height: 40px; line-height: 40px;}
#header nav ul.submenu li:hover a{background-color: #4A4948;color: #fff;}
#main{height: 500px;position: relative;display: block;}
#main .slide{width: 100%; height: 300px;overflow: hidden;position: relative;}
#main .slide ul{position: absolute;top: 0;left: 0;}
#main .slide ul li{}
#main .slide ul li a{}
#main .slide ul li a img{width: 1200px;height: 300px;}
#main .contents{width: 100%;height: 200px;}
#main .contents section{float: left;width: 400px;height: 200px;}
#main .contents h2.title{background-color: #efefef;color: #c6c6c6;font-size: 20px;width: 100px;height: 40px;line-height: 40px;text-align: center;}
#main .contents h2.on{background-color: #fff; color: #4A4948;}
#main .contents .board{}
#main .contents .board ul{width: 100%;}
#main .contents .board ul li{height: 32px;line-height: 32px;}
#main .contents .board ul li a{text-align: left;}
#main .contents .board ul li a span{float: right;}
#main .contents .gall{}
#main .contents .gall ul{width: 100%;}
#main .contents .gall ul li{float: left; width: 33.33%;}
#main .contents .gall ul li a{padding-top: 30px;}
#main .contents .gall ul li a img{width: 100px;height: 100px;}
#main .contents .banner{}
#main .contents .banner a{}
#main .contents .banner a img{width: 100%; height: 100%;}
#footer{width: 100%; height: 100px;position: relative;}
#footer .logo{width: 200px;float: left;height: 100%;}
#footer .logo img{margin-top: 30px;}
#footer .copy{width: 800px;float: left;height: 100%;line-height: 100px;text-align: center;}
#footer .sns{width: 200px;float: left;height: 100%;}
#footer .sns ul{}
#footer .sns ul li{float: left;width: 33.33%;padding-top: 15px;}
#footer .sns ul li a{padding: 5px;}
#footer .sns ul li a img{width: 100%;}$(document).ready(function(){
$('#header nav>ul>li').mouseover(function(){
$(this).find('.submenu').stop().slideDown();
});
$('#header nav>ul>li').mouseout(function(){
$(this).find('.submenu').stop().slideUp();
});
var idx = 0;
setInterval(function(){
idx -= 300;
if(idx<-600)idx=0;
$('#main .slide ul').animate({top:idx+'px'},1000);
}, 3000);
$('#main .contents .board ul li').eq(0).find('a').click(function(){
$('.modal').show();
});
$('.modal button').click(function(){
$('.modal').hide();
});
});
'Web > 웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 C-1 (0) | 2021.11.16 |
|---|---|
| 웹디자인기능사 실기 B-4 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-2 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-1 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-4 (0) | 2021.11.16 |
댓글