공개문제 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="popup">
<div class="popupwrap">
<h1>
이번달 고객감사 이벤트 진행중
</h1>
<p>
이번달 고객감사 이벤트 진행중입니다.<br>
회원님들은 저의 홈페이지 이벤트 페이지에
오셔서 해당 이벤트를 확인해 주세요.<br>
고객을 위해 항상 최선을 다하는 JUST 쇼핑몰입니다.
</p>
<a href="#">닫기</a>
</div>
</div>
<div class="wrap">
<header>
<div class="logo1">
<img src="images/logo1.svg" alt="logo">
</div>
<nav>
<ul class="mainmenu">
<li>
<svg>
<circle class="cir1" />
</svg>
<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>
<svg>
<circle class="cir2" />
</svg>
<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>
<svg>
<circle class="cir3" />
</svg>
<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>
<svg>
<circle class="cir4" />
</svg>
<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 class="slide1" src="images/slide1.png">
<img class="slide2" src="images/slide2.png">
<img class="slide3" src="images/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="tap" checked>
<input type="radio" id="gall" name="tap">
<label class="notilabel" for="noti">공지사항</label>
<label class="galllabel" for="gall">갤러리</label>
<div class="noticon">
<p class="jul">
<a href="#popup">
1. 이번달 고객감사 이벤트 진행중
</a>
</p>
<p class="jul">
2. JUST 쇼핑몰 대박 쿠폰 이벤트
</p>
<p class="jul">
3. 반품, 환불에 대한 약정 변경
</p>
<p class="jul">
4. 4월 15일 오후 23:00 ~ 24:00 서버작업으로 홈페이지 중지
</p>
</div>
<div class="gallcon">
<img class="gallery1" alt="갤러리 이미지 1" src="images/gallery1.png">
<img class="gallery2" alt="갤러리 이미지 2" src="images/gallery2.png">
<img class="gallery3" alt="갤러리 이미지 3" src="images/gallery3.png">
</div>
</div>
<div class="c3">
<img class="banner" alt="배너 이미지" src="images/banner.png">
<h1 class="bannertext1">
365일 매일매일 감사이벤트
</h1>
</div>
<div class="c4">
<ul class="baro">
<li>
<a href="#">감사이벤트</a>
</li>
<li>
<a href="#">고객정보</a>
</li>
<li>
<a href="#">할인정보</a>
</li>
</ul>
</div>
</div>
<footer>
<div class="logo2">
<img src="images/logo2.svg">
</div>
<div class="copylight">
<p class="cyr">Copyright @ KDY. All rights reserved.
</div>
<div class="sns">
<a href="#" target="_blank">
<img class="kakao" alt="카카오톡" src="images/sns1.png">
</a>
<a href="#" target="_blank">
<img class="face" alt="페이스북" src="images/sns2.png">
</a>
<a href="#" target="_blank">
<img class="ins" alt="인스타그램" src="images/sns3.png">
</a>
</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#popup {
display:none;
z-index:50;
position:fixed;
width:100%; height:100%;
background:#fff80;
}
#popup:target {
display:block;
}
div.popupwrap {
position:relative;
width:600px; height:400px;
margin:80px auto;
background:#F5F5DC;
border-radius:10px;
}
div.popupwrap > h1 {
position:absolute;
left:10px; top:5px;
}
div.popupwrap > p {
position:absolute;
left:10px; top:100px;
}
div.popupwrap > a {
display:block;
position:absolute;
right:10px; bottom:10px;
color:#000;
}
div.wrap {
width:1200px; height:700px;
margin:0 auto;
animation:wrapani 3s 1s 1;
}
header {
width:1200px; height:100px;
}
div.logo1 {
position:relative;
float:left;
width:300px; height:100px;
}
div.logo1 > img {
position:absolute;
left:100px; top:30px;
width:200px; height:40px;
animation:logoani1 2s 1s 1;
}
nav {
position:relative;
float:left;
width:900px; height:100px;
background:#fff;
}
ul.mainmenu {
z-index:10;
position:absolute;
left:180px; top:30px;
}
ul.mainmenu > li {
float:left;
}
ul.mainmenu > li > a {
display:block;
width:150px; height:70px;
background:#fff;
color:#000;
font-size:24px;
line-height:58px;
text-align:center;
}
ul.mainmenu > li:nth-child(1) > a {
color:#fe9843;
}
svg {
position:absolute;
width:600px; height:85px;
}
ul.mainmenu > li:nth-child(1):hover > a {
border-left:10px solid #fe9843;
}
ul.mainmenu > li:nth-child(1):hover > svg > circle.cir1 {
cx:80px;
cy:30px;
r:31px;
stroke:#ffffff;
stroke-width:4px;
opacity:0.3;
fill:#fe9888;
transition:all 1s;
}
ul.mainmenu > li:nth-child(2) > a {
color:#34feae;
}
ul.mainmenu > li:nth-child(2):hover > a {
border-left:10px solid #34feae;
}
ul.mainmenu > li:nth-child(2):hover > svg > circle.cir2 {
cx:80px;
cy:30px;
r:30px;
stroke:#ffffff;
stroke-width:4px;
opacity:0.3;
fill:#34feae;
transition:all 1s;
}
ul.mainmenu > li:nth-child(3) > a {
color:#6567fa;
}
ul.mainmenu > li:nth-child(3):hover > a {
border-left:10px solid #6567fa;
}
ul.mainmenu > li:nth-child(3):hover > svg > circle.cir3 {
cx:80px;
cy:30px;
r:30px;
stroke:#ffffff;
stroke-width:4px;
opacity:0.3;
fill:#6567fa;
transition:all 1s;
}
ul.mainmenu > li:nth-child(4) > a {
color:#fede21;
}
ul.mainmenu > li:nth-child(4):hover > a {
border-left:10px solid #fede21;
}
ul.mainmenu > li:nth-child(4):hover > svg > circle.cir4 {
cx:80px;
cy:30px;
r:30px;
stroke:#ffffff;
stroke-width:4px;
opacity:0.3;
fill:#fede21;
transition:all 1s;
}
ul.mainmenu > li:hover > a {
font-weight:bold;
}
ul.submenu li {
}
ul.submenu > li > a {
overflow:hidden;
display:block;
width:150px; height:0px;
background:#ffffff80;
color:#333;
font-size:16px;
line-height:38px;
text-align:center;
border-radius:1px 15px;
transition:all 1.2s;
}
ul.mainmenu:hover ul.submenu a {
height:40px;
}
ul.submenu > li > a:hover {
background:#00000080;
color:#fff;
}
div.slide {
position:relative;
width:1200px; height:300px;
background:#fdd;
overflow:hidden;
border-radius:50px 50px;
box-shadow:5px 10px 5px #00000080;
}
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 {
opacity:0;
transform:translate(-50%,-50%);
position:absolute;
left:600px; top:150px;
color:#fff;
text-shadow:1px 0 1px #333, 0px 1px 1px #333, -1px 0 1px #333, 0 -1px 1px #333
}
div.slide > h1.slidetext1 {
position:absolute;
left:600px; top:200px;
animation:anitext1 9s infinite;
}
div.slide > h1.slidetext2 {
position:absolute;
left:600px; top:200px;
animation:anitext2 9s infinite;
}
div.slide > h1.slidetext3 {
position:absolute;
left:600px; top:200px;
width:800px;
animation:anitext3 9s infinite;
}
div.contents {
width:1200px; height:200px;
}
div.c1 {
position:relative;
float:left;
width:400px; height:200px;
}
input#noti {
}
input#gall {
}
label.notilabel {
display:block;
position:absolute;
left:10px; top:10px;
width:100px; height:40px;
background:#ddd;
color:#000;
font-size:18px;
line-height:38px;
text-align:center;
border:1px solid #000;
border-bottom:0px solid #000;
}
label.galllabel {
display:block;
position:absolute;
left:109px; top:10px;
width:100px; height:40px;
background:#ddd;
color:#000;
font-size:18px;
line-height:38px;
text-align:center;
border:1px solid #000;
border-bottom:0px solid #000;
}
input#noti:checked ~ label.notilabel {
z-index:10;
background:#fff;
}
input#gall:checked ~ label.galllabel {
z-index:10;
background:#fff;
}
div.noticon {
display:none;
position:absolute;
left:0; top:49px;
padding-top:10px;
width:400px; height:150px;
border:1px solid #000;
}
p.jul {
width:360px; height:30px;
margin-left:20px;
}
div.gallcon {
display:none;
position:absolute;
left:0; top:49px;
width:400px; height:150px;
border:1px solid #000;
}
div.gallcon img {
width:100px; height:100px;
}
img.gallery1 {
position:absolute;
left:25px; top:31px;
}
img.gallery2 {
position:absolute;
left:150px; top:31px;
}
img.gallery3 {
position:absolute;
left:275px; top:31px;
}
input#noti:checked ~ div.noticon {
display:block;
}
input#gall:checked ~ div.gallcon {
display:block;
}
div.c3 {
position:relative;
float:left;
width:400px; height:200px;
}
img.banner {
position:absolute;
left:15px; top:20px;
width:380px; height:180px;
}
div.c3 h1.bannertext1 {
position:absolute;
left:100px; top:150px;
font-size:20px;
color:#fff;
animation:banani 5s infinite;
}
div.c4 {
position:relative;
float:left;
width:400px; height:50px;
}
ul.baro {
position:absolute;
left:20px; top:30px;
}
ul.baro > li {
}
ul.baro > li > a {
display:block;
width:350px; height:50px;
margin-bottom:10px;
background:#90EE90;
color:#000;
font-size:20px;
line-height:48px;
text-align:center;
}
footer {
width:1200px; height:100px;
position:relative;
}
div.logo2 {
position:absolute;
left:0px; top:0px;
float:left;
width:300px; height:100px;
}
div.logo2 > img {
position:absolute;
left:20px; top:20px;
width:200px; height:40px;
}
div.copylight {
position:absolute;
left:460px; top:30px;
float:left;
width:600px; height:100px;
}
div.sns {
position:relative;
left:960px; top:30px;
float:left;
width:300px; height:100px;
}
div.sns > a {
}
div.sns > a > img {
width:60px; height:60px;
}
img.kakao {
position:absolute;
left:0; top:-10px;
}
img.face {
position:absolute;
left:70px; top:-15px;
}
img.ins {
position:absolute;
left:140px; top:-15px;
}
@keyframes img1 {
0% {left:0; top:0;}
33% {left:1200px; top:0;}
66% {left:1200px; top:0;}
80% {left:0; top:0;}
100% {left:0; top:0;}
}
@keyframes img2 {
0% {left:-1200px; top:0;}
33% {left:0; top:0;}
63% {left:0; top:0;}
66% {left:-1200px; top:0;}
100% {left:-1200px; top:0;}
}
@keyframes img3 {
0% {left:0; top:-300px;}
33% {left:0; top:-300px;}
36% {left:0; top:-300px;}
66% {left:0; top:0;}
80% {left:0; top:0;}
96% {left:0; top:-300;}
100% {left:0; top:-300px;}
}
@keyframes anitext1 {
0% {opacity:1;}
33% {opacity:0;}
85% {opacity:0;}
100% {opacity:0;}
}
@keyframes anitext2 {
0% {opacity:0;}
35% {opacity:0;}
36% {opacity:1;}
85% {opacity:0;}
100% {opacity:0;}
}
@keyframes anitext3 {
0% {opacity:0;}
10% {opacity:0;}
65% {opacity:0;}
66% {opacity:1;}
100% {opacity:0;}
}
@keyframes logoani1 {
0% {transform:rotate(0);}
50% {transform:rotate(180deg);}
100% {transform:rotate(0deg);}
}
@keyframes banani {
0% {opacity:0;}
66% {opacity:1;}
100% {opacity:0;}
}
@keyframes wrapani {
0% {clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);}
100% {clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}
JUST쇼핑몰 들어가기