Softonic

CSS 아코디언 생성기

단계 1 / 4 내용

아코디언 내용

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

아코디언 텍스트와 설정은 이 브라우저 탭 안에만 남습니다. Livewire로 전송하거나 URL에 넣거나 업로드하지 않습니다. 탭을 닫으면 저장된 단계 상태가 지워집니다.

의미에 맞는 <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에는 넣지 않습니다.

관련 도구

Base64 → Hex 변환기

Base64 문자열을 실제 바이트로 디코딩한 뒤 16진수로 표현합니다. 토큰, 키, 인증서, JWT를 살펴볼 때 유용합니다.

2진수 8진수 변환기

비트를 세 개씩 묶어 2진수를 8진수로 변환합니다. Unix 권한, 레거시 시스템, 간결한 숫자 표시에 유용합니다.

BBCode → HTML 변환기

BBCode(게시판 마크업)를 깔끔한 HTML로 변환합니다. 서식 태그, 목록, 인용, 코드, 이미지, 링크, 표를 처리합니다.

랜덤 색상 팔레트 생성기

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

불 대수 간소화 도구

Karnaugh map과 Quine-McCluskey 알고리즘으로 불 대수 식을 간소화합니다. 모든 최소화 단계와 최종 SOP/POS 형태를 보여줍니다.

Binary to Hex 변환기

이진 입력을 대문자 16진수 값으로 변환합니다. 0과 1이 아닌 문자는 무시되며 앞쪽 0은 보존되지 않습니다.