본문으로 건너뛰기

모달의 구조 및 스타일링

모달의 구조 및 스타일링

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;
}

이 기본 구조와 스타일링을 통해 모달이 효과적으로 표시됩니다.