Softonic

CSS 모달 생성기

단계 1 / 2
결과

모달 대화상자는 전체 화면 레이어 위에 패널을 얹은 구조입니다. 배경은 페이지를 어둡게 하고 상호작용을 막으며, 패널에는 제목, 내용, 동작 버튼이 들어갑니다. 이 생성기는 .modal-backdrop, .modal-panel, .modal-header, .modal-body, .modal-actions 다섯 클래스로 이 구조의 CSS를 작성합니다. 패널 너비, 모서리 반경, 액센트 색상을 정한 뒤 결과를 프로젝트에 복사하세요.

모달 스타일 생성 방법

  1. 1

    패널 너비 설정

    원하는 너비를 픽셀 단위로 입력하세요. 패널이 `min(100%, Npx)`을 사용하므로 작은 화면에 맞춰 줄어듭니다.

  2. 2

    모서리 반경 선택

    패널 모서리의 둥근 정도를 고르세요. 날카로운 사각형부터 완전히 둥근 카드까지 가능합니다.

  3. 3

    액센트 색상 선택

    헤더 상단의 4 px 두께 액센트 바 색상을 고르세요.

  4. 4

    CSS 복사

    코드를 복사하고 마크업에서 같은 클래스 이름(backdrop, panel, header, body, actions)을 사용하세요.

생성된 CSS가 다루는 내용

코드는 다섯 클래스를 스타일링합니다:

  • .modal-backdrop: 고정 전체 화면 레이어. 어두운 반투명 배경(rgba(17, 24, 39, .62)), 중앙 정렬 그리드, 패널 주변 24 px 여백.
  • .modal-panel: min(100%, Npx) 너비의 흰색 카드. 선택한 모서리 반경, 부드러운 그림자, 잘린 모서리.
  • .modal-header: 선택한 색상의 4 px 액센트 바, 그 아래 20 px 24 px 패딩의 제목 영역.
  • .modal-body: 18 px 24 px 패딩의 내용 영역.
  • .modal-actions: 10 px 간격으로 오른쪽 정렬된 버튼 줄.

대응하는 HTML 구조

CSS는 다음 마크업을 기대합니다:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>확인</h2>
    </div>
    <div class="modal-body">
      <p>계속하시겠습니까?</p>
    </div>
    <div class="modal-actions">
      <button>취소</button>
      <button>계속</button>
    </div>
  </div>
</div>

패널은 배경 안에 두세요. 배경이 고정 레이어이고 패널은 그 안에서 중앙에 정렬됩니다. 모달을 열고 닫으려면 앱 코드에서 배경을 추가하고 제거하거나 표시 여부를 전환하세요.

작은 화면 대응

패널 너비는 min(100%, Npx)으로 제한되므로 520 px 설정은 좁은 휴대폰에서 배경의 24 px 여백을 뺀 전체 화면 너비가 됩니다. 동작 줄은 오른쪽 정렬을 유지하고 긴 내용은 페이지와 함께 스크롤됩니다. 일반적인 경우 미디어 쿼리는 필요하지 않습니다.

참고 사항과 한계

이 생성기는 CSS만 출력합니다. 모달을 열고 닫거나 키보드 포커스를 가두거나 ESC 키를 처리하는 JavaScript는 포함되지 않습니다. 해당 로직은 애플리케이션에서 직접 추가하세요.

헤더에는 항상 4 px 액센트 바가 유지됩니다. 필요 없다면 복사한 코드에서 해당 규칙을 지우거나 색상을 바꾸세요.

자주 묻는 질문

고정된 어두운 배경, 선택한 너비와 모서리 반경의 가운데 정렬 흰색 패널, 액센트 바가 있는 헤더, 내용 영역, 오른쪽 정렬 동작 줄입니다. 스타일시트에 바로 붙여 넣을 수 있는 다섯 클래스로 구성됩니다.

CSS만 제공됩니다. 코드는 다섯 클래스를 정의하며, 직접 작성한 마크업에서 그 클래스를 사용하고 열기와 닫기는 자체 스크립트로 처리하세요.

패널 너비는 min(100%, Npx)으로 제한되므로 좁은 휴대폰에서는 배경의 24 px 여백을 뺀 사용 가능한 너비를 패널이 차지합니다. 동작 줄은 오른쪽 정렬을 유지합니다.

생성기는 JavaScript를 제공하지 않습니다. 버튼을 클릭하면 표시하고 다시 숨기는 작은 스크립트 등으로 앱에서 배경의 표시를 제어하세요.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.

이 도구는 다른 언어로도 제공됩니다