웹디자인기능사 실기 A-1 입니다.
과제명 : JUST 쇼핑몰
문제 PDF : https://devpiki.github.io/assets/web_design/plan/A-1.pdf
결과물
https://devpiki.github.io/assets/web_design/result/A_1/index.html
JUST 쇼핑몰
Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eius, recusandae mollitia molestiae ab excepturi, quibusdam id similique, dicta ipsa delectus adipisci! Laborum odio odit impedit voluptatem repellendus reprehenderit nostrum. X 닫기
devpiki.github.io
기본 주의 사항 : https://pikisvill.tistory.com/32
웹디자인 기능사 실기시험 준비시 주의사항
pdf 에 있는 배경색 및 기본텍스트색은 있을시 설정하시기 바랍니다 html, body{width: 100%; height: 100%;background-color: #f2f2f2;color: #333;} 주조색과 보조색이 있을시 디자인적으로 잘 구성하여 사용하..
pikisvill.tistory.com
소스
- index.html
<!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>JUST 쇼핑몰</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. Quis eius, recusandae mollitia molestiae ab excepturi, quibusdam id similique, dicta ipsa delectus adipisci! Laborum odio odit impedit voluptatem repellendus reprehenderit nostrum.</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="JUST 쇼핑몰"></a></h1>
<nav>
<ul class="clearfix">
<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="#">귀고리</a></li>
<li><a href="#">목걸이</a></li>
<li><a href="#">반지</a></li>
<li><a href="#">팔찌</a></li>
</ul>
</li>
</ul>
</nav>
</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="b01 on">공지사항</h1>
<ul class="b01">
<li><a href="#">공지사항 리스트 타이틀<span>2021-01-01</span></a></li>
<li><a href="#">공지사항 리스트 타이틀<span>2021-01-01</span></a></li>
<li><a href="#">공지사항 리스트 타이틀<span>2021-01-01</span></a></li>
<li><a href="#">공지사항 리스트 타이틀<span>2021-01-01</span></a></li>
<li><a href="#">공지사항 리스트 타이틀<span>2021-01-01</span></a></li>
</ul>
<h2 class="b02">갤러리</h1>
<ul class="b02">
<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="banner">
<h2 class="hidden-title">배너</h1>
<a href="#"><img src="./img/banner.png" alt="배너"></a>
</section>
<section class="direct">
<h2 class="hidden-title">바로가기</h1>
<a href="#"><img src="./img/direct.png" alt="바로가기"></a>
</section>
</div>
</main>
<footer id="footer">
<div class="logo"><img src="./img/logo2.png" alt="로고2"></div>
<div class="copy"><address><p>서울시 강남구 테헤란로 152 (역삼동 강남파이낸스센터) 대표이사 : 홍길동</p>
<p>사업자등록번호 : 111-22-333 | 통신판매업신고 : 강남 12345호</p></address></div>
<div class="sns">
<ul class="clearfix">
<li><a href="#"><img src="./img/SNS1.png" alt="SNS1"></a></li>
<li><a href="#"><img src="./img/SNS2.png" alt="SNS2"></a></li>
<li><a href="#"><img src="./img/SNS3.png" alt="SNS3"></a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
- ./css/style.css
@charset "UTF-8"; /*필수입니다. 꼭 작성하세요*/
/*=====리셋 관련 style=====*/
*{padding: 0; margin: 0; vertical-align: top;box-sizing: border-box;}
html, body{width: 100%; height: 100%; background-color: #ffffff; color: #222328;}
a{text-decoration: none; color: inherit;display: inline-block;width: 100%; height: 100%; text-align: center;}
ul, li{list-style-type: none;}
i, em, address{font-style: normal;}
table{border-collapse: collapse;}
/*float 관련해서 height 가 확장되지 않는 이슈관련된 class 입니다.*/
/*숙지하시면 나중에 업무에서 요긴하게 쓰실수 있습니다*/
.clearfix::before, .clearfix::after{
display: table;
content: "";
clear: both;
}
/*section 쪽에서 헤딩태그를 안보이게 하는 style 입니다.*/
/*꼭 이렇게 다 작성하실 필요는 없습니다만, 숙지하시면 나중에 업무에서 요긴하게 쓰실수 있습니다.*/
.hidden-title{width: 1px; height: 1px;z-index: -9999999; text-indent: -9999999px; overflow: hidden; position: absolute !important; margin: -1px; font-size: 1px;}
/*====모달 팝업 style=====*/
.modal{position: fixed; width: 100%; height: 100%;background-color: rgba(0,0,0,.3);z-index: 11;display: none;}
.modal .modal-pop{width: 500px; position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);background-color: #fff;}
.modal .modal-pop p{margin: 15px;}
.modal .modal-pop p:nth-child(1){font-weight: 700; font-size: 20px;}
.modal .modal-pop p:nth-child(2){}
.modal .modal-pop p:nth-child(3){text-align: right;}
.modal .modal-pop p:nth-child(3) button{height: 30px; padding: 0 10px;}
#wrap{width: 1200px; height: 100%;margin: 0 auto;}
#header{position: relative;width: 100%; height: 100px;}
#header h1{float: left; width: 200px; height: 100px;}
#header h1 a{}
#header h1 a img{width: 100%; margin-top: 30px;}
#header nav{float: right; margin-top: 30px;margin-right: 10px;width: 800px;position: relative;z-index: 1;}
#header nav>ul{position: absolute;top: 0;left: 0;}
#header nav li:hover > a{background-color: #4a4afa; color: #fff;}
#header nav>ul>li{float: left;width: 200px;}
#header nav>ul>li>a{height: 40px;line-height: 40px;}
#header nav ul.submenu{height: 170px;display: none;background-color: #fff;}
#header nav ul.submenu li{}
#header nav ul.submenu li a{height: 40px; line-height: 40px;}
#main{position: relative;width: 100%; height: 500px;}
#main .slide{position: relative;width: 100%;height: 300px; overflow: hidden;}
#main .slide ul{position: absolute;top: 0;left: 0;width: 100%; height: 900px;}
#main .slide ul li{}
#main .slide ul li a{}
#main .slide ul li a img{width: 1200px; height: 300px;}
#main .contents{position: relative;width: 100%; height: 200px;}
#main .contents section{float: left;width: 400px;height: 200px;}
#main .board h2{position: absolute;top: 0;height: 50px;font-size: 20px;width: 100px;line-height: 50px;text-align: center;background-color: #d3d3d3;color: #666;cursor: pointer;}
#main .board ul{position: absolute;top: 50px;left: 0;width: 400px;height: 150px;}
#main .board h2.b01{left: 0;}
#main .board ul.b01{}
#main .board ul.b01 li{}
#main .board ul.b01 li a{height: 30px; width: 100%;line-height: 30px;text-align: left;}
#main .board ul.b01 li a span{float: right;}
#main .board h2.b02{left: 100px;}
#main .board ul.b02{display: none;}
#main .board ul.b02 li{float: left; width: 33.33%;height: 100%;}
#main .board ul.b02 li a{}
#main .board ul.b02 li a img{margin-top: 25px;}
#main .board h2.on{background-color: #fff;color: #000;}
#main .banner{}
#main .banner h2{}
#main .banner a{}
#main .banner a img{width: 100%; height: 100%;}
#main .direct{}
#main .direct h2{}
#main .direct a{}
#main .direct a img{width: 100%; height: 100%;}
#footer{position: relative;width: 100%; height: 100px;}
#footer div{float: left;height: 100px;}
#footer div.logo{width: 200px;}
#footer div.logo img{margin-top: 30px;}
#footer div.copy{width: 800px;}
#footer div.copy address{height: 100%; width: 100%;line-height: 40px;}
#footer div.copy address p{}
#footer div.sns{width: 200px;}
#footer div.sns ul{}
#footer div.sns ul li{float: left;width: 33.33%; height: 100px;}
#footer div.sns ul li a{}
#footer div.sns ul li a img{width: 50px;margin-top: 25px;}
- ./js/action.js
$(document).ready(function(){
//상단 메뉴
$('#header nav > ul > li').mouseover(function(){
$('.submenu').stop().slideDown();
});
$('#header nav > ul > li').mouseout(function(){
$('.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 h2').click(function(){
$('#main .contents .board h2').removeClass('on');
$(this).addClass('on');
$('#main .contents .board ul').hide();
$(this).next().show();
});
//모달 팝업
$('#main .board ul.b01 li').eq(0).click(function(){
$('.modal').show();
});
$('.modal button').click(function(){
$('.modal').hide();
});
});'Web > 웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 B-2 (0) | 2021.11.16 |
|---|---|
| 웹디자인기능사 실기 B-1 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-4 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-3 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-2 (0) | 2021.11.16 |
댓글