본문으로 건너뛰기
실습하기

모달(Modal)이란?

웹에서 "모달"은 사용자의 주의를 특정한 내용이나 액션에 집중시키는 사용자 인터페이스(UI) 요소를 말해요.

모달은 주로 다음과 같은 상황에 사용해요.

  • 알림 메시지 - 사용자에게 중요 알림을 전달할 때

  • 확인 메시지 - 중요 액션 전 확인이 필요할 때 (예: 데이터를 삭제하기 전 사용자의 확인)

  • 폼 제출 - 사용자로부터 정보를 입력받을 때 (예: 로그인 창, 회원 가입 폼)


템플릿 코드 설명

<div id="modal">
  <div class="modal-content">
    <div class="modal-close">&times;</div>
    <div id="modal-image"></div>
    <div id="modal-text"></div>
  </div>
</div>

  1. <div id="modal">: 이 태그는 전체 모달 창을 나타냅니다.

  2. <div class="modal-content">: 이 내부 태그는 모달의 주요 내용을 담고 있습니다. 이 안에 모든 정보나 요소들이 들어갑니다.

  3. <div class="modal-close">&times;</div>: 이 부분은 모달을 닫을 때 사용하는 "닫기" 버튼을 나타냅니다. 여기서 &times;는 'x' 모양의 문자를 나타냅니다.

  4. <div id="modal-image"></div>: 이 태그는 이미지를 표시하는 부분을 위한 공간입니다. 여기에 원하는 이미지를 삽입할 수 있습니다.

  5. <div id="modal-text"></div>: 이 부분은 텍스트를 표시하기 위한 공간입니다. 여기에 원하는 메시지나 정보를 삽입할 수 있습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!