231225 | Notion

서브메뉴 만들어보기, classList 다루기

Untitled

이런 네비게이션 바를 만들어볼 것이다.

부트스트랩을 알려준다. 자바스크립트 라이브러린데, 웹개발에서 자주쓰는 버튼, 카드, 리스트, nav…등등을 포함하고 있는 라이브러리임.

부트스트랩에서 제공하는 임포트 링크를 html에 추가하거나, Starter template으로 html파일내용을 채워주면 된다..

Untitled

이 코드임…

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

위의 값을 복사하고 나면… UI들을 부트스트랩 홈페이지에서 html문서를 복붙하는 것으로도 만들 수 있다..

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <nav class="navbar navbar-light bg-light">
        <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/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

위 네비게이션 바와 아래 서브메뉴는 모두 부트스트랩에서 긁어온 것이다… 이게 뭐람..

아무튼 우리가 주목할건 자바스크립트이므로… 이런 UI 구성은 주가 아니다. 부트스트랩이용해서 빠르게 만들고 자바스크립트에만 집중하자.

Untitled

이 서브메뉴를 가렸다가, 버튼을 누르면 등장하게 해보자.

이전에는 display를 none으로 두었다가, block으로 두는 방식으로 이 기능을 구현했는데, 이번에는 클래스를 탈부착하는 방식으로 구현한다고 함.

하나 새로 배웠다. 하나의 class속성에 여러 값을 매길 수 있다. 이때는 공백문자로 구분한다고 함. 다음과 같다.

<ul class="list-group show">

이러면 해당 <ul>에는 list-group과 show 두개의 클래스가 적용됨.