모달 박스 만들기 | 웹 개발 튜토리얼

소개

이 프로젝트에서는 웹 페이지에서 표시하고 숨길 수 있는 모달 박스 컴포넌트를 만드는 방법을 배우게 됩니다. 모달 박스는 웹 애플리케이션에서 현재 페이지에서 벗어나지 않고 추가 콘텐츠나 양식을 표시하는 데 일반적으로 사용됩니다.

👀 미리보기

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다.

모달 박스의 HTML 구조를 설정하는 방법
모달 박스를 표시하고 숨기는 기능을 구현하는 방법
숨겨진 후 모달 박스가 다시 표시되는 것을 방지하기 위해 이벤트 버블링 (event bubbling) 을 처리하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

HTML, CSS 및 JavaScript 를 사용하여 모달 박스를 생성할 수 있습니다.
JavaScript 함수를 사용하여 모달 박스의 가시성을 제어할 수 있습니다.
이벤트 버블링을 방지하여 모달 박스가 예상대로 작동하도록 할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── bootstrap.min.css
├── bootstrap.min.js
├── index.html
├── jquery.min.js
└── style.css

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

✨ 솔루션 확인 및 연습

표시 및 숨기기 기능 구현

이 단계에서는 모달 박스를 표시하고 숨기는 기능을 구현하는 방법을 배웁니다.

index.html 파일 하단의 <script> 섹션을 찾습니다.
<script> 섹션에서 다음 코드를 찾을 수 있습니다.

// TODO
let signModalDoc = document.querySelector("#myModal");
function handleClick(e) {
  signModalDoc.style.display = "block";
  event.stopPropagation();
}
function handleOk(e) {
  signModalDoc.style.display = "none";
  event.stopPropagation();
}

각 함수의 목적을 이해합니다.
- handleClick(e): 이 함수는 "Sign Up Now" 버튼을 클릭하면 호출됩니다. 모달 박스의 display 속성을 'block'으로 설정하여 모달 박스를 표시합니다.
- handleOk(e): 이 함수는 닫기 "X" 버튼 또는 모달 박스 내부의 "OK" 버튼을 클릭하면 호출됩니다. 모달 박스의 display 속성을 'none'으로 설정하여 모달 박스를 숨깁니다.
두 함수 모두의 event.stopPropagation() 라인은 클릭 이벤트가 상위 요소로 버블링 (bubbling) 되는 것을 방지하는 데 사용되며, 이는 숨겨진 후 모달 박스가 다시 표시되는 것을 방지합니다.