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

모달의 구조 및 스타일링

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

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

다음 내용이 궁금하다면?

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