[JS] DOM객체 ( feat.모달만들기연습)

Suji Kang·2023년 7월 17일

📌 DOM객체

핵심은? javascript 를 통해서 스타일변경, 이벤트효과, ...주는 것들은, html 문서 속의 요소를 객체로 받아오고, 그 객체의 key(속성)에 특정 값을 대입하여 변경하는 것

예를들어, p 태그 의 글씨크기를 20px 로 설정

👉 p태그 를 객체로 받아오기
👉 p태그.style.fontSize = '20px';

예를들어, div 태그 의 class 이름 변경

👉 div태그를 객체로 받아오기
👉 div태그.클래스이름 = '클래스이름';

❗️이벤트를 주는 방법

모든 html 태그들에는 이벤트를 줄수있다.

❗️이벤트란?

사용자와 컴퓨터 간의 상호작용
ex) 마우스클릭, 키보드 누르기, 마우스 더블클릭, ....

모드 html 태그들에는 이벤트가 발생했을떄, 실행시키고자 하는 행위를 속성에 알려줄수 있다.

<input id="email" type="email" class="input" on이벤트명="자바스크립트코드"/>

ex)
<div onClick="f2()" onDoubleClick="f3()"></div>
해당 div태그가 클릭 이벤트가 발생한다면 f2()가 실행됨...
해당 div태그가 더블클릭 이벤트가 발생한다면 f3()가 실행됨...

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>modal practice</title>
    <style>
      .modal-wrapper {
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        display: none;
        justify-content: center;
        align-items: center;
      }
      .modal {
        background-color: white;
        width: 400px;
        min-height: 300px;
        max-height: 700px;
        overflow: scroll;
      }
    </style>
  </head>
  <body>
    <button>click!</button>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <div class="modal-wrapper">
      <div class="modal">
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
      </div>
    </div>
  </body>
</html>

🌟 여기서 이곳에 집중!!!!

 .modal-wrapper {
        display: none;
      }

❗️ html 에서 modalOpen button 클릭하는것 추가.

<button onclick="modalOpen()">click!</button>

❗️ html 에서 modalClose button 클릭하는것 추가.

<button onclick="modalClose()">close</button>

👉 modalOpen / modalClose 함수만들기(function)

.modal-wrapper 가 display: none; 인것을 DOM 요소 선택후, 클릭했을떄 display 로 다시 보이게 설정.

<script>
      const modalOpen = () => {
        // console.log('click')
        //클래스 이름이 modal-wrapper인 요소를 객체로 받아오기
        let modalWrapper = document.querySelector('.modal-wrapper');
        //css 에 display 속성값을 flex로 바꿔주기
        modalWrapper.style.display = 'flex';
        //body 태그를 가져와서
        let body = document.querySelector('body');
        //css overflow 속성값을 hidden으로 바꿔주기
        body.style.overflow = 'hidden';
      }
    const modalClose = () => {
        let modalWrapper = document.querySelector('.modal-wrapper');
        modalWrapper.style.display = 'none'
        //body 태그를 가져와서
        let body = document.querySelector('body');
        //css overflow 속성값을 visible 으로 바꿔주기
        body.style.overflow = 'visible';
      }
    </script>

👉 onclick 추가한후 html code

 <body>
    <button onclick="modalOpen()">click!</button>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <h1>내용</h1>
    <div class="modal-wrapper">
      <div class="modal">
        <button onclick="modalClose()">close</button>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        <h1>내용</h1>
        회원가입이 완료되었습니다.
      </div>
    </div>