bootstrap이용한 서브메뉴, classList, jQuery

bootstrap: css, html, js 디자인을 편하게 쓰기 위한 라이브러리

https://getbootstrap.com/docs/5.1/getting-started/introduction/

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

여기 아래에 start templete를 통쨰로 복사에서 새 html에 붙여넣고 시작해보자.

가령 버튼이 필요하면 사이트에서 button을 검색하면 각종 디자인이 나온다.

이를 body안에 넣으면 그대로 출력된다.

여기선 실제 웹에 자주 쓰는 디자인인 navbar를 사용해보자.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS + main.css 연결 포함 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-light bg-light"> <!--복붙한 navbar 코드이다.-->
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav> 



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


  </body>
</html>

Hello, world!

현재는 그냥 단순히 bar만 있는 상태이다. 눌러야 무언가 나오게 출력해야한다.

이런 동적 UI를 구성하려면?

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

2. 버튼 누르면 보여달라고 JS 짜기

를 해야한다.

우선 누르면 서브메뉴 디자인 역시 bootstrap에 list로 검색시 쭈욱 나온다.

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

이걸 nav 밑에 바로 추가하면

Hello, world!

An item
A second item
A third item
A fourth item
And a fifth one

이렇게 된다.

이 리스트는 평소에 나오면 안되니 css에서 display none을 설정한다.

.list-group { 
    display: none;  /*평소에 숨기게 설정. 반대는 block */
}

.show {
    display: block; 
}

평소에 나오면 안되는 것은 list-group 전체.

그리고 나오는 경우에 대한 클래스 show를 미리 짠다. (클래스 선언은 점을 찍고 이름쓰고 {}로 하는 형태의 문법이다)

그리고 list 밑에 <script>를 열고 아래와 같이 eventlistener를 삽입한다.

// classname으로 찾을때 인덱싱은 1개밖에 없어도 꼭 하는게 안전하다.
        document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
           document.getElementsByClassName('list-group')[0].classList.toggle('show');
        })

여기서 clasasList.add('show'); 도 가능하지만 이렇게되면 list-group에 show만 추가된 상태로 고정이 되버린다.

toggle을 사용하면 있으면 제거하고 없으면 추가하는 의미이므로 왔다갔다하는 UI를 작성할때 toggle로 편리하게 구현한다.

Class가 add가 되면

list-group show <-띄어쓰기 1개 기준으로 클래스가 2개 이상이 나열될 수 있다.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-light bg-light"> <!--복붙한 navbar 코드이다.-->
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav> 
      <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> // classname으로 찾을때 인덱싱은 1개밖에 없어도 꼭 하는게 안전하다.
        document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
           document.getElementsByClassName('list-group')[0].classList.toggle('show');
        })
    

    </script>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    


  </body>
</html>

Hello, world!

An item
A second item
A third item
A fourth item
And a fifth one

잘 구현이 된다.

CSS가 편하다면

document.querySelector('CSS문법')

이렇게도 작성이 가능하다. 즉

document.querySelector('.list-group')

이렇게 작성하면 클래스 list-group을 선택해준다.

그러나 여러개의 경우 맨 위의 요소만 찾아준다. 따라서 여러개 이름이 중복된 클래스의 경우

document.querySelectorAll('list-group-item)[2]

이런식으로 짜야한다. 인덱스는 당연히 0부터 시작한다.

단. querySelector에는 인덱스를 사용하지 않아야함에 유의한다!

id를 찾는경우 '#아이디이름' 이런식으로 #을 붙여서 찾는다.

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

document.getElementsByClassName('list-group')[0].classList.toggle('show');

})

</script>

그래서 현재 지금까지 작성한 이 내용은

document.querySelector('.navbar-toggler').addEventListener('click', function(){

document.querySelector('.list-group').classList.toggle('show');

})

</script>

이렇게 사용하거나

document.querySelectorAll('.navbar-toggler')[0].addEventListener('click', function(){

document.querySelectorAll('.list-group')[0].classList.toggle('show');

})

</script>

이렇게 인덱스를 붙인 형태로 사용한다.

이 세 코드 모두다 같은 HTML 결과를 출력한다.

근데 보다시피 HTML 줄인건 참 좋은데 JS 코드가 갈수록 길어지고있다!

이를 간결하게 바꾸는게 jQuery, React, Vue 등인데

React와 Vue는 JS가 어느정도 숙련되어야 사용하기 용이하므로 우선 jQuery부터 접해보자.

참고로 jQuery는 JS에 있는 하나의 라이브러리이다.

jQuery 설치하려면

1. jquery cdn 검색

2. 사이트에서 최신버전 minified 클릭

3. 해당하는 script를 내가 사용할 JS의 위에다가 복붙하기. (밑에다하면 적용 안됨!)

그래서 기존의 querySelector는 $로 간단하게. 내용을 바꾸는 innerHTML은 그냥 html()로 줄어든다

css 스타일을 바꾸는 .style.color() 는 .css('바꿀 것', '구체적내용')으로 된다.

jQuery를 쓸거면 jQuery만 써야 작동이 원활하다. 원본 JS랑 섞어쓰면 안된다.

그러면

document.querySelector('.navbar-toggler').addEventListener('click', function(){

document.querySelector('.list-group').classList.toggle('show');

})

</script>

이 내용을 JQuery로 바꿔보면

$('.navbar-toggler').on('click', function(){

$('.list-group').toggleClass('show');

})

</script>

이렇게 바뀐다. (event listener는 on으로 축약된다.)

    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>


    <script> // JQuery 사용버전
        $('.navbar-toggler').on('click', function(){
           $('.list-group').toggleClass('show');
        })

    </script>

즉 이렇게 Jquery를 위에 도입하고 이렇게 쓰는 것이다.

