1-6강 : 서브메뉴 만들어보기와 classList 다루기

css 짜기 귀찮을때,

Bootstrap 라이브러리 활용

-버튼

-카드

-리스트

-Nav

...등

 

Navbar 만들기

1. 미리 서브메뉴를 html css로 디자인

2. 버튼 누르면 보여달라고 js 짬

-class 탈부착으로도 구현가능

=> class 부착식으로 개발 시 애니메이션 추가 쉬움

=> 나중에 재사용 편리

 

 

버튼 누르면 <ul>에 show 부착해보자

    <ul class="list-group">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
    </ul>


    <script>
        document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){

            // 원하는 요소에 클래스명 추가하는 방법
            document.getElementsByClassName('list-group')[0].classList.add('show');
        })
    </script>

원하는 요소에 클래스명 추가하는 방법

 

버튼 클릭 시 sub 메뉴가 펼쳐진다.

 

Q. 버튼 한 번 더 누르면 숨기기?

classList.toggle('클래스명')

: show가 있으면 제거, 없으면 추가하라는 뜻

 

 

이거 진짜 우아한 형제들 사이트 클론할 때 애는 엄청 먹고, 해결은 못 해서 짜증났던 부분인데,,,

여기서 해결하게 되네요

돌고도는 개발 세계 신난다

 

 

셀렉터들

getElementById()

getElementByClassName()

querySelector()

querySelectorAll()

 

 

-querySelector() 사용예시-

document.querySelector('.list-group')

: class가 list-group인 요소 선택

 

document.querySelector('#test1')

: id가 test1인 요소 선택

 

-> 편리한 querySelector(), 하지만 맨 위에 나오는 한개만 찾아줌 : (

 

 

-querySelectorAll() 사용예시-

-> 다 찾아주는 querySelectorAll()

 

document.querySelectorAll('.list-group-item')

: .list-group-item에 해당하는 모든 요소 다 찾아줌

: 인덱싱 필요