Softonic

CSS 아코디언 생성기

단계 1 / 4 내용

아코디언 내용

제목과 패널 내용을 일반 텍스트로 입력하세요. HTML처럼 보이는 문자열은 생성 코드에서 이스케이프됩니다.

의미에 맞는 <details>와 <summary>로 3개 섹션 아코디언을 만드세요. 일반 텍스트 제목과 패널, 색상, 간격, 열림 방식을 편집하고 미리보기에서 확인한 뒤 코드를 복사하거나 독립형 HTML 파일로 다운로드할 수 있습니다. 모든 편집은 이 브라우저 탭에서 이루어집니다.

CSS 아코디언 만드는 방법

  1. 1

    세 섹션 작성

    각 섹션에 짧은 제목과 일반 텍스트 내용을 입력합니다. HTML처럼 보이는 입력은 실행되지 않고 이스케이프됩니다.

  2. 2

    디자인 설정

    6자리 색상 4개, 0~24px의 모서리 반경, 8~32px의 안쪽 여백을 정합니다.

  3. 3

    열림 방식 선택

    여러 패널을 열어 둘지, 기본 name 속성으로 하나만 열지 정하고 꺾쇠 또는 더하기·빼기 아이콘을 선택합니다.

  4. 4

    시험 후 내보내기

    포인터와 키보드로 미리보기를 시험한 다음 코드를 복사하거나 UTF-8 HTML 파일을 다운로드합니다.

생성되는 코드

각 섹션은 브라우저 기본 펼침 요소를 사용합니다.

<details class="generated-accordion" open>
  <summary>무엇이 포함되어 있나요?</summary>
  <div class="generated-accordion__panel">자세한 내용을 여기에 입력하세요.</div>
</details>

생성된 CSS는 테두리, 제목 배경, 텍스트, 포커스, 간격, 모서리, 아이콘을 지정합니다. margin-inline-start 같은 논리적 속성과 오른쪽에서 왼쪽 방향 규칙이 포함됩니다. 방문자가 동작 줄이기를 설정했다면 prefers-reduced-motion 미디어 쿼리가 아이콘 전환 효과를 없앱니다.

여러 패널 또는 한 패널

설정 생성 마크업 결과
여러 패널 공통 name 없음 각 섹션을 독립적으로 열고 닫음
한 패널 모두 name="generated-accordion" 사용 지원 브라우저에서 하나를 열면 다른 섹션이 닫힘

배타적 details 그룹을 지원하지 않는 구형 브라우저에서도 아코디언은 작동하지만 여러 패널이 함께 열릴 수 있습니다.

안전한 일반 텍스트

제목과 패널은 텍스트로 처리됩니다. <, >, &, 따옴표, 아포스트로피를 내보내기 코드에서 이스케이프하므로 붙여 넣은 태그가 실행되지 않고 문자로 표시됩니다. 링크나 목록이 필요하면 내보낸 뒤 검토한 마크업을 직접 추가하세요.

게시 전 접근성 점검

  • Tab으로 각 summary에 이동하고 Enter와 Space로 열고 닫습니다.
  • 포커스 색상이 제목 배경과 페이지 배경에서 잘 보이는지 확인합니다.
  • 확대 화면, 좁은 화면, 오른쪽에서 왼쪽 방향의 페이지를 시험합니다.
  • 페이지의 핵심 안내를 닫힌 패널 안에만 넣지 않습니다.

자주 묻는 질문

아닙니다. 열고 닫는 동작은 기본 <details>와 <summary>가 담당합니다. 다운로드되는 구성 요소에는 HTML과 CSS만 들어 있습니다.

가능합니다. 한 패널 모드를 선택하면 세 <details>에 같은 name 속성이 붙습니다. 지원하지 않는 브라우저에서는 독립 패널로 작동합니다.

입력은 의도적으로 일반 텍스트로 처리하고 HTML 문자를 이스케이프합니다. 필요한 경우 내보낸 뒤 검토한 마크업을 추가하세요.

아닙니다. 텍스트, 설정, 미리보기, 복사, 다운로드는 브라우저 안에만 머뭅니다. 여러 페이지에서는 현재 탭의 sessionStorage에 임시 저장하며 URL에는 넣지 않습니다.

관련 도구

ASCII 표 참조

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

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

HTML 문자 참조

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

키보드 단축키 참고표

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

색상 혼합기

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

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

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