[자바스크립트] mschief 메인페이지 클론

kim seung chan·2021년 4월 12일

2주간 벨로그 업로드가 없었던 이유는 2주를 기간을 잡고 미스치프 사이트를 클론코딩해 보았다.사용 언어는 html , css , javascript로만 구성하여 만들었고 원래 있던 사이트 코드를 따라서 구성한게 아닌 보여지는 화면만을 가져와 나의 순수한 코드로 만들어 보았다.
바닐라 자바스크립트 연습을 위해서 라이브러리 없는 순수 자바스크립트로만 만들어 보았고 클론코딩한 페이지는 메인페이지 로그인페이지 아웃터페이지 상세페이지로 구성하여 만들어 하나씩 상세하게 벨로그에 업로드 할 예정이다.

이번 벨로그에서는 메인페이지에 대한 코드 리뷰를 할 예정이다.

구현영상

구성요소

햄버거 버튼 애니메이션과 side Bar 만들기
search Bar 만들기
이미지 hover시 애니메이션과 글씨 보이게 하기

html 코드

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./mischief.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="./mischef_outer.html" 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>

햄버거 버튼을 만들기 위해서 input태그를 label태그와 연결하여 span 태그를 3개 만들어 주었다. input 태그를 만든 이유를 check가 된다면 사이드바가 나오게 하기 위해서이다.

css 코드

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;
}

햄버거 아이콘를 span 태그로 만들어 background-color로 세줄을 만들어 주었고 checkbox는 display:none으로 숨겨주었다. transition 값을 주어 애니메이션 효과도 구현해 보았다. sidebar 메뉴는 left 값을 -300을 주었고 체크박스를 눌러준다면 left를 0으로 바꿔주어 사이드 메뉴들이 나오게 하였다.

2. search Bar 만들기

html 코드

<div id="topsearchline">
        <input type="text" id="topsearchbar">
        <img src="./ms-close.png" alt="" id="imgclose">
</div>

css코드

#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;
}

javascript 코드

var 탑서치 = document.querySelector("#topsearchline");
var 탑클로즈 = document.querySelector("#imgclose");

서치.addEventListener('click', function(){
    탑서치.style.top = "0px";
});

탑클로즈.addEventListener('click',function(){
    탑서치.style.top = "-140px"
})

search 박스 값은 top -140px 인데 클릭을 하게되면 0px바뀌게 만들었다.

3. 이미지 hover시 애니메이션과 글씨 보이게 하기

html 코드

<section id="main_2">
            <div class="first_line">
                <ul>
                    <li>
                        <a href="">
                            <div class="screen">
                                <div class="top">MAGO</div>
                                <img src="1.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="screen">
                                <div class="top">MAGO</div>
                                <img src="2.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="screen">
                                <div class="top">MAGO</div>
                                <img src="3.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="second_line">
                <ul>
                    <li>
                        <a href="">
                            <div class="screen2">
                                <div class="bottom">MAGO</div>
                                <img src="4.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="screen2">
                                <div class="bottom">COLLECTION</div>
                                <img src="5.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="screen2">
                                <div class="bottom">ARCHIVE</div>
                                <img src="6.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </section>

css 코드

.first_line{
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
}

.first_line > ul>li{
    display: inline-block;
    width: 33%;
    vertical-align: top;
}

.first_line> ul>li> a{
    display: block;
    text-decoration: none;
}

.screen> img{
    width: 100%;
}

.screen{
    position: relative;
    overflow: hidden;
}

.top{
    position: absolute;
    top:150%;
    left: 45%;
    z-index: 2;
    color: black;
    font-family: 'HelveticaLTWXX-Bold';
    font-weight: bold;
    transition: all .35s;
}

.first_line >ul >li>a:hover .top{
    top:50%;
    text-align: center;
}

.second_line{
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
}

.second_line>ul>li{
    display: inline-block;
    width: 33%;

}

.second_line>ul>li>a{
    display: block;
    text-decoration: none;
}

.screen2{
    position: relative;
    overflow: hidden;
}
.screen2>img{
    width: 100%;
}

.bottom{
    position: absolute;
    top: 150%;
    left: 45%;
    z-index: 2;
    color: black;
    font-family: 'HelveticaLTWXX-Bold';
    font-weight: bold;
    transition: all .35s;
}

.second_line >ul >li>a:hover .bottom{
    top:50%;
    text-align: center;
}

.underline{
    text-decoration: none;
    color: black;
}

a.underline:hover{
    text-decoration: underline;
    cursor: pointer;
}

overflow hidden을 통해 영역 밖으로 나가면 글씨를 안보이게 한 후 마우스를 올리면 글씨를 보이게 했다.

javescript 코드

