>웹 프론트엔드 >CSS 튜토리얼 >HTML의 독점적인 기본 아코디언

HTML의 독점적인 기본 아코디언

Barbara Streisand
Barbara Streisand원래의
2025-01-11 06:27:42335검색

?색인

  1. 소개
  2. HTML5의 아코디언
  3. HTML5 전용 아코디언
  4. 사용할 수 있나요?
  5. 참고자료
  6. 결론

1. 소개

개인적으로 저는 HTML이 전체 인터넷에서 가장 중요한 마크업 언어라고 생각합니다. 웹 페이지를 열 때 그 구조가 HTML로 작성되어 있음을 확신합니다.

많은 사람들은 HTML이 그다지 중요하지 않다고 생각할 수도 있지만 HTML은 현대 웹 전체의 기초이며 이러한 이유로 HTML은 우리가 사용할 수 있는 새로운 API부터 더 간단하지만 알아야 할 중요한 기능에 이르기까지 항상 발전해 왔습니다.

2. HTML5의 아코디언

HTML의 아코디언은 각 아코디언을 나타내기 위해 세부정보 태그와 중첩 요약 태그를 사용하여 작성됩니다.
전용 아코디언 이전에는 기본 HTML만 사용하여 각 아코디언의 동작을 독립적으로 수행할 수 없었습니다. 즉, 여러 아코디언을 동시에 열 수 있다는 의미입니다. 예를 살펴보겠습니다.

이 예에서는 기본 동작인 아코디언이 동시에 열릴 수 있음을 알 수 있습니다.

3. HTML5 전용 아코디언

2024년 9월부터 JavaScript를 사용하지 않고도 기본적으로 전용 아코디언을 만들 수 있다는 점이 참신합니다.

독특한 아코디언을 사용하면 요약 태그를 하나만 열 수 있으므로 JS 코드를 작성하지 않고도 UI가 향상됩니다.

이를 달성하려면 각 요약 태그에 동일한 값을 가진 이름 속성을 추가하기만 하면 됩니다.
예를 살펴보겠습니다.

이 예에서 각 요약에는 아코디언을 배타적으로 사용할 수 있는 name="learn-css"가 있습니다.

4. 사용할 수 있나요?

이 기능은 다음 브라우저 버전에서 사용할 수 있습니다.

그리고 Can I Use에 대한 컨설팅을 통해 이 게시물이 게시된 날짜를 기준으로 브라우저의 89.13%가 적용되는 것으로 확인되었습니다.

5. 참고자료

  • https://developer.chrome.com/docs/css-ui/exclusive-accordion?hl=es-419

6. 결론

우리가 가장 많이 사용하는 도구의 최신 개발 사항을 최신 상태로 유지하는 것이 매우 중요합니다. 이러한 새로운 기능은 작업을 더 쉽게 만들어 두 번 이상 비용을 절감할 수 있습니다.

내 트위터 계정에 요약 글을 남겨드립니다:


귀하가 관심을 가질 만한 내가 작성한 다른 게시물:

빠른 가이드: Git에서 좋은 커밋 메시지를 만들기 위한 팁

크리스티안 페르난도 ・2024년 12월 20일

#git #github #gitlab #스페인 사람

SSH 키를 생성하고 Windows의 Github에 연결하는 방법은 무엇입니까? ?

크리스티안 페르난도 ・'24년 12월 13일

#github #git #스페인 사람 #gitlab

git에서 커밋 간에 어떻게 이동하나요? ?

크리스티안 페르난도 ・ 2024년 11월 29일

#git #github #스페인 사람 #초보자

위 내용은 HTML의 독점적인 기본 아코디언의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.