PE 아코디언 만들기
JavaScript 없이 작동하는 아코디언을 만든 다음 기능 향상하기
PE 아코디언 만들기은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
목표: JS 없이 작동하는 아코디언
PE 방식의 아코디언은 HTML만 사용하며, 네이티브 <details>/<summary> 요소 쌍을 사용합니다. summary를 클릭하여 패널을 전환하십시오. CSS도 JS도 프레임워크도 필요 없이 작동하며, HTML에 내장되어 있습니다.
<details>
<summary>What is HTML?</summary>
<p>HTML is the markup language of the web.</p>
</details>내장된 접근성
<summary>는 포커스를 받을 수 있고 키보드로 활성화할 수 있는 버튼입니다(Enter/Space 키로 전환됩니다). 화면 낭독기는 펼침/접힘 상태를 알려 줍니다. 두 HTML 요소만으로 사용자 지정 React 아코디언이 ARIA와 이벤트 처리를 위해 수십 줄의 코드를 작성해야 하는 기능을 구현할 수 있습니다.
CSS 레이어링
일반 CSS로 펼침 삼각형, 패널 여백, 전환 효과를 스타일링합니다. open 특성이 상태를 반영하므로 details[open] summary { color: blue; }는 펼쳐진 경우에만 적용됩니다. 시각적 완성도를 위해 JS가 필요하지 않습니다.
details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }열기와 닫기 애니메이션
기본 열기/닫기는 즉시 이루어집니다. content-visibility를 전환하거나, JS로 패널 높이를 측정한 뒤 max-height를 애니메이션하여 움직임을 추가할 수 있습니다. 간단한 경우에는 갑작스러운 전환도 허용할 만합니다. 애니메이션은 CSS+JS로 점진적으로 적용하는 향상 기능입니다.
JavaScript로 향상하기
JS로 편의 기능을 추가할 수 있습니다. 하나를 열 때 다른 아코디언을 닫거나(하나만 열기 모드), 열림 상태를 localStorage에 저장하거나, 전환을 애니메이션으로 만들거나, 어떤 항목이 펼쳐졌는지 분석 도구로 추적할 수 있습니다. 각각의 향상 기능은 기본 기능에 추가될 뿐입니다.
document.querySelectorAll("details").forEach((d) => {
d.addEventListener("toggle", () => {
if (d.open) {
document.querySelectorAll("details").forEach((o) => {
if (o !== d) o.removeAttribute("open");
});
}
});
});전환 이벤트
<details>는 열림 상태가 변경될 때마다 toggle 이벤트를 발생시킵니다. 클릭 처리기를 다시 연결하지 않고도 사용자의 펼침 동작에 대응할 때 사용합니다. 마우스 클릭과 키보드 활성화 모두와 호환됩니다.
서버에서 상태 렌더링하기
처음부터 열린 아코디언을 렌더링하려면 서버에서 open 특성을 설정합니다. <details open> 상태가 HTML에 포함되므로 JS가 실행되기 전에도 크롤러와 느린 연결 환경의 사용자가 상태를 확인할 수 있습니다.
내장 기능으로 충분하지 않을 때
디자인에 사용자 지정 펼침/접힘 아이콘, 애니메이션으로 표시되는 내용, 다중 열 패널이 필요하다면 사용자 지정 버전을 만드십시오. 하지만 가능하면 기반 구조로 <details>/<summary>를 사용하십시오. 네이티브 요소를 전혀 사용할 수 없을 때만 ARIA를 추가하십시오.
JS 없이 검증하기
DevTools에서 JavaScript를 비활성화하고 아코디언이 계속 작동하는지 확인하십시오. summary를 클릭할 수 있고, 패널이 전환되며, 포커스 순서가 논리적이고, 키보드로 활성화되는지 확인합니다. 무언가 작동하지 않는다면 JS는 향상 기능이 아니라 필수 조건이며, 이는 PE를 위반합니다.
CSS만으로 하나만 열기
JS 없이 라디오 버튼처럼 "한 번에 하나만 열기"를 구현하려면 <details>에 name 특성을 사용하십시오(Chrome/Safari에서 지원). 모든 <details name="faq">가 상태를 공유하므로 하나를 열면 다른 항목이 닫힙니다. 라디오 버튼을 본뜬 순수 HTML 패턴입니다.
JS 전용 아코디언에서 전환하기
div와 JS를 <details>/<summary>로 바꾸되, 스타일링을 위한 CSS 클래스를 유지하십시오. 그 결과 HTML이 짧아지고 JS 의존성이 없어지며 접근성이 향상되고 콘텐츠를 색인할 수 있습니다. 대부분의 JS 아코디언은 사용자가 보는 결과를 거의 바꾸지 않고 PE로 전환할 수 있습니다.
지식 확인
JavaScript 없이 완전히 작동하는 아코디언을 제공하는 HTML 요소 쌍은 무엇인가요?
요약
PE 아코디언은 기본 기능으로 네이티브 <details>/<summary>를 사용하므로 JS 없이도 완전히 접근 가능하고 키보드로 조작할 수 있습니다. 시각적 스타일링을 위해 CSS를 적용하고, 애니메이션이나 하나만 열기 동작을 위해 선택적으로 JS를 추가합니다. JS를 비활성화해도 기본 기능이 계속 작동하는지 확인하십시오. 새 name 특성을 사용하면 CSS만으로 하나만 열기 모드도 구현할 수 있습니다.
자주 묻는 질문
“PE 아코디언 만들기” 강의는 무료인가요?
네 — “PE 아코디언 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“PE 아코디언 만들기”에서 뭘 배우나요?
JavaScript 없이 작동하는 아코디언을 만든 다음 기능 향상하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“PE 아코디언 만들기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.