기본 HTML: 아코디언 재검토-CSS 튜토리얼-php.cn

네이티브 HTML: 아코디언

앤드류 본 ・ 2019년 1월 4일

집

웹 프론트엔드

CSS 튜토리얼

기본 HTML: 아코디언 재검토

Mary-Kate Olsen

Jan 07, 2025 am 06:45 AM

6년 전, 저는 네이티브 <세부정보> 및 <요약> 접근 가능한 아코디언을 만드는 요소. 그 이후로 웹 플랫폼은 진화하여 이러한 요소에 대한 독점적인 개방형 동작 및 부드러운 애니메이션과 같은 흥미로운 새 기능을 도입했습니다.

네이티브 HTML: 아코디언

앤드류 본 ・ 2019년 1월 4일

#html #css #a11y #설계

이 글에서는 <세부정보> 최신 CSS 속성을 최대한 활용하여 아코디언에 세련미를 더해보세요. 또한 이러한 기능을 보여주는 데모 구현도 공유하겠습니다.

기본사항: <세부정보> 및 <요약>

<세부정보> 요소는

클릭 가능한 라벨 역할을 하는 요소입니다. 이를 통해 최소한의 노력으로 공개 위젯을 쉽게 만들 수 있습니다.

다음은 간단한 예입니다.

<details>
  <summary>Read more</summary>
  Some text to be hidden. 
</details>

로그인 후 복사

요약을 클릭하면 관련 콘텐츠의 표시 여부가 전환됩니다. JavaScript가 필요하지 않습니다!

향상된 기능: 배타적 열기 동작

한 번에 하나의 섹션만 열리는 전통적인 아코디언 동작을 모방하려면 <세부정보> 강요. <자세히> 요소는 동일한 이름을 공유하므로 하나를 열면 그룹의 다른 요소가 자동으로 닫힙니다.

<details name="exclusive">
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
<details name="exclusive">
  <summary>Section 2</summary>
  <p>Content for section 2.</p>
</details>

로그인 후 복사

이 동작은 기본 동작이며 최신 브라우저에서 원활하게 작동합니다!

CSS로 부드러운 애니메이션 추가하기

보다 부드러운 열기 및 닫기 전환을 만들기 위해 interpolate-size 및 전환 동작과 같은 최신 CSS 속성을 사용할 수 있습니다.

주요 속성

interpolate-size: 고유 크기(예: 자동)와 고정 크기 간에 애니메이션을 적용할 수 있습니다. 이 속성은 현재 Chrome에서만 지원됩니다.
transition-behavior: 이산 허용으로 설정하면 가시성 및 표시와 같이 일반적으로 애니메이션할 수 없는 속성은 즉시 업데이트되지 않고 기다립니다.

예제 스타일링

데모에 사용된 CSS의 전체 예는 다음과 같습니다.

details {
  interpolate-size: allow-keywords;
  overflow: clip;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  outline: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details[open]::details-content {
  height: auto;
}

details::details-content {
  height: 0;
  overflow-y: clip;
  transition: content-visibility 475ms allow-discrete, height 475ms;
}

details main {
  padding: 1em 2.2em;
}

로그인 후 복사

작동 방식

높이 애니메이션: interpolate-size 속성을 사용하면 높이: 0(닫힘)과 높이: 자동(열림) 사이를 부드럽게 전환할 수 있습니다. 단, 현재는 Chrome에서만 지원됩니다.
가시성 전환: 전환 동작 속성은 가시성 변경이 원활하게 나타나도록 보장합니다.