Guidelines
Practice
모달(Modal)이란?
웹에서 "모달"은 사용자의 주의를 특정한 내용이나 액션에 집중시키는 사용자 인터페이스(UI) 요소를 말해요.
모달은 주로 다음과 같은 상황에 사용해요.
-
알림 메시지 - 사용자에게 중요 알림을 전달할 때
-
확인 메시지 - 중요 액션 전 확인이 필요할 때 (예: 데이터를 삭제하기 전 사용자의 확인)
-
폼 제출 - 사용자로부터 정보를 입력받을 때 (예: 로그인 창, 회원 가입 폼)
템플릿 코드 설명
<div id="modal"> <div class="modal-content"> <div class="modal-close">×</div> <div id="modal-image"></div> <div id="modal-text"></div> </div> </div>
-
<div id="modal">
: 이 태그는 전체 모달 창을 나타냅니다. -
<div class="modal-content">
: 이 내부 태그는 모달의 주요 내용을 담고 있습니다. 이 안에 모든 정보나 요소들이 들어갑니다. -
<div class="modal-close">×</div>
: 이 부분은 모달을 닫을 때 사용하는 "닫기" 버튼을 나타냅니다. 여기서×
는 'x' 모양의 문자를 나타냅니다. -
<div id="modal-image"></div>
: 이 태그는 이미지를 표시하는 부분을 위한 공간입니다. 여기에 원하는 이미지를 삽입할 수 있습니다. -
<div id="modal-text"></div>
: 이 부분은 텍스트를 표시하기 위한 공간입니다. 여기에 원하는 메시지나 정보를 삽입할 수 있습니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help