본문으로 건너뛰기

모달 스타일

모달 스타일

모달의 오버레이(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는 모달 창을 중앙에 배치하고, 배경을 반투명한 검은색으로 하여 모달이 활성화되면 사용자의 주목을 끌 수 있도록 합니다.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!