그리고 Jquery는 CSS 연관 애니메이션도 준다.

.hide(); <-display none 효과를 준다.

.fadeOut();

.slideUp();

여기에 적용할 것은 다음과 같다.

    <script> // classname으로 찾을때 인덱싱은 1개밖에 없어도 꼭 하는게 안전하다.
        $('.navbar-toggler').on('click', function(){
           $('.list-group').toggleClass('show').slideToggle();
        })

    </script>

Hello, world!

An item
A second item
A third item
A fourth item
And a fifth one

실행결과는 이러하다. 여닫을때 자연스럽게 사라지는 애니메이션이 추가되었다.

또한 $ 메소드는 querySelectorAll과 같이 중복되는것은 한 번에 찾으며, 일괄 변경하는 특징이 있다.

실전문제: 아래 코드와 css 디자인을 이용하여 버튼 하나 하무데나 만들고 누르면 모달창을 띄우세요.

<div class="black-bg">
  <div class="white-bg">
    <h4>로그인하세요</h4>
    <button class="btn btn-danger" id="close">닫기</button>
  </div>
</div>

.black-bg {
    width : 100%;
    height : 100%;
    position : fixed;   /* 이렇게 하면 맨 앞에 위치한다 */
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
  }
.white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
  }

여기서 아무것도 안하면 처음부터 black-bg, white-bg와 함께 로그인 팝업창이 출력되며 닫기버튼은 보이지도 않는다.

우선 black, white에 대한 display를 none으로 기본 css 설정해준 후에

    <button class="displayAlert">관리자</button>

관리자 버튼을 navbar 바로 위에 이렇게 클래스 이름과 삽입하고

        $('.displayAlert').on('click', function(){
           $('.black-bg, .white-bg, .btn').css('display', 'block');
        })  
        $('.btn').on('click', function(){
           $('.black-bg, .white-bg, .btn').css('display', 'none');
        })

이렇게 여러 클래스를 한번에 지칭하여 css 설정을 바꿔주는 식으로 출력을 해준다.

전체 코드

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="black-bg">
        <div class="white-bg">
          <h4>로그인하세요</h4>
          <button class="btn btn-danger" id="close">닫기</button>
        </div>
      </div> 


    <button class="displayAlert">관리자</button>
    <nav class="navbar navbar-light bg-light"> <!--복붙한 navbar 코드이다.-->
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav> 
      <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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>


    <script> // 작성한 JS
        $('.navbar-toggler').on('click', function(){
           $('.list-group').toggleClass('show').slideToggle();;
        })
        $('.displayAlert').on('click', function(){
           $('.black-bg, .white-bg, .btn').css('display', 'block');
        })  
        $('.btn').on('click', function(){
           $('.black-bg, .white-bg, .btn').css('display', 'none');
        })

    </script>

  </body>
</html>

Hello, world!

로그인하세요

An item
A second item
A third item
A fourth item
And a fifth one

실행결과 잘 작동된다.

블로그 내부 HTML은 css파일이 따로 빠져있어서 작동 반영이 잘 안된 것임에 유의한다.

그러나 클래스 탈부착을해야 확장성이 좋다.

    <script> // 작성한 JS
        $('.navbar-toggler').on('click', function(){
           $('.list-group').toggleClass('show').slideToggle();;
        })
        $('.displayAlert').on('click', function(){
            $('.black-bg, .white-bg, .btn').addClass('show');
        });
        $('.btn').on('click', function(){
            $('.black-bg, .white-bg, .btn').removeClass('show');
        });
    </script>

이렇게 작성하는게 더 좋은데 단, css의 .show 클래스를 제일 밑으로 내려줘야 작동한다.

.list-group { 
    display: none;  /*평소에 숨기게 설정. 반대는 block */
}

.black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
    display: none;
  }
.white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
    display: none;
  } 

  .show {
    display: block; 
}

이렇게 내려야 작동된다. show가 black-bg 위에 있으면 작동되지않는다.

여기서 한 가지 더!

애니메이션 효과는 효율성을 위해 JS보다 CSS에서 줘야 잘 작동한다.

만들고자하는 애니메이션에 대해서 시작스타일과 최종스타일을 CSS 클래스로 만들어야한다.

그리고 JS로 원할 때 최종 스타일로 되도록 코드짜면된다. 그리고 transition주면 끝

이런 애니메이션을 사용할 때에는

display: none;

을 쓰지 않고

visibility: hidden;

을 사용해야 잘 먹힌다.

    .black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
  }
  
  
     .show {
    visibility: visible;
    opacity: 1; 
}

기존 JS는 클래스 탈부착형태이므로 show를 사용한다고 할 떄

visibility로 변경을 조절한다.

opacity는 투명도인데 transition이 1초마다 천천히 변경하게끔 바뀌라고 설정되었다.

물론 메뉴바 슬라이딩을 CSS로 구현하는 애니메이션은 CSS 그 자체의 실력이 요구되는 부분이다.

728x90

'Programming > JavaScript' 카테고리의 다른 글

Tap(for) (0)	2023.11.07
Scroll (0)	2023.11.07
Regular Expression(정규식), 캐러셀, toFixed, parseFloat (0)	2023.11.07
JS에 if문 적용해서 로그인 창, 다크모드, time (0)	2023.11.07
기본 JS 및 동적 UI 만들기 (0)	2023.11.03

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

LeafHT

bootstrap이용한 서브메뉴, classList, jQuery

로그인하세요

'Programming > JavaScript' 카테고리의 다른 글

티스토리툴바

bootstrap이용한 서브메뉴, classList, jQuery

로그인하세요

'Programming > JavaScript' 카테고리의 다른 글

'Programming/JavaScript' 관련글

티스토리툴바