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를 제공하지 않습니다. 버튼을 클릭하면 표시하고 다시 숨기는 작은 스크립트 등으로 앱에서 배경의 표시를 제어하세요.

관련 도구

보색 찾기

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

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

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