최신 CSS를 사용하여 HTML 및 스타일 지정

작가: Rob O'Leary✏️

<세부정보> 및 <요약> 공개 위젯이라고 통칭되는 HTML 요소는 스타일 지정이 쉽지 않습니다. 사람들은 제한 사항으로 인해 사용자 정의 구성 요소를 사용하여 자신만의 버전을 만드는 경우가 많습니다. 그러나 CSS가 발전함에 따라 이러한 요소를 사용자 정의하기가 더 쉬워졌습니다. 이 글에서는 공개 위젯의 모양과 동작을 사용자 정의하는 방법을 다루겠습니다.

<자세히> 및 <요약> 같이 일해?

<자세히> 추가 정보가 숨겨져 있는 공개 위젯을 생성하는 HTML 요소입니다. 공개 위젯은 일반적으로 일부 텍스트와 함께 삼각형 마커로 표시됩니다.

사용자가 위젯을 클릭하거나 위젯에 초점을 맞춘 후 스페이스바를 누르면 위젯이 열리고 추가 정보가 표시됩니다. 삼각형 표시가 아래를 가리키며 열린 상태임을 나타냅니다.

공개 위젯에는 항상 표시되는 라벨이 있으며

요소. 이것은 첫 번째 아이입니다. 생략하면 브라우저에서 기본 레이블을 제공합니다. 일반적으로 "세부정보"라고 표시됩니다.

뒤에 여러 요소를 제공할 수도 있습니다. 추가 정보를 나타내는 요소:

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

스타일링 <세부정보> 및 <요약>

스타일을 지정할 때 고려해야 할 몇 가지 상호 운용성 문제가 있습니다. 및 <요약> 강요. 몇 가지 일반적인 사용 사례를 살펴보기 전에 기본 사항을 살펴보겠습니다.

