devmoa

알쓸신CSS (알아두면 언젠가 쓸 수도 있는 새로운 CSS 속성)

데이블·2021년 9월 29일·00
CSSgapsubgrid::marker:is:wherevar()

AI 요약

Beta

이 글은 아직 널리 지원되지는 않지만 알아두면 유용한 새로운 CSS 속성 6가지를 소개합니다. 소개되는 속성들은 gap, subgrid, ::marker, :is, :where, :root & var(), @supports 입니다.

특히 gap 속성은 grid, flex, multi-column 레이아웃에서 요소 간의 여백을 쉽게 설정할 수 있도록 변경되었으며, grid 레이아웃에서는 가로 및 세로 여백을 개별적으로 설정하는 예시를 보여줍니다. 또한, ::marker는 리스트 마커의 스타일을 변경하고, :is와 :where는 선택자를 더 간결하게 작성할 수 있게 합니다.

:root와 var()는 CSS 변수를 활용하는 방법을, @supports는 특정 CSS 기능 지원 여부를 확인하는 방법을 설명합니다. 이 새로운 속성들을 통해 더욱 유연하고 효율적인 웹 페이지 스타일링이 가능해질 것입니다.

이 글이 궁금하신가요?

원문 블로그에서 전체 내용을 확인해 보세요

원문 읽으러 가기

AI 추천 연관 게시글

이 글과 관련된 다른 기술 블로그 글을 AI가 추천합니다