웹디자인기능사 실기 B-4 입니다.
과제명 : 산업대학교
문제PDF : https://devpiki.github.io/assets/web_design/plan/B-4.pdf
결과물
https://devpiki.github.io/assets/web_design/result/B_4/index.html
산업대학교
Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium accusamus officiis distinctio officia ipsam ut veritatis id magnam delectus reprehenderit fugit, deleniti excepturi. Porro neque magni sint similique? Officiis, eius. 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. Praesentium accusamus officiis distinctio officia ipsam ut veritatis id magnam delectus reprehenderit fugit, deleniti excepturi. Porro neque magni sint similique? Officiis, eius.</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/logo2.png" alt="산업대학교"></a></h1>
<nav>
<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>
</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>
<div class="nav-bg"></div>
</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>
<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="foot-menu">
<ul class="clearfix">
<li><a href="#">법적고지</a></li>
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">개인정보처리방침</a></li>
</ul>
</div>
<div class="copy">
copyright© by 산업대학교 all rights reserved.
</div>
<div class="familly">
<select>
<option>패밀리사이트</option>
<option>네이버</option>
<option>다음</option>
<option>티스토리</option>
</select>
</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: #222328;}
a{text-decoration: none; color: inherit;width: 100%; height: 100%;display: inline-block;text-align: center;}
ul, li{list-style-type: none;}
.clearfix::before, .clearfix::after{
content: "";clear: both;display: table;
}
.hide-title{width: 1px; height: 1px;margin: -1px;font-size: 1px;
position: absolute !important; overflow: hidden;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;top: 50%;left: 50%;width: 500px;
transform: translate(-50%, -50%);background-color: #fff;
}
.modal p{margin: 15px;}
.modal p:nth-child(1){font-size: 20px;font-weight: 900;}
.modal p:nth-child(2){}
.modal p:nth-child(3){text-align: right;}
.modal button{width: 60px;height: 30px;}
#wrap{width: 100%; height: 100%;}
.container{width: 1200px; margin: 0 auto;position: relative;height: 100%;}
#header{height: 100px;position: relative;}
#header h1{float: left; width: 200px; height: 100%;}
#header h1 a{padding-top: 30px;}
#header h1 a img{width: 100%;}
#header nav{position: relative;width: 800px;z-index: 3;margin: 60px 20px 0 0;float: right;}
#header nav>ul{position: absolute;width: 100%;}
#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: #876f6f; color: #fff;}
#header nav ul.submenu{background-color: #876f6f; color: #fff;display: none;}
#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: #fff; color: #222328;}
#header .nav-bg{background-color: #876f6f;position: absolute;
top: 100px;left: 0;width: 100%; height: 170px;z-index: 2;display: none;
}
#main{height: 500px;position: relative;display: block;}
#main .slide{width: 100%;height: 300px;position: relative;overflow: hidden;}
#main .slide ul{position: absolute;top: 0;left: 0;width: 3600px;}
#main .slide ul li{float: left;width: 1200px;}
#main .slide ul li a{}
#main .slide ul li a img{width: 100%; height: 100%;}
#main .contents{width: 100%;height: 200px;position: relative;}
#main .contents section{float: left;width: 400px;height: 100%;}
#main .contents h2.title{width: 100px; height: 40px;font-size: 20px;font-weight: 900;background-color: #eee;color: #cacaca;text-align: center;line-height: 40px;}
#main .contents h2.on{background-color: #fff;color: #222328;}
#main .board{}
#main .board ul{width: 100%;}
#main .board ul li{width: 100%;height: 32px;}
#main .board ul li a{text-align: left;}
#main .board ul li a span{float: right;}
#main .gall{}
#main .gall ul{}
#main .gall ul li{float: left; width: 33.33%;}
#main .gall ul li a{padding-top: 30px;}
#main .gall ul li a img{width: 100px;height: 100px;}
#main .banner{}
#main .banner a{}
#main .banner a img{width: 100%; height: 100%;}
#footer{height: 100px;position: relative;}
#footer .foot-menu{position: absolute;top: 0;left: 0;width: 1000px;height: 50px;line-height: 50px;}
#footer .foot-menu ul{}
#footer .foot-menu ul li{float: left;width: 33.33%;}
#footer .foot-menu ul li a{}
#footer .copy{position: absolute;top: 50px;left: 0;width: 1000px;height: 50px;text-align: center;line-height: 50px;}
#footer .familly{position: absolute;top: 0;left: 1000px;width: 200px;height: 100px;text-align: center;padding-top: 35px;}
#footer .familly select{width: 120px;height: 30px;}$(document).ready(function(){
$('#header nav>ul>li').mouseover(function(){
$('#header nav ul.submenu').stop().slideDown();
$('#header .nav-bg').stop().slideDown();
});
$('#header nav>ul>li').mouseout(function(){
$('#header nav ul.submenu').stop().slideUp();
$('#header .nav-bg').stop().slideUp();
});
var idx = 0;
setInterval(function(){
idx -= 1200;
if(idx<-2400) idx = 0;
$('#main .slide ul').animate({left:idx+'px'},1000);
}, 3000);
$('#main .board ul li').eq(0).click(function(){
$('.modal').show();
});
$('.modal button').click(function(){
$('.modal').hide();
});
});
'Web > 웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 C-2 (0) | 2021.11.16 |
|---|---|
| 웹디자인기능사 실기 C-1 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-3 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-2 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-1 (0) | 2021.11.16 |
댓글