<요약> 요소는 기본 스타일에 display: list-item이 포함되어 있다는 점에서 [

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) 요소와 유사합니다. 따라서 [list-style](https://developer.mozilla.org/docs/Web/CSS/list-style) 단축 속성과 해당 단축 속성을 지원합니다. 목록 스타일 속성에 대한 브라우저 지원은 상당히 훌륭하지만 Safari는 여전히 뒤떨어져 있습니다.

공개 위젯에는 구성 부분의 스타일을 지정하는 두 개의 의사 요소가 있습니다.

1. ::marker 의사 요소:
   의 시작 부분에 있는 삼각형 마커를 나타냅니다. 이에 대한 스타일링 스토리는 다소 복잡합니다. 우리는 작은 CSS 속성 집합으로 제한됩니다. 브라우저 지원은 ::marker에 적합하지만 Safari는 현재 전체 속성 세트를 지원하지 않습니다. 이 기사의 "요약 표시 스타일 지정" 섹션에서 이에 대해 자세히 설명하겠습니다.
2. ::details-content 의사 요소:
   의 "추가 정보"를 나타냅니다. 이는 최근 추가된 것이므로 브라우저 지원은 현재 Chrome으로 제한됩니다.

다음 섹션에서는 공개 위젯을 사용자 정의하는 더 새롭고 잘 알려지지 않은 방법 중 일부를 보여 드리겠습니다.

열기 및 닫기 동작 애니메이션

공개 위젯을 열면 즉시 열립니다. 깜박이면 놓치게 됩니다!

사용자에게 작업의 영향을 보여주기 위해 보다 점진적인 방식으로 한 상태에서 다른 상태로 전환하는 것이 좋습니다. 공개 위젯의 열기 및 닫기 동작에 전환 애니메이션을 추가할 수 있나요? 요컨대 그렇습니다!

이를 애니메이션화하려면 숨겨진 콘텐츠의 높이를 0에서 최종 높이로 전환해야 합니다. height 속성의 기본값은 auto이며, 콘텐츠에 따라 높이를 계산하도록 브라우저에 맡깁니다. [interpolate-size](https://nerdy.dev/interpolate-size) 속성이 추가될 때까지는 CSS에서 auto 값으로 애니메이션을 적용할 수 없었습니다. 우리가 사용해야 하는 최신 CSS 기능(주로 interpolate-size 및 ::details-content)에 대한 브라우저 지원은 약간 제한되어 있지만 이는 점진적인 향상의 좋은 예입니다. 현재 Chrome에서 작동합니다!

다음은 애니메이션의 CodePen 예시입니다.

공개 애니메이션은 어떻게 작동하나요?

먼저 interpolate-size를 추가하여 자동 높이로 전환할 수 있습니다.

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

다음으로 닫힌 스타일에 대해 설명하겠습니다. 우리는 "추가 정보" 콘텐츠의 높이가 0이 되도록 하고 어떤 콘텐츠도 표시되지 않도록 하려고 합니다. 즉, 오버플로를 방지하고 싶습니다.

숨겨진 콘텐츠를 타겟팅하기 위해 ::details-content 의사 요소를 사용합니다. 논리적 속성을 사용하는 것이 좋은 습관이기 때문에 height 대신 block-size 속성을 사용합니다. 브라우저가 닫힌 상태에 있는 콘텐츠에 content-visibility:hidden을 설정하기 때문에 전환에 content-visibility를 포함해야 합니다. 이를 포함하지 않으면 닫는 애니메이션이 작동하지 않습니다.

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

콘텐츠 가시성 속성이 별개의 애니메이션 속성이기 때문에 애니메이션이 여전히 예상대로 작동하지 않습니다. 이는 보간이 없음을 의미합니다. 브라우저는 전체 애니메이션 기간 동안 전환된 콘텐츠가 표시되도록 두 값 사이를 전환합니다. 우리는 이것을 원하지 않습니다.

transition-behavior:allow-discrete;를 포함하면 애니메이션이 끝날 때 값이 반전되므로 점진적인 전환이 이루어집니다.

또한 공개 위젯이 중간 상태일 때 블록 크기를 0으로 설정하여 콘텐츠 오버플로가 발생합니다. 대부분의 콘텐츠는 열릴 때 표시됩니다. 이런 일이 발생하지 않도록 하려면 Overflow: Hidden을 추가합니다.

마지막으로 열린 상태에 대한 스타일을 추가합니다. 우리는 최종 상태의 크기를 auto로 설정하고 싶습니다.

details {
    interpolate-size: allow-keywords;
}

그것은 광범위한 스트로크입니다. 더 자세한 동영상 설명을 원하시면

애니메이션을 적용하는 방법에 대한 Kevin Powell의 연습을 확인하세요. 그리고 .

공개 위젯에 애니메이션을 적용할 때 다른 고려 사항이 있나요?

'추가 정보' 콘텐츠가

콘텐츠. 이로 인해 원치 않는 레이아웃 변경이 발생할 수 있습니다. 이 경우 <세부정보>에서 너비를 설정하는 것이 좋습니다.

다른 애니메이션과 마찬가지로 움직임에 민감한 사용자를 고려해야 합니다. 해당 시나리오를 충족하기 위해 presents-reduced-motion 미디어 쿼리를 사용할 수 있습니다:

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

독점 <세부정보> 그룹(전용 아코디언)

일반적인 UI 패턴은 아코디언 구성요소입니다. 이는 내용을 표시하기 위해 확장할 수 있는 공개 위젯 스택으로 구성됩니다. 이 패턴을 구현하려면 여러 개의 연속적인

강요. 시각적으로 함께 속해 있음을 나타내도록 스타일을 지정할 수 있습니다.

/* open state */
details[open]::details-content {
  block-size: auto;
}

기본 스타일은 매우 간단합니다.

각 <자세히> 자체 라인을 차지합니다. 이들은 서로 가깝게 위치하며(여백이나 여백 없음) 근접성으로 인해 하나의 그룹으로 인식됩니다. 그룹화되어 있다는 점을 강조하고 싶다면 테두리를 추가하고 아래 예와 같이 동일한 배경 스타일을 지정할 수 있습니다.

이 패턴의 변형은 한 번에 하나의 공개 위젯만 열 수 있도록 아코디언을 배타적으로 만드는 것입니다. 하나가 열리자마자 브라우저는 다른 하나를 닫습니다. <세부정보>의 이름 속성을 통해 독점 그룹을 생성할 수 있습니다. 동일한 이름을 갖는 것은 의미 그룹을 형성합니다:

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

전용 아코디언을 사용하기 전, 사용자에게 도움이 되는지 생각해 보세요. 사용자가 더 많은 정보를 소비하려는 경우 항목을 자주 열어야 하므로 실망스러울 수 있습니다.

이 기능은 현재 모든 최신 브라우저에서 지원되므로 바로 사용하실 수 있습니다.

요약 마커 스타일 지정

공개 위젯은 일반적으로 옆에 작은 삼각형 마커가 표시됩니다. 이 섹션에서는 이 마커의 스타일을 지정하는 과정을 다룹니다.

마커는

요소. [::marker](https://developer.mozilla.org/docs/Web/CSS/::marker) 의사 요소를 추가하면 마커 상자의 스타일을 직접 지정할 수 있습니다. 그러나 우리는 소수의 CSS 속성 집합으로 제한됩니다.

• 모든 글꼴 속성
• 색상
• 공백
• text-combine-upright, [unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi) 및 방향 속성
• 내용
• 모든 애니메이션 및 전환 속성

앞서 언급했듯이

[

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)와 유사합니다. 이는 목록 스타일 단축 속성과 해당 단축 속성을 지원합니다. 다소 복잡하게 들릴 수도 있지만 몇 가지 예를 통해 스타일 옵션을 이해하는 것이 더 쉬울 것입니다.

예제를 시작하기 전에 브라우저 지원에 대해 간단히 말씀드리겠습니다. 글을 쓰는 시점에서 Safari는 마커 스타일 지정을 완전히 지원하지 않는 유일한 주요 브라우저입니다.

• Safari 지원은 현재 ::marker 의사 요소의 색상 및 글꼴 크기 속성 스타일 지정으로 제한됩니다. Safari는 비표준 의사 요소 ::-webkit-details-marker를 지원합니다.
• Safari는 목록 스타일 속성의 스타일 지정을 전혀 지원하지 않습니다. 참고로 CanIUse를 참조하세요

마커의 색상 및 크기 변경

삼각형 마커의 색상을 빨간색으로 변경하고 50% 더 크게 만들고 싶다고 가정해 보겠습니다. 우리는 다음을 수행할 수 있습니다:

details {
    interpolate-size: allow-keywords;
}

이 기능은 모든 브라우저에서 작동합니다. CodePen 예시는 다음과 같습니다.

마커 간격 조정

기본적으로 마커는

그리고 그들은 같은 경계 상자에 있습니다. 목록 스타일 위치가 내부로 설정되었습니다. 열린 상태일 때 "추가 정보"는 마커 바로 아래에 있습니다. 아마도 다음의 간격과 정렬을 변경하고 싶을 수도 있습니다.

list-style-position을 외부로 설정하면 마커는

경계 상자. 이를 통해 요약 텍스트와 마커 사이의 공간을 조정할 수 있습니다.

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

위 스크린샷의 두 번째 사례에서 이를 확인할 수 있습니다.

다음은 이 예의 CodePen입니다.

마커 텍스트/이미지 변경

마커의 내용을 변경하려면 ::marker 의사 요소의 content 속성을 사용할 수 있습니다. 선호도에 따라 텍스트로 설정할 수 있습니다. 예를 들어 닫힌 상태에는 지퍼 입 이모티콘을 사용하고 열린 상태에는 입을 벌린 이모티콘을 사용했습니다.

details {
    interpolate-size: allow-keywords;
}

마커에 이미지를 사용하려면 ::marker 의사 요소의 content 속성을 사용하거나

의 list-style-image 속성을 사용할 수 있습니다.

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

다음 예에서는 마커에 Material Symbols의 두 개의 화살표 아이콘을 사용하고 있습니다. 오른쪽을 향한 화살표는 닫힌 상태이고 아래쪽을 향한 화살표는 열린 상태입니다.

이러한 예는 Chrome 및 Firefox에서 예상대로 작동하지만 Safari에서는 스타일을 무시합니다. 이를 점진적인 향상으로 접근하여 하루라고 부를 수 있습니다. 그러나 모든 브라우저에서 동일한 모양을 원하는 경우 마커를 숨긴 다음 자신의 이미지를 대체 이미지로 추가할 수 있습니다. 이를 통해 더 많은 자유를 누릴 수 있습니다.

/* open state */
details[open]::details-content {
  block-size: auto;
}

인라인 이미지와 같은 새로운 마커 아이콘을 사용하거나 의사 요소를 통해 상태를 시각적으로 표시할 수 있습니다. <요약> 이미 (대부분)은 확장/축소 상태를 나타냅니다. 따라서 인라인 그래픽을 사용하는 경우 장식용으로 취급해야 합니다. 빈 대체 속성은 다음을 수행합니다.

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

원하는 경우 끝에 마커를 배치할 수도 있습니다.

details {
    interpolate-size: allow-keywords;
}

그러나 마커를 숨기면 스크린 리더에 접근성 문제가 발생한다는 점에 유의하는 것이 중요합니다. Firefox, VoiceOver, JAWS 및 NVDA에는 모두 마커가 제거된 경우 공개 위젯의 전환된 상태를 지속적으로 알리는 데 문제가 있습니다. 불행히도 스타일은 주에 묶여 있습니다. 하지 않는 것이 좋습니다.

<세부정보>의 "추가 정보" 섹션 스타일 지정

에 스타일을 유출하지 않고 공개 위젯의 '추가 정보' 섹션 스타일을 지정할 수 있습니다. <세부정보> 내부에는 가변 개수의 요소가 포함될 수 있으므로 포괄적인 규칙을 적용하는 것이 좋습니다.

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

저는

:not() 함수를 사용하는 요소입니다. 이는 단일 섹션의 콘텐츠가 아닌 각 요소를 대상으로 한다는 점을 명심하세요!

/* open state */
details[open]::details-content {
  block-size: auto;
}

또는 전체 섹션을 대상으로 하는 ::details-content 의사 요소를 사용할 수도 있습니다. 이것이 바로 열기 및 닫기 상태 전환 애니메이션에 이것을 사용하려는 이유입니다.

>@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */

   details::details-content {
      transition-duration: 0.8s; /* slower speed */
   }
}

차이점이 느껴지시나요? 섹션 시작 부분에는 여백이 하나만 있습니다.

및

마진이 없습니다. ::details-content 의사 요소 사용의 단점은 브라우저 지원이 현재 Chrome으로 제한된다는 것입니다.

공개 위젯 스타일을 지정할 때 흔히 저지르는 실수

• 기존에는 <세부정보> 요소. Chrome에서는 이 제한이 완화되었습니다
• 표시 유형을 신중하게 변경하세요. 기본값은 표시: 목록 항목;; 표시: 차단;으로 변경하면 일부 브라우저에서 마커가 숨겨질 수 있습니다. 이는 Firefox의 문제였습니다.

<details>
    <summary>Payment Options</summary>
    <p>...</p>
</details>
<details>
    <summary>Personalise your PIN</summary>
    <p>...</p>
</details>
<details>
    <summary>How can I add an additional cardholder to my Platinum Mastercard</summary>
    <p>...</p>
</details>

• 를 중첩할 수 없습니다.

• <요약> 요소에는 버튼이라는 기본 ARIA 역할이 있으며 하위 요소에서 모든 역할을 제거합니다. 따라서

  <요약>에서 스크린 리더와 같은 보조 기술은 이를 제목으로 인식하지 못합니다. 다음 패턴은 피하세요.
  

  <details>
    <summary>Do you want to know more?</summary>
    <h3>Additional info</h3>
    <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
  </details>
  

• 마커를 숨기면 일부 스크린 리더에서 접근성 문제가 발생합니다. Firefox, VoiceOver, JAWS 및 NVDA에는 모두 마커가 제거된 경우 공개 위젯의 전환 상태를 지속적으로 알리는 데 문제가 있습니다

앞으로 더 많은 변화가 있을까요?

최근 <세부사항> 더 많은 사용자 정의가 가능하고 브라우저 간 상호 운용이 가능합니다. 1단계에는 이 기사에서 다룬 내용 중 일부가 포함됩니다.

1. Flex 및 Grid와 같은 다른 디스플레이 유형을 사용할 수 있도록 CSS 디스플레이 속성 제한을 제거합니다.
2. 섀도우 트리의 구조를 더욱 명확하게 지정합니다. 이는 Flexbox 및 CSS Grid와의 상호 운용성에 도움이 됩니다.
3. 두 번째 슬롯의 주소를 지정하는 ::details-content 의사 요소를 추가하여
   요소에 스타일을 지정할 수 있습니다

흥미로운 소식은 위 목록의 항목 1과 3이 Chrome 131(2024년 11월 기준)에 출시되었다는 것입니다. 다음 단계에서는 마커의 스타일을 개선하는 작업을 다루어야 합니다. 또한 이러한 요소에 애니메이션을 적용하는 기능을 향상시키는 데 도움이 되는 일련의 관련 변경 사항이 있습니다.

결론

<세부정보> HTML 요소는 CSS에서 사용자 정의하기가 훨씬 쉬워졌습니다. 이제 전체 브라우저 지원을 통해 독점적인 그룹을 만들고, 점진적인 향상으로 열기/닫기 상태 전환을 애니메이션화하고, 마커의 간단한 스타일을 수행할 수 있습니다.

<세부사항>의 아킬레스건 마커의 스타일입니다. 좋은 소식은 이 문제와 기타 문제점을 해결하는 적극적인 제안이 있다는 것입니다. 이렇게 하면

를 사용할 때 모든 걸림돌이 제거됩니다. 가까운 미래에는 공개 위젯을 직접 작성하거나 타사 웹 구성 요소를 사용할 필요가 없습니다! ?

---

프런트엔드가 사용자의 CPU를 많이 사용하고 있나요?

웹 프런트엔드가 점점 더 복잡해짐에 따라 리소스를 많이 사용하는 기능으로 인해 브라우저에서 점점 더 많은 것을 요구하게 됩니다. 프로덕션에 있는 모든 사용자의 클라이언트측 CPU 사용량, 메모리 사용량 등을 모니터링하고 추적하는 데 관심이 있다면 LogRocket을 사용해 보세요.

LogRocket은 웹 앱, 모바일 앱 또는 웹사이트에서 일어나는 모든 일을 기록하는 웹 및 모바일 앱용 DVR과 같습니다. 문제가 발생한 이유를 추측하는 대신 주요 프런트엔드 성능 지표를 집계 및 보고하고, 애플리케이션 상태와 함께 사용자 세션을 재생하고, 네트워크 요청을 기록하고, 모든 오류를 자동으로 표시할 수 있습니다.

웹 및 모바일 앱 디버깅 방법을 현대화하고 무료로 모니터링을 시작하세요.

위 내용은 최신 CSS를 사용하여 HTML

및

스타일 지정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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