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

모달 스타일

모달의 오버레이(Overlay, 모달을 뒤의 배경을 흐리게 처리)와 모달 내부를 어떻게 스타일링 할 수 있을까요?

HTML

<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. #modal: 전체 모달의 외부 컨테이너입니다.

  2. .modal-content: 실제 모달 내부의 주요 내용을 담당하는 컨테이너입니다.

  3. .modal-close: 모달을 닫는 버튼입니다. &times;는 'X' 모양의 문자를 의미합니다.

  4. #modal-image: 이미지를 표시하기 위한 영역입니다.

  5. #modal-text: 텍스트를 표시하기 위한 영역입니다.


CSS

CSS
#modal {
  display: none;
  position: fixed;
  z-index: 20;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}
  • #modal: 모달 전체의 배경을 설정합니다.
    • display: none;: 초기에는 모달이 화면에 표시되지 않도록 합니다.
    • position: fixed;: 스크롤(Scroll)할 때도 모달이 화면에 고정되게 합니다.
    • background-color: rgba(0,0,0,0.4);: 반투명한 검은색 배경을 설정해 뒷 배경이 약간 보이도록 합니다.
CSS
.modal-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: white;
  margin: auto;
  padding: 32px 16px 16px 18px;
  width: 95%;
  position: relative;
  max-width: 500px;
  border-radius: 8px;
}
  • .modal-content: 실제 모달 창의 스타일을 설정합니다.
    • display: flex;: 내부 요소들을 flex 레이아웃에 배치합니다.
    • flex-direction: column;: 요소들을 세로 방향으로 나열합니다.
    • background-color: white;: 모달 창의 배경색을 흰색으로 합니다.
CSS
.modal-close {
  color: #aaaaaa;
  position: absolute;
  font-size: 32px;
  font-weight: bold;
  right: 6px;
  top: -10px;
}
  • .modal-close: 닫기 버튼의 스타일을 설정합니다.
    • position: absolute;: 모달 창 내에서 버튼의 위치를 절대적으로 지정합니다. 이를 통해 오른쪽 상단에 배치할 수 있습니다.
CSS
.modal-close:hover,
.modal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
  • 닫기 버튼 위에 마우스를 올리거나 포커스했을 때의 스타일을 설정합니다.

이렇게 설정된 CSS는 모달 창을 중앙에 배치하고, 배경을 반투명한 검은색으로 하여 모달이 활성화되면 사용자의 주목을 끌 수 있도록 합니다.

다음 내용이 궁금하다면?

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