HTML 대화 상자 요소에 대한 몇 가지 CSS 트릭

최근에는 HTML <dialog> 요소를 실험하고 있습니다. JavaScript가 많이 사용되지 않는 기본 대화 상자에 매우 편리합니다.

작동 방식을 빠르게 확인하려면 My Games Jumblie를 방문하여 상단의 설정 톱니바퀴 버튼을 클릭하세요.

알겠습니다! 다음은 웹사이트에 자신만의 <dialog>을 구현할 때 유용할 수 있는 몇 가지 팁입니다!

흐리게<dialog>배경

::backdrop CSS 의사 요소는 <dialog>에만 국한되지 않습니다. 원하는 대로 스타일을 지정할 수 있지만 단순하게 유지하려면 다음과 같은 흐림 필터를 추가하여 배경을 약간 흐리게 할 수 있습니다.

<code>dialog::backdrop {
  backdrop-filter: blur(2px);
}</code>

물론 background-color과 같은 다른 속성을 추가할 수도 있습니다. 이에 대해 더 자세히 알아보고 싶다면 JavaScript를 사용한 의사 요소 스타일링에 대한 기사도 작성했습니다!

<dialog>열 때 페이지 스크롤 비활성화

멋진 스페셜 셀렉터입니다. <dialog>이 켜져 있으면 태그에 open 속성이 추가됩니다.

<code>body:has(dialog[open]) {
  overflow: hidden;
}</code>

이 선택기는 body에 open 속성이 있는 <dialog>이 포함되어 있는지 확인합니다. 그렇다면 페이지 스크롤을 비활성화하십시오! 물론 이상한 점은 대화 상자의 크기가 큰 경우 별도로 스크롤을 활성화해야 할 수도 있지만 이렇게 하면 스크롤할 때 대화 상자 뒤의 페이지가 이동하는 것을 방지할 수 있다는 것입니다.

그렇습니다! 이것이 도움이 되기를 바랍니다!

위 내용은 HTML 대화 상자 요소에 대한 몇 가지 CSS 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!