웹디자인기능사 실기 A-4 입니다.
과제명 : 유진건설
문제PDF : https://devpiki.github.io/assets/web_design/plan/A-4.pdf
결과물
https://devpiki.github.io/assets/web_design/result/A_4/index.html
유진건설
Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem possimus fugiat voluptatum et distinctio ab, in suscipit a sit animi laboriosam accusantium ut aperiam nesciunt alias porro mollitia minus labore. 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. Autem possimus fugiat voluptatum et distinctio ab, in suscipit a sit animi laboriosam accusantium ut aperiam nesciunt alias porro mollitia minus labore.</p>
<p><button type="button">X 닫기</button></p>
</div>
</div>
<div id="wrap">
<header id="header">
<h1><a href="#"><img src="./img/logo.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>
</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>
</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>
</header>
<main id="main">
<div class="slide">
<ul>
<li><a href="#"><img src="./img/slide01.png" alt="슬라이드1"></a></li>
<li><a href="#"><img src="./img/slide02.png" alt="슬라이드2"></a></li>
<li><a href="#"><img src="./img/slide03.png" alt="슬라이드3"></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="갤러리1"></a></li>
<li><a href="#"><img src="./img/gall02.png" alt="갤러리2"></a></li>
<li><a href="#"><img src="./img/gall03.png" alt="갤러리3"></a></li>
</ul>
</section>
<section class="direct">
<h2 class="hide-tit">바로가기</h2>
<a href="#"><img src="./img/direct.png" alt="바로가기"></a>
</section>
</div>
</main>
<footer id="footer">
<div class="footer-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>
</footer>
</div>
</body>
</html>@charset "UTF-8";
*{padding: 0; margin: 0;vertical-align: top;box-sizing: border-box;}
html, body{width: 100%; height: 100%;background-color: #f2f2f2;color: #333;}
a{text-decoration: none;color: inherit;width: 100%;height: 100%;text-align: center;display: inline-block;}
ul, li{list-style-type: none;}
.clearfix::before,.clearfix::after{
content: "";
clear: both;
display: table;
}
.hide-tit{width: 1px;height: 1px;margin: -1px;position: absolute;text-indent: -99999;overflow: hidden;z-index: -99999;font-size: 1px;}
.modal{position: fixed;width: 100%; height: 100%;z-index: 1;background-color: rgba(0,0,0,.3);display: none;}
.modal .modal-pop{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 500px;background-color: #f2f2f2;}
.modal .modal-pop p{padding: 5px 10px;}
.modal .modal-pop p:nth-child(1){}
.modal .modal-pop p:nth-child(2){}
.modal .modal-pop p:nth-child(3){text-align: right;}
.modal .modal-pop button{}
#wrap{width: 1200px;margin: 0 auto;}
#header{position: relative;width: 100%;height: 100px;}
#header h1{float: left;width: 200px; height: 100%;}
#header h1 a{}
#header h1 a img{width: 100%;margin-top: 30px;}
#header nav{float: right; position: relative;width: 800px;margin: 60px 20px 0 0;}
#header nav>ul{position: absolute;top: 0;left: 0;width: 100%;z-index: 2;}
#header nav li{width: 200px;height: 40px;line-height: 40px;}
#header nav>ul>li{float: left;}
#header nav>ul>li>a{}
#header nav>ul>li:hover>a{background-color: #ff5050;color: #fff;}
#header nav ul.submenu{background-color: #ff5050;color: #fff;display: none;}
#header nav ul.submenu li{}
#header nav ul.submenu li a{}
#header ul.submenu li:hover a{background-color: #f2f2f2;color: #333;}
#header .nav-bg{background-color: #ff5050;color: #fff;position: absolute;top: 100px;left: 0;width: 100%;z-index: 1;height: 120px;display: none;}
#main{position: relative;width: 100%;height: 500px;}
#main .slide{position: relative;width: 100%;height: 300px;overflow: hidden;}
#main .slide ul{}
#main .slide ul li{}
#main .slide ul li a{}
#main .slide ul li a img{width: 100%;height: 100%;}
#main .contents{position: relative;width: 100%;height: 200px;}
#main .contents section{float: left;width: 400px;height: 100%;}
#main .contents section h2.title{font-size: 20px;width: 100px; height: 40px;text-align: center;line-height: 40px;background-color: #d0d0d0;
color: #eee;}
#main .contents section h2.on{background-color: #f2f2f2;color: #ff5050;}
#main .contents .board{}
#main .contents .board ul{width: 100%; height: 160px;}
#main .contents .board ul li{height: 31px;line-height: 31px;}
#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%; height: 160px;}
#main .contents .gall ul li{float: left;width: 33.33%;}
#main .contents .gall ul li a{}
#main .contents .gall ul li a img{width: 100px;height: 100px;margin-top: 30px;}
#main .contents .direct{}
#main .contents .direct a{}
#main .contents .direct a img{width: 100%; height: 100%;}
#footer{position: relative;width: 100%;height: 100px;}
#footer .footer-menu{position: absolute;top: 0;left: 0;width: 1000px;height: 50px;line-height: 50px;}
#footer .footer-menu ul{}
#footer .footer-menu ul li{float: left;width: 33.33%;}
#footer .footer-menu ul li a{}
#footer .copy{position: absolute;top: 50px;left: 0;width: 1000px;height: 50px;line-height: 50px;text-align: center;}
#footer .familly{position: absolute;top: 0;left: 1000px;width: 200px;height: 100px;line-height: 100px;}
#footer .familly select{height: 30px;width: 150px;margin-top: 35px;}$(document).ready(function(){
$('#header nav>ul>li').mouseover(function(){
$('#header ul.submenu').stop().slideDown();
$('#header .nav-bg').stop().slideDown();
});
$('#header nav>ul>li').mouseout(function(){
$('#header ul.submenu').stop().slideUp();
$('#header .nav-bg').stop().slideUp();
});
//#main .slide ul li a img
var idx = 0;
setInterval(function(){
$('#main .slide ul li').eq(idx).fadeOut();
idx += 1;
if(idx>2)idx = 0;
$('#main .slide ul li').eq(idx).fadeIn();
}, 3000);
$('#main .contents .board ul li').eq(0).find('a').click(function(){
$('.modal').show();
});
$('.modal button').click(function(){
$('.modal').hide();
});
});'Web > 웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 B-2 (0) | 2021.11.16 |
|---|---|
| 웹디자인기능사 실기 B-1 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-3 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-2 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-1 (0) | 2021.11.16 |
댓글