공개문제 A1 문제풀이 index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JUST 쇼핑몰</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrap"> <header> <div class="logo1"> <img src="images/just1-02.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 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="tab"> <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>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"> 겔러리 상세 </div> </div> <div class="c3"> </div> <div class="c4"> </div> </div> <footer> <div class="logo2"> <img src="images/just1-01.svg"> </div> <div class="copyright"> </div> <div class="sns"> </div> </footer> </div> </body> </html>
@charset "utf-8";
* {
box-sizing:border-box;
margin:0; padding:0;
}
ul {
list-style-type:none;
}
a {
text-decoration:none;
}
input {
display:none;
}
div.wrap {
width:1200px; height:700px;
margin:0 auto;
}
header {
width:1200px; height:100px;
}
div.logo1 {
width:300px; height:100px;
float:left;
background:#eea5a6;
border-top:7px solid #b2a59b;
position:relative;
}
div.logo1 > img {
position:absolute;
left:45px; top:25px;
width:200px; height:40px;
}
nav {
position:relative;
width:900px; height:100px;
background:#e2bfb3;
border-top:7px solid #bbc3a4;
float:left;
}
ul.mainmenu {
position:absolute;
left:275px; top:37px;
z-index:10;
}
ul.mainmenu > li {
float:left;
}
ul.mainmenu > li > a {
display:block;
width:150px; height:57px;
background:#ac6d88;
font-size:20px;
line-height:60px;
text-align:center;
}
ul.mainmenu > li:nth-child(1) > a {
color:#eff396;
}
ul.mainmenu > li:nth-child(1):hover > a {
border-bottom:3px solid #eff396;
}
ul.mainmenu > li:nth-child(2) > a {
color:#74e291;
}
ul.mainmenu > li:nth-child(2):hover > a {
border-bottom:3px solid #74e291;
}
ul.mainmenu > li:nth-child(3) > a {
color:#30c5e9;
}
ul.mainmenu > li:nth-child(3):hover > a {
border-bottom:3px solid #30d5e9;
}
ul.mainmenu > li:nth-child(4) > a {
color:#f6b17a;
}
ul.mainmenu > li:nth-child(4):hover > a {
border-bottom:3px solid #f6b17a;
}
ul.mainmenu > li:hover > a {
background:#57375D;
font-weight:bold;
}
ul.submenu {
transition:all 0.8s;
}
ul.submenu > li {
}
ul.submenu > li > a {
overflow:hidden;
display:block;
width:150px; height:0px;
background:#ffffff99;
color:#333;
font-size:17px;
font-weight:bold;
line-height:38px;
text-align:center;
transition:all 0.8s;
}
ul.mainmenu:hover ul.submenu a {
height:40px;
}
ul.submenu > li > a:hover {
background:#00000080;
color:#fff;
font-weight:bold;
}
div.slide {
overflow:hidden;
position:relative;
width:1200px; height:300px;
background:#3f3;
}
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:210px;
color:#fff;
text-shadow:0 1px 1px #222, 1px 0 1px #222, -1px 0 1px #222, 0 -1px 1px #222;
transform:translate(-50%,-50%);
opacity:0;
}
h1.slidetext1 {
animation:anitext1 9s infinite;
}
h1.slidetext2 {
animation:anitext2 9s infinite;
}
h1.slidetext3 {
animation:anitext3 9s infinite;
width:800px;
}
div.contents {
width:1200px; height:200px;
background:#33f;
}
div.c1 {
position:relative;
width:400px; height:200px;
background:#c6dcba;
border-top:7px solid #637a9f;
float:left;
}
input#noti {
}
input#gall {
}
label.notilabel {
display:block;
position:absolute;
left:10px; top:10px;
width:100px; height:40px;
background:#d7e4c0;
color:#000;
font-size:18px;
line-height:42px;
text-align:center;
border-radius:8px 8px 0 0;
border:1px solid #000;
border-bottom:0px solid #000;
}
label.galllabel {
display:block;
position:absolute;
left:109px; top:10px;
width:100px; height:40px;
background:#bbc3a4;
color:#000;
font-size:18px;
line-height:42px;
text-align:center;
border-radius:8px 8px 0 0;
border:1px solid #000;
border-bottom:0px solid #000;
}
input#noti:checked ~ label.notilabel {
z-index:10;
background:#d7e4c0;
}
input#gall:checked ~ label.galllabel {
z-index:10;
background:#bbc3a4;
}
div.noticon {
display:none;
position:absolute;
left:0; top:49px;
padding-top:10px;
width:400px; height:150px;
background:#d7e4c0;
border-radius:12px 12px 0 0;
border:1px solid #000;
}
p.jul {
height:30px;
margin-left:20px;
}
p.jul span {
color:#358;
font-size:12px;
line-height:28px;
text-align:left;
<a href="">a> border-bottom:1px dotted #d86;
}
div.gallcon {
display:none;
position:absolute;
left:0; top:49px;
width:400px; height:150px;
background:#ccd3ca;
border-radius:12px 12px 0 0;
border:1px solid #000;
}
input#noti:checked ~ div.noticon {
display:block;
}
input#gall:checked ~ div.gallcon {
display:block;
}
div.c3 {
width:400px; height:200px;
background:#d7e4c0;
border-top:7px solid #789461;
float:left;
}
div.c4 {
width:400px; height:200px;
background:#ccd3ca;
border-top:7px solid #8e7ab5;
float:left;
}
footer {
width:1200px; height:100px;
background:#ff3;
}
div.logo2 {
position:relative;
width:300px; height:100px;
background:#333;
float:left;
}
div.logo2 > img {
position:absolute;
left:45px; top:30px;
width:200px; height:40px;
}
div.copyright {
width:500px; height:100px;
background:#666;
float:left;
}
div.sns {
width:300px; height:100px;
background:#999;
float:left;
}
@keyframes img1 {
0% {left:0; top:0;}
33% {left:0; top:300px;}
34% {left:1200px; top:300px;}
35% {left:1200px; top:-300px;}
66% {left:0px; top:-300px;}
100% {left:0; top:0;}
}
@keyframes img2 {
0% {left:0; top:-300px;}
33% {left:0; top:0;}
66% {left:0; top:300px;}
67% {left:1200px; top:300px;}
68% {left:1200px; top:-300px;}
100% {left:0; top:-300px;}
}
@keyframes img3 {
0% {left:0; top:300px;}
1% {left:1200px; top:300px;}
2% {left:1200px; top:-300px;}
33% {left:0; top:-300px;}
66% {left:0; top:0;}
100% {left:0; top:300px;}
}
@keyframes anitext1{
0% {opacity:0}
16% {opacity:0}
33% {opacity:1}
49% {opacity:0}
66% {opacity:0}
100% {opacity:0}
}
@keyframes anitext2{
0% {opacity:0}
33% {opacity:0}
48% {opacity:0}
66% {opacity:1}
83% {opacity:0}
100% {opacity:0}
}
@keyframes anitext3{
0% {opacity:1}
16% {opacity:0}
33% {opacity:0}
66% {opacity:0}
84% {opacity:0}
100% {opacity:1}
}
JUST 쇼핑몰 <--웹에서 보기
No Responses