modal

<button class="open__btn">열기</button>
<div class="modal hide">
  <div class="modal__body">
    <div class="close__btn">❌</div>
    <div class="modal__header">
      Modal
    </div>
    <div class="modal__content">
      <p>간략히 설명할 수 있는 모달입니다.
      미리보기나 간단한 설명이 담겨져 있을 수 있고,
      x 버튼을 클릭하거나, 
      모달 바깥 화면을 클릭하거나,
      혹은 esc 클릭하게 되면 모달창이 닫힙니다.
      </p>
    </div>
  </div>
</div>

class Modal {
  constructor(){
    this.$modal = document.querySelector('.modal')
    document.addEventListener('keydown', e=>{
      if (e.keyCode === 27){
        this.closeModal()
      }
    })
    this.$modal.addEventListener('click', e=> {
      if (e.target.classList.contains('close__btn')){
        this.closeModal()
      }
      if (e.target.classList.contains('modal')){
        this.closeModal()
      }
    })
  }
  openModal() {
    this.$modal.classList.remove('hide')
  }
  closeModal() {
    this.$modal.classList.add('hide')
  }
}

const modal = new Modal()
const $openBtn = document.querySelector('.open__btn')
$openBtn.addEventListener('click', ()=>modal.openModal())

.open__btn {
  margin: 30px;
  background-color: #9e9e9e;
  color : white;
  border-radius: 5px;
  padding : 8px 16px;
  cursor: pointer;
}

.modal {
  display:flex;
  position:fixed;
  left: 0;
  top:0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  justify-content : center;
  align-items:center;
}

.modal__body {
  position: relative;
  width: 50%;
  height: 40%;
  background-color : white;
  padding: 16px;
  border-radius:10px;
}

.close__btn {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}

.modal__header {
  padding: 16px 0px;
  font-size: 24px;
  text-align: center;
  color : #999999;
  border-bottom: 1px solid gray;
}

.modal__content {
  margin: 10% 16px;
}
.modal__content p{
  white-space: pre-line;
}

.hide {
  display:none;
}