공개문제 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/logo3.svg">
</div>
<nav>
<div class="bar">
</div>
<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/slide1.png">
<img alt="팬츠 슬라이드 이미지" class="slide2" src="images/slide2.png">
<img alt="슬라이드 이미지" 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="#modal"><span>1. 이번달 고객감사 이벤트 진행중</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 class="gal1"alt="갤러리 첫번째 사진" src="images/gallery-1.png">
<img class="gal2"alt="갤러리 두번째 사진" src="images/gallery-2.png">
<img class="gal3"alt="갤러리 세번째 사진" src="images/gallery-3.png">
</div>
</div>
<div class="c3">
<img class="banner" alt="배너 이미지" src="images/banner2.png">
</div>
<div class="c4">
<ul class="바로가기">
<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/logo2.svg">
</div>
<div class="copyright">
<p class="KSJ">copyright©2024. All rights reserved.
</div>
<div class="sns">
</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:80px auto;
background:#FFE5E5;
}
div.modalwrap > h1 {
position:absolute;
left:0; top:5px;
}
div.modalwrap > p {
position:absolute;
left:0; top:100px;
}
div.modalwrap > a {
display:block;
position:absolute;
right:10px; bottom:10px;
color:#000;
}
div.wrap {
width:1200px; height:700px;
background:#FFE5E5;
margin:0 auto;
}
header {
width:1200px; height:100px;
}
div.logo1 {
position:relative;
width:300px; height:100px;
float:left;
}
div.logo1 > img {
position:absolute;
left:30px; top:26px;
width:200px; height:40px;
animation:logoani1 9s 1s infinite;
overflow:visible;
}
nav {
position:relative;
width:900px; height:100px;
float:left;
}
div.bar {
width:900px; height:30px;
background:#E0AED0;
border-radius:0 0 0 10px;
}
ul.mainmenu {
position:absolute;
left:275px; top:30px;
z-index:10
}
ul.mainmenu > li {
float:left;
}
ul.mainmenu > li > a {
display:block;
width:140px; height:70px;
/* background:#ffe5e5; */
color:#756AB6;
font-weight:bold;
font-size:20px;
line-height:66px;
text-align:center;
transition:all 0.2s;
margin:0 5px;
}
/* ul.mainmenu > li:nth-child(1) > a {
}
ul.mainmenu > li:nth-child(1):hover > a {
border-bottom:6px solid #756AB6;
}
ul.mainmenu > li:nth-child(2) > a {
color:#756AB6;
}
ul.mainmenu > li:nth-child(2):hover > a {
border-bottom:6px solid #756AB6;
}
ul.mainmenu > li:nth-child(3) > a {
color:#756AB6;
}
ul.mainmenu > li:nth-child(3):hover > a {
border-bottom:6px solid #756AB6;
}
ul.mainmenu > li:nth-child(4) > a {
color:#756AB6;
}
ul.mainmenu > li:nth-child(4):hover > a {
border-bottom:6px solid #756AB6;
} */
ul.mainmenu > li:hover > a {
font-weight:bold;
color:#5549a6;
border-bottom:5px solid #5549a6;
}
ul.submenu {
transition:all 0.2s;
}
ul.submenu > li {
}
ul.submenu > li > a {
overflow:hidden;
display:block;
width:150px; height:0px;
background:#FFE5E580;
color:#756AB6;
font-size:16px;
line-height:38px;
text-align:center;
transition:all 0.7s;
}
ul.mainmenu:hover ul.submenu a {
height:40px;
}
ul.submenu > li > a:hover {
background:#FFE5E5dd;
color:#5549a6;
}
div.slide {
position:relative;
overflow:hidden;
width:1200px; height:300px;
background:#3f3;
/* border-radius:150px 30px 150px 30px; */
}
div.slide > img {
position:absolute;
left:0;right: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;
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;
top:200px;
transform:translate(-50%,-50%);
animation:anitext1 9s infinite;
}
div.slide > h1.slidetext2 {
position:absolute;
top:200px;
transform:translate(-50%,-50%);
animation:anitext2 9s infinite;
}
div.slide > h1.slidetext3 {
position:absolute;
top:200px;
transform:translate(-50%,-50%);
animation:anitext3 9s infinite;
width:800px
}
div.contents {
width:1200px; height:200px;
}
div.c1 {
position:relative;
width:400px; height:200px;
float:left;
}
input#noti {
}
input#gall {
}
label.notilabel {
display:block;
position:absolute;
left:20px; top:10px;
width:100px; height:40px;
background:#a06E90;
color:#000;
font-size:16px;
line-height:44px;
text-align:center;
border-radius:10px 10px 0 0;
/* border:1px solid #000; */
/* border-bottom:0px solid #000; */
}
label.galllabel {
display:block;
position:absolute;
left:119px; top:10px;
width:100px; height:40px;
background:#a06E90;
color:#000;
font-size:16px;
line-height:44px;
text-align:center;
border-radius:10px 10px 0 0;
/* border:1px solid #000; */
/* border-bottom:0px solid #000; */
}
input#noti:checked ~ label.notilabel {
z-index:10;
background:#E0AED0;
}
input#gall:checked ~ label.galllabel {
z-index:10;
background:#E0AED0;
}
div.noticon {
display:none;
position:absolute;
left:5px; top:49px;
padding-top:13px;
width:390px; height:150px;
background:#E0AED0;
border-radius:10px 10px 10px 10px;
/* border:1px solid #000; */
}
p.jul {
height:30px;
margin-left:20px;
}
p.jul span {
padding-bottom:2px;
color:#555;
font-size:12px;
line-height:28px;
text-align:left;
border-bottom:1px dotted #FFE5E5;
}
div.gallcon {
display:none;
position:absolute;
left:5px; top:49px;
width:390px; height:150px;
background:#E0AED0;
border-radius:10px 10px 10px 10px;
/* border:1px solid #000; */
}
input#noti:checked ~ div.noticon {
display:block;
}
input#gall:checked ~ div.gallcon {
display:block;
}
div.gallcon > img {
width:100px; height:100px;
}
img.gal1 {
position:absolute;
left:20px; top:25px;
}
img.gal2 {
position:absolute;
left:150px; top:25px;
}
img.gal3 {
position:absolute;
left:280px; top:25px;
}
div.c3 {
position:relative;
width:400px; height:200px;
float:left;
}
img.banner {
position:absolute;
left:20px; top:50px;
width:380px;height:150px;
border-radius:10px;
}
div.c4 {
position:relative;
width:400px; height:200px;
float:left;
}
ul.바로가기 {
position:absolute;
left:30px; top:50px;
}
ul.바로가기 > li {
}
ul.바로가기 > li > a {
display:block;
width:350px; height:50px;
background:#E0AED0;
color:#333;
font-size:20px;
line-height:48px;
text-align:center;
border-radius:10px 10px;
}
footer {
width:1200px; height:100px;
}
div.logo2 {
position:relative;
width:300px; height:100px;
float:left;
}
div.logo2 > img {
position:absolute;
left:30px; bottom:20px;
width:160px; height:30px;
}
div.copyright {
position:relative;
width:600px; height:100px;;
float:left;
}
p.KSJ {
position:absolute;
left:180px;bottom:20px;
color:#333;
text-align:center;
}
div.sns {
width:300px; height:100px;
float:left;
}
@keyframes img1 {
0%{left:0; top:0;}
30%{left:0; top:0;}
33%{left:1200px; top:0;}
64%{left:1200px; top:300px;}
65%{left:-1200px; top:300px;}
66%{left:-1200px; top:0px;}
97%{left:-1200px; top:0px;}
100%{left:0; top:0;}
}
@keyframes img2 {
0%{left:-1200px; top:0px;}
30%{left:-1200px; top:0px;}
33%{left:0; top:0;}
63%{left:0; top:0;}
66%{left:1200px; top:0;}
98%{left:1200px; top:300px;}
99%{left:-1200px; top:300px;}
100%{left:-1200px; top:0;}
}
@keyframes img3 {
0%{left:1200px; top:0;}
31%{left:1200px; top:300px;}
32%{left:-1200px; top:300px;}
33%{left:-1200px; top:0px;}
63%{left:-1200px; top:0px;}
66%{left:0; top:0;}
97%{left:0; top:0;}
100%{left:1200px; top:0;}
}
@keyframes anitext1 {
0%{opacity:0;}
3%{opacity:1;}
30%{opacity:1;}
33%{opacity:0;}
66%{opacity:0;}
100%{opacity:0;}
}
@keyframes anitext2 {
0%{opacity:0;}
33%{opacity:0;}
36%{opacity:1;}
63%{opacity:1;}
66%{opacity:0;}
100%{opacity:0;}
}@keyframes anitext3 {
0%{opacity:0;}
33%{opacity:0;}
66%{opacity:0;}
69%{opacity:1;}
97%{opacity:1;}
100%{opacity:0;}
}
@keyframes logoani1 {
0%{transform: rotate(0deg);}
0.1%{transform: rotate(10deg);}
0.2%{transform: rotate(-10deg);}
0.3%{transform: rotate(10deg);}
0.4%{transform: rotate(-10deg);}
0.5%{transform: rotate(0deg);}
100%{transform: rotate(0deg);}
}
JUST 쇼핑몰