최신 CSS를 사용하여 HTML 및 스타일 지정
스타일 지정
- DDD원래의
- 2025-01-03 05:54:40838검색
작가: 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이 포함되어 있다는 점에서 [
공개 위젯에는 구성 부분의 스타일을 지정하는 두 개의 의사 요소가 있습니다.
- ::marker 의사 요소:
의 시작 부분에 있는 삼각형 마커를 나타냅니다. 이에 대한 스타일링 스토리는 다소 복잡합니다. 우리는 작은 CSS 속성 집합으로 제한됩니다. 브라우저 지원은 ::marker에 적합하지만 Safari는 현재 전체 속성 세트를 지원하지 않습니다. 이 기사의 "요약 표시 스타일 지정" 섹션에서 이에 대해 자세히 설명하겠습니다. - ::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;
}
그것은 광범위한 스트로크입니다. 더 자세한 동영상 설명을 원하시면
공개 위젯에 애니메이션을 적용할 때 다른 고려 사항이 있나요?
'추가 정보' 콘텐츠가
다른 애니메이션과 마찬가지로 움직임에 민감한 사용자를 고려해야 합니다. 해당 시나리오를 충족하기 위해 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>
전용 아코디언을 사용하기 전, 사용자에게 도움이 되는지 생각해 보세요. 사용자가 더 많은 정보를 소비하려는 경우 항목을 자주 열어야 하므로 실망스러울 수 있습니다.
이 기능은 현재 모든 최신 브라우저에서 지원되므로 바로 사용하실 수 있습니다.
요약 마커 스타일 지정
공개 위젯은 일반적으로 옆에 작은 삼각형 마커가 표시됩니다. 이 섹션에서는 이 마커의 스타일을 지정하는 과정을 다룹니다.
마커는
- 모든 글꼴 속성
- 색상
- 공백
- text-combine-upright, [unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi) 및 방향 속성
- 내용
- 모든 애니메이션 및 전환 속성
앞서 언급했듯이
예제를 시작하기 전에 브라우저 지원에 대해 간단히 말씀드리겠습니다. 글을 쓰는 시점에서 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 속성을 사용하거나
/* 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;
}
저는
/* 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 */
}
}
차이점이 느껴지시나요? 섹션 시작 부분에는 여백이 하나만 있습니다.
및
공개 위젯 스타일을 지정할 때 흔히 저지르는 실수
- 기존에는 <세부정보> 요소. 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단계에는 이 기사에서 다룬 내용 중 일부가 포함됩니다.
- Flex 및 Grid와 같은 다른 디스플레이 유형을 사용할 수 있도록 CSS 디스플레이 속성 제한을 제거합니다.
- 섀도우 트리의 구조를 더욱 명확하게 지정합니다. 이는 Flexbox 및 CSS Grid와의 상호 운용성에 도움이 됩니다.
- 두 번째 슬롯의 주소를 지정하는 ::details-content 의사 요소를 추가하여 요소에 스타일을 지정할 수 있습니다
흥미로운 소식은 위 목록의 항목 1과 3이 Chrome 131(2024년 11월 기준)에 출시되었다는 것입니다. 다음 단계에서는 마커의 스타일을 개선하는 작업을 다루어야 합니다. 또한 이러한 요소에 애니메이션을 적용하는 기능을 향상시키는 데 도움이 되는 일련의 관련 변경 사항이 있습니다.
결론
<세부정보> HTML 요소는 CSS에서 사용자 정의하기가 훨씬 쉬워졌습니다. 이제 전체 브라우저 지원을 통해 독점적인 그룹을 만들고, 점진적인 향상으로 열기/닫기 상태 전환을 애니메이션화하고, 마커의 간단한 스타일을 수행할 수 있습니다.
<세부사항>의 아킬레스건 마커의 스타일입니다. 좋은 소식은 이 문제와 기타 문제점을 해결하는 적극적인 제안이 있다는 것입니다. 이렇게 하면
프런트엔드가 사용자의 CPU를 많이 사용하고 있나요?
웹 프런트엔드가 점점 더 복잡해짐에 따라 리소스를 많이 사용하는 기능으로 인해 브라우저에서 점점 더 많은 것을 요구하게 됩니다. 프로덕션에 있는 모든 사용자의 클라이언트측 CPU 사용량, 메모리 사용량 등을 모니터링하고 추적하는 데 관심이 있다면 LogRocket을 사용해 보세요.
LogRocket은 웹 앱, 모바일 앱 또는 웹사이트에서 일어나는 모든 일을 기록하는 웹 및 모바일 앱용 DVR과 같습니다. 문제가 발생한 이유를 추측하는 대신 주요 프런트엔드 성능 지표를 집계 및 보고하고, 애플리케이션 상태와 함께 사용자 세션을 재생하고, 네트워크 요청을 기록하고, 모든 오류를 자동으로 표시할 수 있습니다.
웹 및 모바일 앱 디버깅 방법을 현대화하고 무료로 모니터링을 시작하세요.
위 내용은 최신 CSS를 사용하여 HTML 스타일 지정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!