Guidelines
Practice
모달의 구조 및 스타일링
CSS 활용해 모달을 스타일링 해보겠습니다.
모달의 기본 구조
HTML 태그와 클래스:
모달은 <div id="modal">
로 감싸져 있습니다. 내부적으로 헤더, 이미지 박스, 푸터의 세 구역으로 구분됩니다.
<div id="modal"> <div class="modal-content"> <div class="modal-header">...</div> <div class="modal-img-box">...</div> <div class="modal-footer">...</div> </div> </div>
모달의 기본 스타일링
모달은 전체 화면에 고정되며 반투명한 검정 배경을 가집니다.
CSS
#modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); }
모달 컨텐츠는 흰색 배경과 둥근 모서리를 가집니다.
CSS
.modal-content { background-color: #fff; border-radius: 4px; }
버튼 및 아이콘 스타일링
닫기 버튼은 상단 오른쪽에 위치합니다.
<div class="modal-header"> <span class="close-btn"> <img class="close-img" src="..." /> </span> </div>
CSS
.close-btn { cursor: pointer; } .close-img { width: 20px; height: 20px; }
모달 내 이미지는 중앙 배치되며, 최대 크기가 제한됩니다.
CSS
.modal-img { max-width: 100%; max-height: 500px; margin: 0 auto; }
이 기본 구조와 스타일링을 통해 모달이 효과적으로 표시됩니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help