[웹] 인프런메인페이지 구조짜기 - JAVASCRIPT[2]

이제 자격증시험까지 얼마 남지 않아서 작업물 포스팅에는 조금 딜레이가 생길것같다.

 

암기해야할게 너무 많은데 외워지지도 않고....60점만 넘으면 되는데

 

그래서 오늘은 슬라이드 버튼부분 조금 손본거랑 돋보기 아이콘 클릭시 검색창이 뜨는 기능을 추가하였다.

 

 

Slide Script

 

<!-- slide script -->

<script>

    let prev = document.querySelector('.arrow-left');

    let next = document.querySelector('.arrow-right');

    let slideList = document.querySelectorAll('.test');

    var count = 0;

    next.addEventListener('click', nextSlide );

    function nextSlide() {

            if(count < slideList.length-4) {

            count += 1;

            slideList[count-1].style.marginLeft = '-70px';

        } else {

            count = 0;

            for (let i = 0; i < slideList.length-1; i++) {

                slideList[i].style.marginLeft = '7px';

            }

        }

        };

</script>

크게 달라진 부분은 없다.

 

 

Modal html

 

<li class="search">

 

 <a href="#">

 

    <i class="fas fa-search"></i>

 

</a>

 

</li>

 

search 라는 클래스명을 추가하고

 

<div class="modal">

    <input type="text" placeholder="원하는 강좌를 찾아보세요. ^^">

</div>

 

modal 을 띄울 div 를 하나 만들고

 

Modal CSS

 

/* modal */

.modal {

background:rgba(0,0,0,0.9);

position: fixed;

top:0;

bottom:0;

left:0;

right:0;

z-index: 100;

text-align: center;

display: none;

}

.modal input[type=text] {

width:60%;

margin: auto;

background: none;

border:none;

border-bottom:2px solid #666666;

font-size:4rem;

font-weight:600;

padding:30px;

margin-top:10%;

color:white;

}

 

 

인프런에서 검색아이콘을 클릭했을때와 최대한 동일하게 만들었고 다른점은 X 버튼을 따로 만들지는 않았다.

어차피 검은바탕 클릭하면 창이 닫히도록 되어있다.

 

Modal JAVASCRIPT

 

<!-- modal script -->

<script>

    let search = document.querySelector('.search');

    let modal = document.querySelector('.modal');

    search.addEventListener('click', function() {

        modal.style.display = 'block';

    });

    modal.addEventListener('click', function(e) {

        if(e.target == modal) {

            modal.style.display = 'none';

        }

    })

</script>

 

이부분은 별것없다. 그냥 css 를 javascript 로 제어만 해주면 해결되는 문제다.

 

 

 

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.