웹 애플리케이션에서 모달 창은 사용자와 상호작용하는 중요한 요소입니다. 모달 창은 주로 팝업 창이나 경고창으로 사용되며, 사용자에게 추가 정보를 요구하거나 작업의 확인을 받는 용도로 사용됩니다. 이번 블로그 포스트에서는 자바스크립트와 CSS Grid를 사용하여 웹 애플리케이션의 모달 창을 구현하는 방법을 알아보겠습니다.

HTML Markup 작성하기

먼저, 모달 창을 위한 HTML Markup을 작성해야 합니다. 일반적으로 모달 창은 부모 요소로 감싸지는 팝업 영역과 팝업 내용을 포함하는 컨텐츠 영역으로 구성됩니다. 아래는 간단한 예시입니다.

<div class="modal">
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>This is the content of the modal.</p>
    <button class="close-button">Close</button>
  </div>
</div>

CSS Grid로 모달 창 스타일링하기

CSS Grid를 사용하여 모달 창을 스타일링할 수 있습니다. 모달 창은 보통 화면의 중앙에 위치하도록 설정하는 것이 일반적입니다. 이를 위해 다음과 같은 CSS 코드를 작성할 수 있습니다.

.modal {
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}

위 코드에서는 display: grid 속성을 사용하여 모달 창을 그리드 컨테이너로 설정하였습니다. place-items: center 속성은 모달 창을 수직 및 수평으로 중앙에 위치시키도록 설정합니다. height: 100vh와 width: 100%는 모달 창이 화면 전체를 차지하도록 설정하는 부분입니다.

자바스크립트로 모달 창 제어하기

이제 모달 창을 자바스크립트로 제어해야 합니다. 모달 창은 일반적으로 어떤 이벤트를 트리거하여 나타나게 하거나 사라지게 할 수 있습니다. 예를 들어, 버튼 클릭 시 모달 창이 나타나도록 하거나 배경 클릭 시 모달 창이 사라지도록 할 수 있습니다.

const modal = document.querySelector('.modal');
const closeButton = document.querySelector('.close-button');

// 모달 창 보이기
function openModal() {
  modal.style.display = 'grid';
}

// 모달 창 숨기기
function closeModal() {
  modal.style.display = 'none';
}

// 이벤트 리스너 등록
closeButton.addEventListener('click', closeModal);
modal.addEventListener('click', function(event) {
  if (event.target === modal) {
    closeModal();
  }
});

위 자바스크립트 코드는 모달 창을 열고 닫는 기능을 구현한 예시입니다. openModal() 함수는 모달 창을 보이도록 스타일을 설정하고, closeModal() 함수는 모달 창을 숨기도록 스타일을 설정합니다. 이벤트 리스너를 등록하여 ‘Close’ 버튼 클릭 시 closeModal() 함수가 실행되며, 모달 배경 클릭 시 모달이 사라지도록 하였습니다.

마무리

이제 자바스크립트와 CSS Grid를 사용하여 웹 애플리케이션의 모달 창을 구현하는 방법을 알아보았습니다. 모달 창은 화면 중앙에 위치하고 사용자의 입력을 받는 중요한 요소로 사용됩니다. 이를 통해 사용자 경험을 개선하고, 웹 애플리케이션의 기능을 보다 유연하게 확장할 수 있습니다.

#웹개발 #모달창