프로젝트 의 JavaScript 스킬 트리

반응형 모달 박스 만들기

초급

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

javascriptweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

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

👀 미리보기

Modal box demonstration gif

🎯 과제

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

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

🏆 성과

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

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

강사

labby
Labby
Labby is the LabEx teacher.