공개문제 A1 문제풀이
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="utf-8">
<title>JUST 쇼핑몰</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="modal">
<div class="modalwrap">
<h1>
😊이번달 고객감사 이벤트 진행중😊
</h1>
<p>
이번달 고객감사 이벤트 진행중입니다.<br>
회원님들은 저의 홈페이지 이벤트 페이지에
오셔서 해당 이벤트를 확인해 주세요.<br>
고객을 위해 항상 최선을 다하는 JUST 쇼핑몰입니다.
</p>
<a href="#">닫기</a>
</div>
</div>
<div class="wrap">
<header>
<div class="logo1">
<img alt src="images/logo/logo1.svg">
</div>
<nav>
<ul class="mainmenu">
<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>
<div class="slide">
<img alt="블라우스" class="slide1" src="images/slide/slide1.png">
<img alt="자켓" class="slide2" src="images/slide/slide2.png">
<img alt="바지" class="slide3" src="images/slide/slide3.png">
<h1 class="slidetext1">
최첨단 쇼핑몰 JUST !
</h1>
<h1 class="slidetext2">
봄맞이 고객 이벤트 특가 할인
</h1>
<h1 class="slidetext3">
교통 중심지 JUST !, 대한민국 최대 규모 쇼핑몰 JUST !
</h1>
</div>
<div class="contents">
<div class="c1">
<input type="radio" id="noti" name="tab" checked>
<input type="radio" id="gall" name="tab">
<label class="notilabel" for="noti">공지사항</label>
<label class="galllabel" for="gall">갤러리</label>
<div class="noticon">
<p class="jul">
<a href="#modal"><span><b>1. 이번달 고객감사 이벤트 진행중</b></span></a>
</p>
<p class="jul">
<span>2. JUST 쇼핑몰 대박 쿠폰 이벤트</span>
</p>
<p class="jul">
<span>3. 반품, 환불에 대한 약정 변경</span>
</p>
<p class="jul">
<span>4. 4월 15일 오후 23:00 ~ 24:00 서버작업으로 홈페이지 중지</span>
</p>
</div>
<div class="gallcon">
<img alt="모자" class="contents1" src="images/contents/contents1.png">
<img alt="양말" class="contents2" src="images/contents/contents2.png">
<img alt="신발" class="contents3" src="images/contents/contents3.png">
</div>
</div>
<div class="c3">
<img alt="감사" class="banner1" src="images/contents/banner.png">
<img alt="star" class="star1" src="images/star.png">
<h1 class="banner1">365일</h1>
<h1 class="banner2">매일매일 감사이벤트</h1>
</div>
<div class="c4">
<img alt="꽃" class="flower" src="images/contents/flower.png">
<ul class="shortcut">
<li>
<a href="#">감사이벤트</a>
</li>
<li>
<a href="#">고객정보</a>
</li>
<li>
<a href="#">할인정보</a>
</li>
</ul>
</div>
</div>
<footer>
<div class="logo2">
<img alt src="images/logo/logo2.svg">
</div>
<div class="copyright">
<p class="cr">44538 울산광역시 중구 종가로 345 JUST 쇼핑몰<br>Copyrightⓒ2017 All rights reserved.
</p>
</div>
<div class="sns">
<img alt="youtube" class="sns1" src="images/sns/YouTube.png">
<img alt="twitter" class="sns2" src="images/sns/Twitter.png">
<img alt="share" class="sns3" src="images/sns/Share-This.png">
</div>
</footer>
</div>
</body>
</html>
style.css
@charset "utf-8";
* {
box-sizing:border-box;
margin:0; padding:0;
}
ul {
list-style-type:none;
}
a {
text-decoration:none;
}
input {
display:none;
}
div#modal {
display:none;
z-index:100;
position:fixed;
width:100%; height:100%;
background:#00000080;
}
#modal:target {
display:block;
}
div.modalwrap {
position:relative;
width:600px; height:400px;
margin:100px auto;
background:#f2cece;
border-radius:30px;
}
div.modalwrap > h1 {
width:600px; height:80px;
padding-top:20px;
color:#26010b;
text-align:center;
background:#f2acac;
border-radius:30px 30px 0 0;
}
div.modalwrap > p {
color:#26010b;
padding:45px;
font-size:20px;
line-height:50px;
text-align:center;
}
div.modalwrap > a {
position:absolute;
display:block;
width:44px; height:28px;
right:22px; bottom:20px;
background:#f2f2f2;
color:#26010b;
text-align:center;
line-height:25px;
border:2px solid #26010b55;
border-radius:10px;
transition:0.2s;
}
div.modalwrap > a:hover {
background:#E78895;
color:#FFF7F1;
box-shadow:1px 2px 2px #888;
}
div.wrap {
width:1200px; height:700px;
margin:0 auto;
}
header{
background:#fae9e8;
width:1200px; height:100px;
}
div.logo1 {
position:relative;
float:left;
width:300px; height:100px;
}
div.logo1 > img {
position:absolute;
z-index:15;
left:45px; top:25px;
width:250px; height:50px;
animation:logoani1 4s 1s infinite;
}
nav {
position:relative;
float:left;
width:900px; height:100px;
background:#fae9e8;
}
ul.mainmenu {
z-index:10;
position:absolute;
right:20px; top:30px;
}
ul.mainmenu > li {
float:left;
}
ul.mainmenu > li > a {
display:block;
width:140px; height:70px;
background:#fad1d9;
color:#000;
font-weight:bold;
font-size:22px;
line-height:70px;
text-align:center;
text-shadow:1px 0 1px #fff, 0 1px 1px #fff, -1px 0 1px #fff, 0 -1px 1px #fff;
}
ul.mainmenu > li:nth-child(1) > a {
border-radius:50px 0 0 0;
color:#f27999;
}
ul.mainmenu > li:nth-child(1):hover > a {
border-bottom:10px solid #f27999;
}
ul.mainmenu > li:nth-child(2) > a {
color:#7ea672;
}
ul.mainmenu > li:nth-child(2):hover > a {
border-bottom:10px solid #7ea672;
}
ul.mainmenu > li:nth-child(3) > a {
color:#a991e8;
}
ul.mainmenu > li:nth-child(3):hover > a {
border-bottom:10px solid #a991e8;
}
ul.mainmenu > li:nth-child(4) > a {
color:#f2a30f;
padding-right:5px;
border-radius:0 50px 0 0;
}
ul.mainmenu > li:nth-child(4):hover > a {
border-bottom:10px solid #f2a30f;
}
ul.mainmenu > li:hover > a {
height:80px;
text-shadow:2px 0 2px #fff, 0 2px 2px #fff, -2px 0 2px #fff, 0 -2px 2px #fff;
}
ul.submenu > li {
}
ul.submenu > li > a {
overflow:hidden;
display:block;
width:140px; height:0px;
background:#fff;
opacity:70%;
color:#333;
font-size:16px;
line-height:38px;
text-align:center;
transition:all 0.5s;
}
ul.mainmenu:hover ul.submenu a {
height:40px;
}
ul.submenu > li > a:hover {
background:#fd8a8aff;
color:#fff;
text-shadow:2px 1px #333;
}
div.slide {
position:relative;
width:1200px; height:300px;
overflow:hidden;
}
div.slide > img {
position:absolute;
left:0; top:0;
}
img.slide1 {
animation:img1 9s infinite;
}
img.slide2 {
animation:img2 9s infinite;
}
img.slide3 {
animation:img3 9s infinite;
}
div.slide > h1 {
position:absolute;
left:600px; top:150px;
font-size:37px;
transform:translate(-50%,-50%);
opacity:0;
color:#fff;
text-shadow:1px 0 1px #333, 0 1px 1px #333, -1px 0 1px #333, 0 -1px 1px #333;
}
div.slide > h1.slidetext1 {
position:absolute;
left:600px; top:100px;
animation:anitext1 9s infinite;
}
div.slide > h1.slidetext2 {
position:absolute;
left:600px; top:150px;
animation:anitext2 9s infinite;
}
div.slide > h1.slidetext3 {
position:absolute;
left:650px; top:200px;
width:990px;
animation:anitext3 9s infinite;
}
div.contents {
width:1200px; height:200px;
background:#fdfdbd65;
}
div.c1 {
position:relative;
float:left;
width:400px; height:200px;
}
input#noti {
}
input#gall {
}
label.notilabel {
display:block;
position:absolute;
left:18px; top:10px;
width:100px; height:40px;
background:#f6c90e;
color:##81f18;
font-size:17px;
line-height:38px;
text-align:center;
border:2px solid #734439;
border-bottom:0px solid #734439;
border-radius:8px 8px 0 0;
}
label.galllabel {
display:block;
position:absolute;
left:116px; top:10px;
width:100px; height:40px;
background:#f6c90e;
color:#81f18;
font-size:17px;
line-height:38px;
text-align:center;
border:2px solid #734439;
border-bottom:0px solid #734439;
border-radius:8px 8px 0 0;
}
input#noti:checked ~ label.notilabel {
position:absolute;
top:7px;
height:42.5px;
z-index:10;
background:#fdffab;
line-height:42px;
}
input#gall:checked ~ label.galllabel {
position:absolute;
top:7px;
height:42.5px;
z-index:10;
background:#fdffab;
line-height:42px;
}
div.noticon {
display:none;
padding-top:12px;
position:absolute;
left:0px; top:48px;
width:390px; height:145px;
background:#fdffab;
border:2px solid #734439;
border-radius:8px 8px 8px 8px;
}
p.jul {
height:30px;
margin-left:30px;
}
p.jul span {
color:#734439;
font-size:12px;
line-height:28px;
border-bottom:1px dotted #2a4f1e;
}
div.gallcon {
display:none;
position:absolute;
left:0; top:48px;
width:390px; height:145px;
background:#fdffab;
border:2px solid #734439;
border-radius:8px 8px 8px 8px;
}
input#noti:checked ~ div.noticon {
display:block;
}
input#gall:checked ~ div.gallcon {
display:block;
}
div.gallcon img {
position:absolute;
border:1px solid #000;
}
div.gallcon img.contents1 {
left:20px; top:25px;
}
div.gallcon img.contents2 {
left:145px; top:25px;
}
div.gallcon img.contents3 {
left:270px; top:25px;
}
div.c3 {
position:relative;
float:left;
width:400px; height:200px;
}
h1.banner1{
position:absolute;
left:90px; top:20px;
height:108px;
color:#f2f2f2;
font-size:85px;
text-shadow:-2px 0 #000;
border-bottom:5px dashed #da363f;
animation:anibanner1 2s infinite;
}
h1.banner2{
position:absolute;
left:109px; top:130px;
color:#f2f2f2;
font-size:20px;
text-shadow:-1px 0 #000;
}
img.star1 {
width:35px; height:35px;
position:absolute;
left:320px; top:15px;
z-index:50;
animation:star1 2s infinite;
}
div.c4 {
position:relative;
float:left;
width:400px; height:200px;
}
img.flower {
position:absolute;
z-index:-15;
}
ul.shortcut {
}
ul.shortcut > li {
}
ul.shortcut > li > a {
display:block;
width:240px; height:46px;
margin-top:16px; margin-left:80px;
padding-top:12px;
background:#b1e69320;
color:#f2f2f2ff;
text-align:center;
text-shadow:2px 1px 2px #666;
box-shadow:1px 0 1px #88888880, 0 1px 1px #88888880, -1px 0 1px #88888880, 0 -1px 1px #88888880;
border-radius:50px;
transition:all 0.25s;
}
ul.shortcut > li:hover > a {
font-weight:bold;
text-shadow:1px 1px 1px #666;
box-shadow:3px 4px #666;
}
footer {
position:relative;
width:1200px; height:100px;
background:#fad1d9;
}
div.logo2 {
float:left;
width:300px; height:100px;
}
div.logo2 > img {
position:absolute;
z-index:15;
left:17px; top:50px;
width:110px; height:50px;
}
div.copyright {
float:left;
width:600px; height:100px;
}
p.cr {
color:##26010b;
opacity:50%;
font-size:13px;
padding-top:58px;
text-align:center;
}
div.sns {
position:relative;
float:left;
width:300px; height:100px;
}
img.sns1 {
position:absolute;
left:160px; top:55px;
}
img.sns2 {
position:absolute;
left:205px; top:55px;
}
img.sns3 {
position:absolute;
left:250px; top:55px;
}
@keyframes img1 {
0% {left:0; top:0;}
30% {left:0; top:0;}
33% {left:1200px; top:0;}
34% {left:1200px; top:300px;}
35% {left:-1200px; top:300px;}
66% {left:-1200px; top:0;}
97% {left:-1200px; top:0;}
100% {left:0; top:0;}
}
@keyframes img2 {
0% {left:-1200px; top:0;}
30% {left:-1200px; top:0;}
33% {left:0; top:0;}
63% {left:0; top:0;}
66% {left:1200px; top:0;}
67% {left:1200px; top:300px;}
68% {left:-1200px; top:300px;}
100% {left:-1200px; top:0;}
}
@keyframes img3 {
0% {left:1200px; top:0;}
1% {left:1200px; top:300px;}
2% {left:-1200px; top:300px;}
33% {left:-1200px; top:0;}
63% {left:-1200px; top:0;}
66% {left:0; top:0;}
97% {left:0; top:0;}
100% {left:1200px; top:0;}
}
@keyframes anitext1 {
0% {opacity:1;}
30% {opacity:1;}
33% {opacity:0;}
66% {opacity:0;}
97% {opacity:0;}
100% {opacity:1;}
}
@keyframes anitext2 {
0% {opacity:0;}
30% {opacity:0;}
33% {opacity:1;}
63% {opacity:1;}
66% {opacity:0;}
100% {opacity:0;}
}
@keyframes anitext3 {
0% {opacity:0;}
33% {opacity:0;}
63% {opacity:0;}
66% {opacity:1;}
96% {opacity:1;}
100% {opacity:0;}
}
@keyframes logoani1 {
0% {transform: rotate(0deg);}
3% {transform: rotate(5deg);}
6% {transform: rotate(-5deg);}
9% {transform: rotate(5deg);}
12% {transform: rotate(-5deg);}
15% {transform: rotate(0deg);}
100% {transform: rotate(0deg);}
}
@keyframes anibanner1 {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
@keyframes star1 {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
JUST 쇼핑몰
