소개
이 프로젝트에서는 웹 페이지에서 표시하고 숨길 수 있는 모달 박스 컴포넌트를 만드는 방법을 배우게 됩니다. 모달 박스는 웹 애플리케이션에서 현재 페이지에서 벗어나지 않고 추가 콘텐츠나 양식을 표시하는 데 일반적으로 사용됩니다.
👀 미리보기
🎯 과제
이 프로젝트에서는 다음을 배우게 됩니다.
- 모달 박스의 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) 되는 것을 방지하는 데 사용되며, 이는 숨겨진 후 모달 박스가 다시 표시되는 것을 방지합니다.
기능 테스트
index.html파일을 저장합니다.- 브라우저에서 웹 페이지를 새로 고칩니다.
- "Sign Up Now" 버튼을 클릭하여 모달 박스가 나타나는지 확인합니다.
- 닫기 "X" 버튼 또는 모달 박스 내부의 "OK" 버튼을 클릭하여 모달 박스가 사라지는지 확인합니다. 최종 결과는 다음과 같아야 합니다.
축하합니다! 모달 박스의 표시 및 숨기기 기능을 성공적으로 구현했습니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
