유동적인 글자 크기, 의미에 맞는 색상 역할, JavaScript 없이도 읽을 수 있는 기본 접기형 콘텐츠로 회복력 있는 읽기 인터페이스를 구축하세요.
세션을 각각 또는 함께 열 수 있으며, JavaScript을(를) 사용 중지해도 콘텐츠를 읽을 수 있습니다.
2026년 10월 3일에 다운로드한 공식 W3C 문서 및 공개 CDN 스냅샷. 실제 CSS과 기본 스크립트를 확인했습니다.
| 이름 / 규칙 | 값 / 구성 | 용도 |
|---|---|---|
Web font / fallback | Noto Sans / Trebuchet MS, Geneva, sans-serif | 기본 CSS은 글꼴 로드 후 Noto Sans를 적용합니다. 데모에서는 시스템 글꼴 대체를 유지합니다. |
Fluid range | 320–1120px viewport | 이 범위를 벗어나면 clamp 값이 고정되므로 타이포그래피가 갑자기 바뀌지 않습니다. |
--w3c-text-0 | clamp(.9375rem, .9125rem + .125vw, 1rem) | 본문: 기본 루트 크기에서 15px~16px. |
--w3c-text-5 | clamp(1.6894rem, 1.6444rem + .2253vw, 1.802rem) | H1 크기 단계, 약 27~28.8px. |
--w3c-text-7 | clamp(2.1382rem, 2.0811rem + .2851vw, 2.2807rem) | 가장 큰 text-xl 크기 단계이며 기본 H1 크기는 아닙니다. |
Body line height | 1.5 | 유동 글꼴 크기에 상대적인 값입니다. |
Collapsible H3 | --w3c-text-1 / line-height 1.5 | 컴포넌트 재정의: 약 16.9~18px. |
| 이름 / 규칙 | 값 / 구성 | 용도 |
|---|---|---|
Text | #111111 | 검정에 가까운 색상, 일반 본문 텍스트. |
Link | #005a9c | W3C 파란색, 마우스 오버 및 방문 상태 색상과 구분됩니다. |
Hover / visited | #002a56 / #75336c | 상태별 구분을 유지합니다. |
Focus | #f9dc4a | 경계가 뚜렷한 노란색 포커스 표시. |
Input border | #545454 | 장식용 구분선과는 대비 역할이 다릅니다. |
Success / error | #046704 / #a82615 | 무작위 강조색이 아니라 상태를 나타냅니다. |
Warning | #c28605 | 경고 메모용 테두리 역할. |
| 이름 / 규칙 | 값 / 구성 | 용도 |
|---|---|---|
l-center | max-inline-size:70rem; padding-inline:5vw | 기본 와이드 컨테이너. 미리보기에서는 애플리케이션별 최대 너비를 55rem으로 제한합니다. |
Reading measure | 41.25rem | 접을 수 있는 본문 내부의 최대 콘텐츠 너비. |
Stack default | 1em between direct siblings | 공식 Sass 믹스인은 명시적인 측정값을 받으며, 8px 고정 간격 척도가 아닙니다. |
Collapsible inset | 1.5625rem | 기본 루트 크기에서 25px. |
Collapsible separation / radius | 1rem / .375rem | 16px 간격과 6px 모서리. |
Collapsible shadow | -.0625rem .0625rem .25rem rgba(55,70,95,.12) | 은은한 배경층 분리, 기본 CSS. |
| 이름 / 규칙 | 값 / 구성 | 용도 |
|---|---|---|
Outer hook | data-component="collapsibles" | 스크립트가 각 컴포넌트의 루트를 찾습니다. |
Heading hook | data-heading="collapsibles" | 스크립트가 각 제목에 실제 버튼을 삽입합니다. |
Collapsed state | aria-expanded=false; next sibling aria-hidden=true | 고급 CSS에서는 본문을 숨기기 위해 html.js 표시가 필요합니다. |
data-anchor="no" | Suppress automatic heading anchors for this subtree | 접을 수 있는 제목에 링크를 추가로 삽입하지 않습니다. |
No JavaScript | All content remains visible | 향상되지 않은 초기 마크업에서 콘텐츠를 숨긴 상태로 제공하지 않습니다. |
실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.
완전한 안내와 구현 시작점, 소스 링크.
W3C는 핵심 스타일과 고급 컴포넌트를 분리합니다. 접을 수 있는 콘텐츠는 일반 제목 뒤에 본문이 이어지는 형태로 시작합니다. 스크립트가 없어도 모든 세션의 개요를 읽을 수 있습니다. main.js는 문서에 지정된 데이터 속성을 확인한 뒤 버튼을 삽입하고 상태를 변경합니다. 이는 컨트롤이 초기화되지 않을 수도 있는 숨김 아코디언을 미리 제공하는 방식과는 다릅니다.
미리보기에서는 공식 CDN의 core.css, advanced.css 및 main.js를 날짜가 표시된 로컬 스냅샷으로 저장해 사용합니다. html.js 표시는 고급 선택자를 활성화합니다. 이 표시를 생략하면 ARIA 속성은 바뀌지만 본문은 화면에 열린 상태로 유지됩니다. 미리보기에서는 aria-expanded뿐 아니라 실제 표시 여부도 확인합니다.
본문 글꼴 크기는 뷰포트의 하한에서 15px로 시작해 1120px에서 16px까지 커집니다. 이름이 지정된 사용자 지정 속성 9개로 크기 단계를 제공합니다. H1에는 가장 큰 --w3c-text-7이 아니라 --w3c-text-5를 사용합니다. 36px 디스플레이 제목을 모든 문서에 무조건 적용하면 표준 제목 계층과 맞지 않습니다.
웹 글꼴은 Noto Sans를 사용하도록 설계되었습니다. 기본 대체 글꼴 스택은 글꼴 로드 경로에서 루트에 fonts-loaded를 추가하기 전까지 Trebuchet MS와 Geneva를 사용합니다. 이 독립 예제에서는 대체 글꼴을 유지하고 그 선택을 표시합니다. 유동 글꼴 크기와 줄 높이는 기본값을 따르며, 미리보기는 Noto Sans의 글리프 측정값과 정확히 일치한다고 주장하지 않습니다.
l-center 기본 요소는 70rem의 최대 인라인 크기와 5vw의 좌우 패딩을 제공합니다. 미리보기에서는 짧은 학습 개요 3개를 간결하게 유지하기 위해 애플리케이션별 최대 너비를 55rem으로 추가 제한합니다. 이 제한은 새로운 W3C 토큰이 아닙니다. 접을 수 있는 본문 안에서는 기본 41.25rem의 텍스트 너비로 긴 줄을 제한합니다.
문서화된 Stack 믹스인은 열 방향 레이아웃을 만들고 첫 번째 직계 형제 뒤의 요소에 margin-top을 적용합니다. 기본 측정 단위는 1em이며 호출 시 다른 단위를 지정할 수 있습니다. 이를 전역 숫자형 간격 척도로 새로 정의하지 말고 블록 사이의 관계를 표현하는 방식으로 다루세요. 접을 수 있는 컴포넌트에는 별도로 검증된 25px 안쪽 여백, 16px 간격 및 6px 모서리 반경이 적용됩니다.
이 시스템은 기본 파란색 링크, 진한 파란색 마우스 오버 상태, 보라색 방문 상태를 구분합니다. 사용자가 긴 문서를 다시 찾아보고 참고 자료 사이를 이동하는 사이트에서는 이러한 역할이 중요합니다. 링크 별칭을 관련 없는 장식에 재사용하면 향후 테마 변경이 무관한 배경층에도 영향을 줍니다.
포커스에는 경계가 뚜렷한 노란색을 사용합니다. 설정 페이지에서는 일반 테두리와 더 어두운 입력 필드 테두리 역할을 구분합니다. 정보, 성공, 경고 및 오류 색상도 각각 다른 의미로 지정되어 있습니다. 역할을 유지하고 실제 배경과 함께 사용할 때의 조합을 확인하세요. 색상 견본만으로는 컴포넌트 상태의 대비가 충분하다는 것을 입증할 수 없습니다.
각 직계 자식에는 제목과 그 바로 다음에 오는 콘텐츠 본문이 포함됩니다. 스크립트는 nextElementSibling을 사용해 해당 본문을 찾으므로 둘 사이에 관련 없는 메타데이터를 삽입하면 연결이 끊어집니다. 문서화된 그룹 목록 패턴처럼 카테고리 레이블을 제목 범위 안에 배치합니다. 스크립트는 제목 콘텐츠를 버튼으로 감쌉니다.
기본 코드는 해당 버튼의 aria-expanded와 본문의 aria-hidden을 전환합니다. 고급 스타일시트는 접힌 본문을 숨깁니다. data-anchor="no"를 지정하면 별도의 제목 앵커 기능이 이 컴포넌트에 원치 않는 링크를 추가하지 않습니다. main.js는 한 번만 초기화하세요. 여러 번 향상 처리를 하면 제목 안에 버튼이 중첩됩니다.
<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
<div>
<h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3>
<div>
<p>Connect each field to its label, hint and recovery message.</p>
<ul><li>Preserve entered values</li><li>Test keyboard recovery</li></ul>
</div>
</div>
</div>모두 펼치기와 모두 접기는 예제를 위해 만든 컨트롤입니다. 각 기본 버튼을 확인하고 상태를 바꿔야 할 때만 클릭합니다. 이렇게 하면 기본 상태 전환과 시각적 규칙을 함께 유지할 수 있습니다. ARIA 속성 하나만 직접 수정해 다른 속성을 이전 상태로 남겨두지 않습니다.
기본 버튼은 Enter와 Space 키를 통한 활성화를 지원합니다. 미리보기에서는 버튼 하나를 선택하고, 모두 펼치기와 모두 접기를 실행한 뒤 키보드로 다시 하나를 엽니다. 공손한 상태 메시지로 일괄 작업을 안내합니다. 기본 컴포넌트에서는 여러 개요를 동시에 열 수 있습니다. 하나만 열 수 있는 아코디언이 아닙니다.
공식 시작 안내 페이지에는 핵심, 고급 및 인쇄 스타일의 안정적인 CDN 진입 경로와 main.js 및 선택적 기능 스크립트가 공개되어 있습니다. 설정 블록에는 실제 경로를 사용합니다. 이 HTML 구현에는 React 제공자나 npm 패키지가 필요하지 않습니다. 로컬 데모는 예제를 실시간 연결 없이 사용할 수 있도록 다운로드한 파일을 포함합니다.
동일한 구형 브라우저를 지원하는 프로덕션 통합에서는 고급 스타일에 문서화된 CSS 기능 감지 조건을 유지해야 합니다. 간단한 설정에서는 최신 브라우저에 고급 스타일을 바로 불러옵니다. 전체 문서로 구성된 사이트에는 인쇄 스타일시트를 포함하세요. 독립 실행형 미리보기는 인터랙티브 화면 예제에 중점을 둡니다.
W3C 스타일을 적용했다고 해서 페이지가 자동으로 WCAG를 준수하는 것은 아닙니다. 실제 콘텐츠, 포커스 순서, 확대 동작 및 복구 상태를 테스트하세요. 이 예제에서는 뷰포트 너비 세 가지와 스크립트가 없는 기본 상태를 확인하지만, 인증을 주장하거나 보조 기술을 전반적으로 감사한 결과를 제시하지는 않습니다.
학습 모임의 이름과 설명은 독창적으로 만든 허구의 콘텐츠입니다. 공식 작업반이나 일정, 등록 기회가 아닙니다. 이 예제는 W3C 로고와 회원 자격에 관한 주장을 의도적으로 사용하지 않습니다. 공개 스타일 에셋을 재사용할 때는 기관의 보증을 암시하지 않도록 해야 합니다.
제목과 바로 이어지는 본문이 필수 구조이며, main.js가 토글 기능을 추가합니다.
<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
<div>
<h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3>
<div>
<p>Connect each field to its label, hint and recovery message.</p>
<ul><li>Preserve entered values</li><li>Test keyboard recovery</li></ul>
</div>
</div>
</div>루트 보강 마커, 공식 에셋, 네이티브 접기·펼치기 요소 및 전체 제어 기능을 포함합니다.
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>document.documentElement.classList.add("js")</script><title>Web learning circles</title><link rel="stylesheet" href="vendor/w3c-2026-10-03/core.css"><link rel="stylesheet" href="vendor/w3c-2026-10-03/advanced.css"><style>body{min-block-size:0;padding-block:2rem}.demo{max-inline-size:55rem}header{margin-bottom:2rem}.actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}.component--collapsibles{padding:1rem;background:#f8f8fb}footer{margin-top:2rem;border-top:1px solid #bdbdbd;padding-top:1rem;font-size:.875rem}#notice{min-height:1.5em}button{max-width:100%}</style><main class="l-center demo" data-anchor="no"><header><p>INDEPENDENT LEARNING PROGRAMME</p><h1>Web learning circles</h1><p class="lead">Explore three small-group sessions for people building a more usable web.</p></header><div class="actions"><button class="button button--ghost" id="expand">Expand all sessions</button><button class="button button--ghost" id="collapse">Collapse all sessions</button></div><p id="notice" role="status">Choose a session to read its outline.</p><div class="component--collapsibles" data-component="collapsibles" data-anchor="no"><div><h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3><div><p>Trace a form from its label to its hint, error message and recovery action. Compare the experience with a keyboard and with enlarged text.</p><ul><li>Associate labels and help text</li><li>Keep entered values after an error</li><li>Move focus only when it helps recovery</li></ul></div></div><div><h3 data-heading="collapsibles">Resilient reading <span>Discussion circle</span></h3><div><p>Examine document structure before adding interaction. The content in this example remains visible when JavaScript is unavailable.</p><p>Bring a short article and identify its heading hierarchy, reading measure and meaningful links.</p></div></div><div><h3 data-heading="collapsibles">International text <span>Peer review</span></h3><div><p>Review language declarations, long translated labels and mixed-direction text. A font choice alone cannot guarantee a usable multilingual interface.</p><p>All sessions are fictional examples, with no membership or registration service.</p></div></div></div><footer>Native W3C CDN styles and collapsible script, snapshot 3 October 2026. System font fallback; original learning content, no W3C affiliation.</footer></main><script src="vendor/w3c-2026-10-03/main.js"></script><script>document.querySelector('.component--collapsibles').addEventListener('click',()=>{const n=document.querySelectorAll('[data-heading] button[aria-expanded=true]').length;document.querySelector('#notice').textContent=n+' session outline'+(n===1?' is':'s are')+' expanded.'});function all(open){document.querySelectorAll('[data-heading="collapsibles"] button').forEach(b=>{if((b.getAttribute('aria-expanded')==='true')!==open)b.click()});document.querySelector('#notice').textContent=open?'All three session outlines are expanded.':'All session outlines are collapsed.'}document.querySelector('#expand').onclick=()=>all(true);document.querySelector('#collapse').onclick=()=>all(false);</script></html>실제 공식 CDN 경로입니다. 로컬 미리보기에는 이 에셋이 포함되어 있으며 기본 시스템 글꼴 대체도 유지됩니다. Sources에 있는 전체 작동 예제 ZIP에는 정확한 미리보기 종속 항목과 완전한 문서도 포함되어 있습니다. 압축을 푼 디렉터리에서 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/w3c.html을 여세요. 모듈 기반 예제는 file://로 열지 마세요.
<!-- Core is useful without JavaScript. -->
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/core.css">
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/advanced.css">
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/print.css" media="print">
<script>document.documentElement.classList.add('js');</script>
<!-- Put component markup in the document, then load the script once. -->
<script defer src="https://www.w3.org/assets/website-2021/js/main.js"></script>W3C core 및 advanced 스타일과 main.js, html.js 보강 마커를 사용하세요. 실제 데이터 훅을 사용해 의미 구조를 갖춘 제목과 바로 이어지는 접기 가능 콘텐츠를 구성하세요. JavaScript가 없어도 읽을 수 있는 기본 상태, 네이티브 유동형 글자 크기, 의미에 맞는 링크 및 포커스 색상을 유지하세요. 초기화를 두 번 수행하지 말고, 스타일만으로 WCAG 적합성을 추정하지 마세요.
공식 공개 에셋을 사용한 독립형 OpenDesign 예제입니다. W3C와의 제휴나 접근성 인증을 암시하지 않습니다.