for(var i=0; i<첫번째줄.length; i++){
    첫번째줄[i].addEventListener("mouseover", function(){
        this.style.opacity ="0.5";
    })
    첫번째줄[i].addEventListener("mouseout", function(){
        this.style.opacity ="1";
    })
}

for문으로 class로 설정한 값을 하나씩 불러와 마우르를 올리면 opacity 효과를 줄 수 있도록 만들었다.

4. 전체코드

html코드

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./mischief.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="./mischef_outer.html" 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" href="">
                <img src="ms-logo.png">
            </a>
           </div>

            <div id= "right_menu">
                <ul>
                    <li><a href="mischief_login.html" 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>
        </header>
        <section id="main_1">
            <div id="movie">
                <iframe width="98%" height="800" src="https://www.youtube.com/embed/SwcdVHRUBE4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </section>
        <section id="main_2">
            <div class="first_line">
                <ul>
                    <li>
                        <a href="">
                            <div class="screen">
                                <div class="top">MAGO</div>
                                <img src="1.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="screen">
                                <div class="top">MAGO</div>
                                <img src="2.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="screen">
                                <div class="top">MAGO</div>
                                <img src="3.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="second_line">
                <ul>
                    <li>
                        <a href="">
                            <div class="screen2">
                                <div class="bottom">MAGO</div>
                                <img src="4.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="screen2">
                                <div class="bottom">COLLECTION</div>
                                <img src="5.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="screen2">
                                <div class="bottom">ARCHIVE</div>
                                <img src="6.jpg" alt="" class="마우스오버">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <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="./mischief.js"></script>
    </body>
</html>

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_1{
    height: 600px;
    
    padding: 157px 30px 100px 30px;
}

#main_2{
    height: 1139.88px;
    
}

footer{
    height: 90px;
    margin: 0 0 0 20px;
}

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;
}

#movie > iframe{
    display: block;
    margin: -150px 0 0 15px;
}

footer > ul{
    font-size: 12px;
    list-style: none;
    display: inline-block;
    padding: 20px 0 0 0;
}

.info{
    padding: 0 0 0 160px;
}


.first_line{
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
}

.first_line > ul>li{
    display: inline-block;
    width: 33%;
    vertical-align: top;
}

.first_line> ul>li> a{
    display: block;
    text-decoration: none;
}

.screen> img{
    width: 100%;
}

.screen{
    position: relative;
    overflow: hidden;
}

.top{
    position: absolute;
    top:150%;
    left: 45%;
    z-index: 2;
    color: black;
    font-family: 'HelveticaLTWXX-Bold';
    font-weight: bold;
    transition: all .35s;
}

.first_line >ul >li>a:hover .top{
    top:50%;
    text-align: center;
}

.second_line{
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
}

.second_line>ul>li{
    display: inline-block;
    width: 33%;

}

.second_line>ul>li>a{
    display: block;
    text-decoration: none;
}

.screen2{
    position: relative;
    overflow: hidden;
}
.screen2>img{
    width: 100%;
}

.bottom{
    position: absolute;
    top: 150%;
    left: 45%;
    z-index: 2;
    color: black;
    font-family: 'HelveticaLTWXX-Bold';
    font-weight: bold;
    transition: all .35s;
}

.second_line >ul >li>a:hover .bottom{
    top:50%;
    text-align: center;
}

.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;
}

#main1{
    width: 1650px;
    position: relative;
    left: 50%;
    display: inline-block;
}

#main_outer>ul{
    height: 606px;
}

.outer_img_line>a>img{
    width: 25%;
}

javascript 코드

var 첫번째줄 = document.querySelectorAll(".마우스오버");
var 서치 = document.querySelector("#searchclick");
var 탑서치 = document.querySelector("#topsearchline");
var 탑클로즈 = document.querySelector("#imgclose");


for(var i=0; i<첫번째줄.length; i++){
    첫번째줄[i].addEventListener("mouseover", function(){
        this.style.opacity ="0.5";
    })
    첫번째줄[i].addEventListener("mouseout", function(){
        this.style.opacity ="1";
    })
}

서치.addEventListener('click', function(){
    탑서치.style.top = "0px";
});

탑클로즈.addEventListener('click',function(){
    탑서치.style.top = "-140px"
})

kim seung chan

이전 포스트

[자바스크립트] 참가자 리스트 프로그램

다음 포스트

[자바스크립트] mschief 메인페이지 클론

구현영상

구성요소

1. 햄버거 버튼 애니메이션과 side Bar 만들기

html 코드

css 코드

2. search Bar 만들기

html 코드

css코드

javascript 코드

3. 이미지 hover시 애니메이션과 글씨 보이게 하기

html 코드

css 코드

javescript 코드

4. 전체코드

html코드

css 코드

javascript 코드

[자바스크립트] 참가자 리스트 프로그램

[자바스크립트] 미스치프 로그인 페이지

0개의 댓글