미스치프 아웃터 페이지를 구현해 보았다.
구현영상
.gif)
1. html 코드
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./mischef_outer.css">
</head>
<body>
<header>
<input id = "hm_icon" type="checkbox">
<label for="hm_icon">
<span id= "first_line"></span>
<span id= "second_line"></span>
<span id= "third_line"></span>
</label>
<div class="sideBar">
<div id="sideBar_menu1">
<ul id="unlist_menu1">
<li id="black"><a href="#">SHOP</a></li>
<li><a href="#" class="unlist_color">ALL</a></li>
<li><a href="#" class="unlist_color">OUTER</a></li>
<li><a href="#" class="unlist_color">TOP</a></li>
<li><a href="#" class="unlist_color">BOTTOM</a></li>
<li><a href="#" class="unlist_color">ACC</a></li>
<li><a href="#" class="unlist_color">EXCLUSIVE</a></li>
<li><a href="#" class="unlist_color">OULET</a></li>
<li id="red"><a href="#">COLLECTIVE</a></li>
</ul>
</div>
<div id="sideBar_menu2">
<ul id="unlist_menu2">
<li><a href="#">COLLECTION</a></li>
<li><a href="#">ARCHIVE</a></li>
<li><a href="#">STOCKISTS</a></li>
<li><a href="#">SONTACT</a></li>
<li><a href="#">FOLLOW US</a></li>
</ul>
</div>
</div>
<div id= "mschf_icon">
<a id="main_logo">
<img src="ms-logo.png">
</a>
</div>
<div id= "right_menu">
<ul>
<li><a href="" class="underline">LOGIN</a></li>
<li><a href="" class="underline">CART</a></li>
<li><a href="" class="underline">CARENDAR</a></li>
<li id="search"><a href = "#" class="searchclick" id ="searchclick"> SEARCH</a></li>
<li><a>KR</a> <img id ="korea"src="ko_KR_18x12.png"></li>
</ul>
<div id="topsearchline">
<input type="text" id="topsearchbar">
<img src="./ms-close.png" alt="" id="imgclose">
</div>
</div>
<div id="bottom_menu_bar">
<ul>
<li class="menu_color"><a href="#">ALL</a></li>
<li class="menu_color" id="outer"><a href="#">OUTER</a></li>
<li class="menu_color"><a href="#">TOP</a></li>
<li class="menu_color"><a href="#">BOTTOM</a></li>
<li class="menu_color"><a href="#">ACC</a></li>
<li class="menu_color"><a href="#">EXCLUSIVE</a></li>
<li class="menu_color"><a href="#">OUTLET</a></li>
<li class="menu_color"><a href="#"><span>COLLECTIVE</span></a></li>
</ul>
<div id="filter_menu">
<input type="checkbox" id="filter">
<label for="filter">
<span id="filter_icon_1"></span>
<span id="filter_icon_2"></span>
<div>FILTER</div>
</label>
<div id="filter_menu_whrit">
<span>PRICE LOW TO HIGT</span>
<span>PRICE HIGT TO LOW</span>
</div>
</div>
</div>
</header>
<main>
<div id="main_outer">
<ul>
<li>
<div class="outer_img_line">
<a href="outer_info.html"><img id="imgchange1" class="outer_opacity_img" src="./outer.img1.jpg"></a>
<div><a href="" class="outer_img_icon"><img class = "firsticon" src="./icon_201909041540047100.png" alt=""></a></div>
</div>
<div class="outer_text">
<span>PROJECT MAGO_BOWMAN SUIT JACKET_GREY</span>
<span>₩228,000</span>
</div>
</li>
<li>
<div class="outer_img_line">
<a href=""><img id="imgchange2" class="outer_opacity_img" src="./outer.img2.jpg"></a>
<div><a href="" class="outer_img_icon"><img class = "firsticon" src="./icon_201909041540047100.png" alt=""></a></div>
</div>
<div class="outer_text">
<span>PROJECT MAGO_BOWMAN SUIT JACKET_DARK NAVY</span>
<span>₩228,000</span>
</div>
</li>
<li>
<div class="outer_img_line">
<a href=""><img id="imgchange3" class="outer_opacity_img" id="img3" src="./outer.img3.jpg"></a>
<div><a href="" class="outer_img_icon"><img class = "firsticon" src="./icon_201909041540047100.png" alt=""></a></div>
</div>
<div class="outer_text">
<span>PROJECT MAGO_ORGANZA LAYERED BOMBER<br>JACKET_RED BROWN</span>
<span>₩280,000</span>
</div>
</li>
<li>
<div class="outer_img_line">
<a href=""><img class="outer_opacity_img" src="./outer.img4.jpg"></a>
<div><a href="" class="outer_img_icon"><img class = "firsticon" src="./icon_201909041540047100.png" alt=""></a></div>
</div>
<div class="outer_text">
<span>ACETATE REVERSIBLE PARKA_MATT<br>BEIGE/TORTOISESHELL(TRANSLUCENT)</span>
<span>₩278,000</span>
</div>
</li>
</ul>
</div>
<div id="main_outer2">
<ul>
<li>
<div class="outer_img_line2">
<a href=""><img class="outer_opacity_img2" src="./outer.img5.jpg"></a>
<div><a><img class="outer_img_icon2" src="./icon_201909041540047100.png" alt=""></a></div>
</div>
<div class="outer_text2">
<span>ACETATE REVERSIBLE PARKA_MATT BLACK/TORTOISESHELL</span>
<span>￦278,000</span>
</div>
</li>
<li>
<div class="outer_img_line2">
<a href=""><img class="outer_opacity_img2" src="./outer.img6.jpg"></a>
<div><a><img class="outer_img_icon2" src="./icon_201909041540047100.png" alt=""></a></div>
</div>
<div class="outer_text2">
<span>ACETATE REVERSIBLE PARKA_MATT BLACK/TORTOISESHELL</span>
<span>￦258,000</span>
</div>
</li>
<li>
<div class="outer_img_line2">
<a href=""><img class="outer_opacity_img2" src="./outer.img7.jpg"></a>
<div><a><img class="outer_img_icon2" src="./icon_201909041540047100.png" alt=""></a></div>
</div>
<div class="outer_text2">
<span style="margin: 0 0 0 60px">RETRO METRO FAUX LEATHER COAT_BLACK<br></span>
<span style="margin: 0 0 0 50px;">￦258,000</span>
</div>
</li>
<li>
<div class="outer_img_line2">
<a href=""><img class="outer_opacity_img2" src="./outer.img8.jpg"></a>
<div><a><img class="outer_img_icon2" src="./icon_201909041540047100.png" alt=""></a></div>
</div>
<div class="outer_text2">
<span>MORPHO REVERSIBLE JACKET_IRIDESCENT SKY BLUE/IRON</span>
<span>￦258,000</span>
</div>
</li>
</ul>
</div>
</main>
<footer>
<ul>
<li>주식회사 미스치프 | 대표 정지윤, 서지은 | 사업자번호 187-88-00436 | 통신판매업 2016-서울강남-03549</li>
<li>본사 서울시 강남구 압구정로 46번길 31 2층 | 호스팅 카페24(주)</li>
</ul>
<ul>
<li>PRIVACY POLICY</li>
<li>TERMS OF USE</li>
</ul>
<ul class="info">
<li>Q&A</li>
<li>NOTIC</li>
</ul>
<ul class="info">
<li>+82 70-4643-1992</li>
<li>CUSTOMER@MISCHIEF.CO.KR</li>
</ul>
<ul class="info">
<li>© 2010-2019 MISCHIEF.</li>
<li>SITE BY BATON</li>
</ul>
</footer>
<script src="./mis_outer.js"></script>
</body>2.css 코드
body{
word-break: keep-all;
font-family: 'HelveticaLTWXX-Roman','Noto Sans KR',Helvetica,sans-serif;
}
header{
height: 128.56px;
padding: 30px 30px 0 30px;
margin: 0 auto;
}
main{
height: 1455px;
}
footer{
margin: 0 0 0 30px;
}
input[id ="hm_icon"]{
display: none;
}
input[id ="hm_icon"]+label{
display: block;
width: 40px;
height: 23px;
position: fixed;
z-index: 2;
cursor: pointer;
top: 25px;
margin: 40px 0 0px 0px;
}
input[id ="hm_icon"]+ label span{
background-color: black;
width: 100%;
height: 4px;
display: block;
position: absolute;
transition: all 0.35s;
}
input[id ="hm_icon"]:checked+label{
z-index: 2;
}
input[id ="hm_icon"]+label span:nth-child(1){
top : 0;
}
input[id ="hm_icon"]+label span:nth-child(2){
top : 50%;
transform: translate(0,-50%);
}
input[id ="hm_icon"]+label span:nth-child(3){
bottom :0;
}
input[id ="hm_icon"]:checked+label span:nth-child(1){
top : 50%;
transform: translateY(-50%) rotate(45deg);
}
input[id ="hm_icon"]:checked+label span:nth-child(2){
opacity: 0;
}
input[id ="hm_icon"]:checked+label span:nth-child(3){
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
div[class="sideBar"]{
width: 300px;
height: 100%;
position: fixed;
top: 0;
left: -300px;
transition:all 0.1s;
background-color: white;
z-index: 1;
}
input[id = "hm_icon"]:checked+label+div{
left: 0;
}
#sideBar_menu1{
margin: 140px 0 0 0;
}
#unlist_menu1{
list-style: none;
}
#unlist_menu2{
list-style: none;
padding-top: 10px;
}
#black{
color: black;
font-size: 13px;
font-family: HelveticaLTWXX-Bold;
font-weight: bold;
line-height: 1.6;
}
#black>a{
text-decoration: none;
color: black;
}
#red{
font-size: 13px;
font-family: HelveticaLTWXX-Bold;
font-weight: bold;
line-height: 1.6;
padding: 10px 0 0 0;
}
#red>a{
text-decoration: none;
color: red;
}
#unlist_menu1 > li:not(:first-child, :last-child){
font-size: 13px;
font-family: HelveticaLTWXX-Bold;
font-weight: bold;
line-height: 1.6;
padding: 10px 0 0 0;
}
.unlist_color{
text-decoration: none;
color: #999;
}
#unlist_menu2 > li{
font-size: 13px;
font-family: HelveticaLTWXX-Bold;
font-weight: bold;
color: black;
line-height: 1.6;
padding: 10px 0 0 0;
}
#unlist_menu1>li>a:hover{
text-decoration: underline;
}
#unlist_menu2>li>a{
text-decoration: none;
color: black;
}
#unlist_menu2>li>a:hover{
text-decoration: underline;
}
#main_logo{
margin: 0 0 0 470px;
position: fixed;
right: 500px;
z-index: 3;
}
#main_logo >img{
width: 640px;
display: inline-block;
}
#right_menu{
position: fixed;
right : 25px;
top: 30px;
z-index: 4;
}
#right_menu > ul{
list-style: none;
font-size: 12px;
font-family: 'HelveticaLTWXX-Bold','Noto Sans KR',Helvetica,sans-serif;
line-height: 1.6;
font-weight: bold;
text-align: right;
}
#korea{
margin: -2px;
}
.underline{
text-decoration: none;
color: black;
}
a.underline:hover{
text-decoration: underline;
cursor: pointer;
}
#topsearchline{
width: 100%;
height: 140px;
position: fixed;
top: -140px;
left: 0;
background-color: white;
transition: all .35s;
}
#topsearchline>img{
width: 32px;
height: 32px;
right: 0;
}
#topsearchbar{
width: 90.5%;
height: 60px;
margin: 40px 0px 0 50px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #ddd;
background-image: url(./ms-search.png) ;
background-repeat: no-repeat;
background-size: 32px 32px;
background-position: 0px 35px;
font-size: 20px;
padding: 20px 0 0 50px;;
outline: none;
}
.searchclick{
color: black;
text-decoration: none;
}
#search>a:hover.searchclick{
text-decoration: underline;
}
#imgclose{
cursor: pointer;
}
footer > ul{
font-size: 12px;
list-style: none;
display: inline-block;
padding: 20px 0 0 0;
}
.info{
padding: 0 0 0 160px;
}
#bottom_menu_bar{
height: 42px;
margin: 110px 0 0 0px;
position: relative;
}
#bottom_menu_bar ul>li{
display: inline-block;
margin: 0 20px 0 0;
}
#bottom_menu_bar>ul{
margin: 0px 0 0 520px;
width: 800px;
height: 42px;
}
#bottom_menu_bar>ul>li>a{
font-size: 12px;
color: red;
font-weight: bold;
}
.menu_color>a>span{
color: black;
font-size: 12px;;
font-weight: bold;
}
#bottom_menu_bar{
position: relative;
}
#bottom_menu_bar>ul>li>a{
text-decoration: none;
}
#outer{
text-decoration: underline;
}
#bottom_menu_bar>ul>li>a:hover{
text-decoration: underline;
}
#filter_menu{
position: absolute;
right: 0;
top: 0;
}
input[id ="filter"]+label span{
background-color: #999;
width: 9px;
height: 3px;
display: inline-block;
margin: 0px 3px 3px -12px;
}
input[id ="filter"]{
display: none;
}
input[id="filter"]+label{
width: 30px;
height: 30px;
}
input[id ="filter"]+label div{
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #999;
cursor: pointer;
}
#filter_icon_1{
transform: rotate(45deg);
}
#filter_icon_2{
transform: rotate(135deg);
}
input[id="filter"]:checked+label #filter_icon_1{
transform: rotate(-45deg);
}
input[id="filter"]:checked+label #filter_icon_2{
transform: rotate(-135deg);
}
#filter_menu_whrit >span{
font-size: 12px;
display: block;
color: #999;
margin: 3px 0 0 0px;
}
#filter_menu_whrit {
margin: 0 0 0 -70px;
display: none;
}
input[id ="filter"]:checked+label+#filter_menu_whrit{
display: block;
position: absolute;
z-index: 2;
}
#filter_menu_whrit>span:hover{
text-decoration: underline;
cursor: pointer;
}
#main_outer>ul{
height: 606px;
margin: 0 0 0 -10px;
}
#main_outer>ul>li{
display: inline-block;
width: 400px;
height: 606px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.firsticon{
position: absolute;
width: 32px;
height: 32px;
bottom: 100%;
left: 48%;
}
.outer_img_line>a>img{
width: 405px;
height: 580px;
}
.outer_text{
position: absolute;
top: 90%;
}
.outer_text>span{
display: block;
font-size: 12px;
text-align: center;
margin: 0 0 0 60px;
}
.outer_img_line:hover .firsticon{
bottom: 50%;
}
.outer_img_line:hover .outer_opacity_img{
opacity: 0.5;
}
#main_outer2>ul>li{
width: 401px;
height: 645px;
display: inline-block;
position: relative;
overflow: hidden;
}
.outer_opacity_img2{
width: 400px;
}
.outer_img_icon2{
position: absolute;
width: 32px;
height: 32px;
top: 150%;
left: 45%;
}
.outer_text2{
font-size: 12px;
position: absolute;
text-align: center;
}
.outer_img_line2:hover .outer_img_icon2{
top:50%;
}
.outer_img_line2:hover .outer_opacity_img2{
opacity: 0.5;
}이미지에 마우스를 올리면 이번에는 css로 opacity 값을 바꿔줄 수 있도록 하였다.
3. javascript 코드
var 이미지체인지2 = document.querySelector("#imgchange2");
var 이미지체인지3 = document.querySelector("#imgchange3");
var 서치 = document.querySelector("#searchclick");
var 탑서치 = document.querySelector("#topsearchline");
var 탑클로즈 = document.querySelector("#imgclose");
서치.addEventListener('click', function(){
탑서치.style.top = "0px";
});
탑클로즈.addEventListener('click',function(){
탑서치.style.top = "-140px"
})
이미지체인지.addEventListener('mouseover', function(){
이미지체인지.src = "outer_change_1.jpg"
})
이미지체인지.addEventListener('mouseout', function(){
이미지체인지.src = "outer.img1.jpg"
})
이미지체인지2.addEventListener('mouseover', function(){
이미지체인지2.src = "outer_change_img2.jpg"
})
이미지체인지2.addEventListener('mouseout', function(){
이미지체인지2.src = "outer.img2.jpg"
})
이미지체인지3.addEventListener('mouseover', function(){
이미지체인지3.src = "outer_change_img3.jpg"
})
이미지체인지3.addEventListener('mouseout', function(){
이미지체인지3.src = "outer.img3.jpg"
})이미지에 마우스를 올리면 이미지가 바뀌고 이미지에서 마우스 밖으로 나가면 원래 이미지로 바꾸도록 구성하였다.
