[코딩애플] JavaScript 강의 정리 (Level1 7강 ~ 8강)

이언덕·2024년 3월 28일

스터디 코딩애플 프론트엔드

코딩애플

목록 보기

4/37

7강에 있었던 JQuery는 다루지 않을 것이기 때문에 숙제 부분만 가지고 JS코드로 변경해보았다.

7강 / jQuery 사용법 간단정리

나는 jQuery를 사용하지 않을 것이기 때문에 7강 숙제를 JS코드로 바꾸어 진행할 것이다.

7강 숙제

버튼하나 아무데나 만들고 버튼 누르면 모달창을 띄워오십시오.

모달창 디자인은 아래와 같다.

//index.html
<button class="modal-btn">모달창 버튼</button>

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

// index.css
.black-bg {
  display: none;
  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;
}

.show {
  display: block;
}

3분할을 통해 JS코드를 완성 시켜보자

모달창 버튼, 모달 요소, 모달창 닫는 버튼 가져와서 변수명 지정
const modalBtn = document.querySelector(".modal-btn");
const modal = document.querySelector(".black-bg");
const modalCloseBtn = document.querySelector("#close");

모달창 버튼에 이벤트리스너 부착
modalBtn.addEventListener("click", showModal);

모달창이 나타나는 showModal 함수 생성
function showModal() {
  modal.classList.add("show");
}

모달창 버튼을 누르게 되면 모달창이 잘 뜨는 것을 볼 수 있다.

모달창 닫는 버튼에 이벤트리스너 부착
modalCloseBtn.addEventListener("click", closeModal);

모달창이 닫아지는 closeModal 함수 생성
function closeModal() {
  modal.classList.remove("show");
}

닫기 버튼을 누르면 모달창이 닫히는 것을 볼 수 있다.

디버깅

이전 강의에서 사용했던 .show 클래스에 대한 CSS를 사용해서 모달창에 class를 추가하는 식으로 하려고 했다.
하지만 모달창이 뜨지 않는 이슈를 발견했다.
계속 테스트를 통해 디버깅을 하며 문제를 해결하였다.
문제는 .show 클래스가 .black-bg 클래스 보다 위에 있었는데 .show 클래스를 .black-bg 클래스 밑으로 내리니 문제가 해결되었다.
문제의 CSS 코드
.show {
  display: block;
}
.black-bg {
  display: none;
  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;
}
⬇️
해결 CSS 코드
.black-bg {
  display: none;
  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;
}
.show {
  display: block;
}

8강 / 모달창만들기와 간단한 애니메이션

UI 애니메이션 만드는 법

아래와 같은 애니메이션을 만들어보자

이런 애니메이션을 구현하려면 CSS를 잘하면 된다!

one-way 일방향 애니메이션 만드는 법

시작스타일 만들고 (class로)

최종스타일 만들고 (class로)

원할 때 최종스타일로 변하라고 JS 코드를 짠다.

시작스타일에 transition 추가
A 상태에서 B 상태로만 움직이는 one-way 애니메이션은 다 이렇게 만들면 된다!

간단한 요약만으로는 잘 이해가 되지 않으니 한번 만들어보자

1. 시작스타일 2. 최종스타일을 class로 만들어보기
.black-bg {
  (생략)
  visibility : hidden;
  opacity : 0;
}
.show {
  visibility : visible;
  opacity : 1;
}
기존에 있던 display 어쩌구는 다 버리고 이렇게 코드를 짰다.

display : none을 주면 애니메이션이 잘 동작하지 않기 때문에
그거랑 비슷한 역할을 할 수 있는 visibility : hidden 을 사용했다.
visibility

opacity는 투명도 조절할 수 있는 속성이다.
(0이면 투명 1이면 불투명 0.5면 반투명임)
opacity

3. 원할 때 최종스타일로 변하라고 자바스크립트 코드를 짠다.

이 부분은 버튼을 클릭하면 모달창이 나오는 JS코드를 짜는 것이기 때문에 7강에서 이미 하고 왔다!

4. 시작스타일에 transition 추가
.black-bg {
  (생략)
  visibility : hidden;
  opacity : 0;
  transition : all 1s;
}
.show {
  visibility : visible;
  opacity : 1;
}
transition은 스타일이 변할 때 천천히 변경하라는 뜻이다
지금 class 탈부착시 opacity가 변하는데 그걸 천천히 1초에 걸쳐 변경해준다.
transition

결과를 보면 우리가 원했던 애니메이션 결과가 나오는 것을 볼 수 있다.

여러 애니메이션

아래 사이트를 참고하면서 여러 애니메이션에 대해 공부를 하면 좋을 것 같다.
transition과 transform는 어떨 때 사용해야 하고 animation속성은 뭐가 다른지 파악하는 것이 중요할 것 같다.
transition / transform / animation 속성 사용법

전체코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./test.css" />
    <title>Coding Apple JavaScript</title>
  </head>
  <body>
    <!-- <div id="alert-box">
      알림창임
      <button id="alert-close-btn">❌</button>
    </div>
    <button id="alert-notification-btn">알림창 여는 버튼</button>
    <button id="alert-id-btn">
      로그인
    </button>
    <button
      id="alert-password-btn"
     >
      비밀번호
    </button> -->

    <!-- <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> -->
    <button class="modal-btn">모달창 버튼</button>
    <div class="black-bg">
      <div class="white-bg">
        <h4>로그인하세요</h4>
        <button class="btn btn-danger" id="close">닫기</button>
      </div>
    </div>

    <script src="./test.js"></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>

index.css

#alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
}
.list-group {
  display: none;
}
.black-bg {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  transition: all 1s;
}
.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

.show {
  visibility: visible;
  opacity: 1;
}

index.js

// const notification = document.querySelector("#alert-box");
// const notificationBtn = document.querySelector("#alert-notification-btn");
// const closeBtn = document.querySelector("#alert-close-btn");
// const idBtn = document.querySelector("#alert-id-btn");
// const passwordBtn = document.querySelector("#alert-password-btn");
// const navbarBtn = document.querySelector(".navbar-toggler");
// const subMenu = document.querySelector(".list-group");
const modalBtn = document.querySelector(".modal-btn");
const modal = document.querySelector(".black-bg");
const modalCloseBtn = document.querySelector("#close");

// notificationBtn.addEventListener("click", showNotification);
// closeBtn.addEventListener("click", closeNotification);
// navbarBtn.addEventListener("click", showSubmenu);
// navbarBtn.addEventListener("click", closeSubmenu);
modalBtn.addEventListener("click", showModal);
modalCloseBtn.addEventListener("click", closeModal);

// function showNotification() {
//   notification.style.display = "block";
// }

// function closeNotification() {
//   notification.style.display = "none";
// }

// function handleIdBox(text) {
//   notification.style.display = "block";
//   notification.innerText = text;
// }

// function handlePassWordBox(text) {
//   notification.style.display = "block";
//   notification.innerText = text;
// }

// function toggleSubmenu() {
//   subMenu.classList.toggle("show");
// }

function showModal() {
  modal.classList.add("show");
}

function closeModal() {
  modal.classList.remove("show");
}