2021.08.12

class 조작 메서드

1. 선택자.classList.add('추가할 객체');
   -> class 값을 추가 할 수 있다

2. 선택자.className = '추가할 객체';
   -> 마찬가지로 class값을 추가하지만 기존에 있던 class값을 삭제한다

3. 선택자.classList.remove('삭제할 객체');
   -> class를 삭제할 수 있음

4. 선택자.classList.toggle('추가 혹은 삭제할 객체');
   -> class를 추가 혹은 삭제할 때 사용
   (추가되어있는 경우에는 삭제, 삭제되어있는 경우에는 추가)

5. 선택자.classList.contains('찾을 클래스이름')
   -> 값이 존재하는지 체크한다.(true / false)

기존태그에서 발생하는 기본이벤트 발생 막기

event.preventDefault();
= e.preventDefault();

function (e) {
e.preventDefault();
}

위처럼 매개변수를 event 또는 e로 주어 해당 매개변수에 preventDefault 메서드를 사용한다.

각 태그에 설정되어 있는 기본 브라우저 작동들이 실행되지 않게 만든다.

응용 예제

탭메뉴 기본

    <script>
      let box = document.querySelector('.tab_content');
      let menu = document.querySelectorAll('.menu > li > a');
      let con = document.querySelectorAll('.tab_con');

      for (let i = 0; i < menu.length; i++) {
        menu[i].addEventListener('click', function (e) {
          e.preventDefault(); // a 태그의 링크기능을 통한 페이지 새로고침을 막아줌

          for (let j = 0; j < menu.length; j++) {
            menu[j].classList.remove('active');
            con[j].classList.remove('active');
          }

          this.classList.toggle('active');
          con[i].classList.toggle('active');
        });
      }
      menu[0].click();
    </script>

주요 css 코드

      .tabs li a.active {
        margin: 30px 0 0 0;
        padding: 10px 0 10px 0;
        background: #555;
        color: yellowgreen;
      }

      .tab_con.active {
        display: block;
      }

위의 설정한 클래스 .active를 선택자에 바로 이어서 작성하여 동레벨에 있는 선택자로 설정한 뒤 해당 클래스가 입력되면 바뀌는 부분을 작성해준다.

script 내 이벤트 핸들러 함수에 classList.toggle로 클래스 이름을 붙혀 css를 변경해주고 classList.remove를 사용해서 클릭이벤트가 발생했을때 변경되었던 클래스를 제거하는 초기화를 진행하여 최근에 클릭된 부분만 변경되도록 한다.

모바일 탭메뉴

    <script>
      let toggle = document.querySelector('.toggle'); // 햄버거 버튼
      let sidnav = document.querySelector('.sidnav'); // 서랍메뉴박스
      let close = document.querySelector('.close'); // 닫기버튼

      toggle.onclick = function () {
        sidnav.classList.toggle('on');
      };

      close.onclick = function () {
        sidnav.classList.remove('on');
      };
    </script>

주요 css 코드

      .sidnav {
        height: 100%;
        position: fixed;
        z-index: 10;
        top: 0;
        left: -400px;
        padding: 100px 150px 0 50px;
        background-color: rgba(0, 0, 0, 0.7);
        overflow-x: hidden;
        transition: 1s;
      }
      .on {
        left: 0;
      }

메뉴가 나오는 박스를 화면 밖으로 left -400px을 주어 내보낸뒤 햄버거 모양의 버튼을 클릭하면 on이라는 클래스가 붙어 left가 0이 되로록 해주어 메뉴가 드러나도록한다.

아코디언 탭메뉴

    <script>
      let btn = document.querySelectorAll('.aco');

      for (let i = 0; i < btn.length; i++) {
        btn[i].addEventListener('click', function () {
          this.classList.toggle('on');
          // this.nextElementSibling.style.display = 'block';
          this.nextElementSibling.classList.toggle('show');
        });
      }
    </script>

주요 css 코드

      .show {
        display: block !important;
      }

nextElementSibling으로 show라는 클래스에 정의된 display: block을 사용하여 탭을 클릭하면 해당 탭메뉴 아래 내용이 나타나게 된다.

슬라이더

    <script>
      let imgbox = document.querySelector('.imgbox');

      let num = 0;

      setInterval(slide, 2000);

      function slide() {
        num++;
        if (num == 3) {
          num = 0;
        }
        imgbox.style.left = `${num * -700}px`;
      }
    </script>

이미지 3개가 있는데 각 이미지의 너비가 700px이고 이미지를 포함라는 ul박스가 2100px로 이미지를 포함시키고 해당 ul박스를 내부에 포함하는 박스의 너비와 높이를 지정하고 overflow: hidden으로 넘치는 부분을 감춘다. 그리고 setInterval로 imgbox.style.left = ${num * -700}px;을 반복하여 이미지를 옆으로 700px만큼 이동시켜 실제 화면에는 이미지가 움직이는 것처럼 보여진다.

좌로 이동중

종합응용예제

위에서 구현했던 기능을 한꺼번에 구현한 사이트 예제이고

아래 코드의 기능만 새로 추가된 것으로 구현에는 두가지 방법이 있다.

상단 메뉴에서 서브 메뉴 표현법

첫번째

      let topMenu = document.querySelectorAll('.gnb>li>a');
      let subMenu = document.querySelectorAll('.submenu');

      for (let i = 0; i < topMenu.length; i++) {
        topMenu[i].addEventListener('click', function () {
          if (subMenu[i].classList.contains('active')) {
            for (let j = 0; j < topMenu.length; j++) {
              topMenu[j].classList.remove('active');
              subMenu[j].classList.remove('active');
            }
          } else {
            for (let j = 0; j < topMenu.length; j++) {
              topMenu[j].classList.remove('active');
              subMenu[j].classList.remove('active');
            }
            this.classList.toggle('active');
            subMenu[i].classList.toggle('active');
          }
        });
      }

active 클래스에 정의된 display: block;을 클릭이벤트에 따라 추가했다가 삭제했다가 하여 서브메뉴가 나타났다 사라진다.

그리고 클릭 이후 새로운 클릭이 발생했을때 block으로 바뀐 서브메뉴들을 반복문을 이용해 다시 none으로 초기화해주고 해당 부분만 다시 block으로 바꾸어준다.

하지만, 위만 처리하면 자기자신을 클릭했을때 서브메뉴가 사라지지는 않는다. 그래서 조건문을 붙혀 classList.contains('active')로 해당 클래스를 포함하고 있으면 none으로 초기화를 아니라도 다시 한번 none 초기화 후 클릭부분만 block으로 바뀌도록 해주면 자기자신을 클릭할때도 active를 포함하고 있기에 서브메뉴가 none으로 바뀌고 이벤트 함수가 종료되어 원하던 셀프초기화가 가능해진다.

두번째

      let topMenu = document.querySelectorAll('.gnb>li');
      let subMenu = document.querySelectorAll('.submenu');

      for (let i = 0; i < topMenu.length; i++) {
        topMenu[i].addEventListener('mouseover', function () {
          subMenu[i].style.height = '120px';
        });
        topMenu[i].addEventListener('mouseout', function () {
          subMenu[i].style.height = '0';
        });
      }

위는 클릭이 아니라 mouseover, out으로 각각 해당 서브메뉴에 높이를 조절하여 메뉴가 보이는 정도를 조절했다.

때문에 기존 서브메뉴 css에 높이를 0으로 설정해놓고 mouseover이벤트가 발생했을때 높이를 입력해주어 화면에 나타내는 방식이고 다시 mouseout이벤트가 발생했을때 높이를 0으로 하여 화면에서 사라지게 한다.

위 두 방법중 클릭이벤트는 탭메뉴에 주로 사용, 마우스 효과는 상단 메뉴에 주로 사용한다.