이 기사에서는 2024년에 도입될 몇 가지 새로운 CSS 기능을 살펴보겠습니다.
제 글이 마음에 드셨다면 커피 한잔 사주시면 됩니다 :)
컨테이너 쿼리를 사용하면 항목 컨테이너의 크기에 따라 항목에 스타일을 적용할 수 있습니다. 컨테이너 쿼리는 미디어 쿼리처럼 작동합니다.
컨테이너 쿼리 사용
컨테이너 쿼리를 사용하면 크기에 따라 상위 요소 내의 하위 요소 스타일을 동적으로 조정할 수 있습니다.
이를 위해서는 먼저 상위 요소에 대한 컨테이너 컨텍스트를 정의해야 합니다. 이를 컨테이너 유형 속성으로 지정합니다.
컨테이너 유형: 크기; 로 설정하면 너비와 높이 값을 모두 사용하여 쿼리할 수 있습니다.
컨테이너 유형: 인라인 크기; 로 설정하면 너비(가로 차원)에 대해서만 쿼리가 수행됩니다.
이 기능 덕분에 상위 요소의 크기에 따라 하위 요소의 스타일 속성이 변경될 수 있습니다.
예 :
<div class="post"> <div class="card"> <h2>Card title</h2> <p>Card content</p> </div> </div>
.post { container-type: size; } .card h2 { font-size: 1em; color: blue; } @container (min-width: 700px) { .card h2 { font-size: 5em; color: purple; } }
출력 :
CSS 중첩을 사용하면 하나의 규칙을 다른 규칙 안에 배치할 수 있습니다. 이는 상황에 따라 달라지는 스타일을 관리하는 데 특히 유용합니다. 예를 들어 .container 클래스가 있고 해당 클래스의 .item 요소에 스타일을 지정하려는 경우 .container 규칙 내부에 .item 규칙을 직접 작성할 수 있습니다. CSS Nesting은 브라우저에서 직접 구문 분석됩니다. 즉, 중첩된 규칙을 컴파일하는 데 전처리기가 필요하지 않습니다. 기본적으로 브라우저에서 작동합니다.
예 :
<form> <label for="name">Name: <input type="text" id="name" /> </label> <label for="surname">Surname:</label> <input type="text" id="surname" /> </form>
input { border: red 2px solid; } label { font-family: system-ui; font-size: 1.25rem; & input { border: purple 2px solid; } }
출력 :
범위 선택기는 CSS에서 스타일의 범위를 정의하는 데 사용됩니다.
사용방법 :
예 :
<html></html>
:scope { background-color: orange; }
출력 :
예 :
<div class="post"> <div class="card"> <h2>Card title</h2> <p>Card content</p> </div> </div>
.post { container-type: size; } .card h2 { font-size: 1em; color: blue; } @container (min-width: 700px) { .card h2 { font-size: 5em; color: purple; } }
출력 :
CSS의 :has() 선택기를 사용하면 상위 요소에 특정 하위 요소가 포함된 경우 해당 요소의 스타일을 지정할 수 있습니다.
예 :
<form> <label for="name">Name: <input type="text" id="name" /> </label> <label for="surname">Surname:</label> <input type="text" id="surname" /> </form>
input { border: red 2px solid; } label { font-family: system-ui; font-size: 1.25rem; & input { border: purple 2px solid; } }
출력 :
color-mix() 및 color-contrast()와 같은 새로운 색상 기능을 사용하면 색상
의 톤과 대비를 훨씬 더 효과적으로 제어할 수 있습니다.예 :
<html></html>
CSS 앵커 위치 지정 모듈은 요소를 함께 묶을 수 있는 기능을 정의합니다. 특정 요소는 앵커 요소로 정의됩니다. 앵커 위치 요소는 바인딩된 앵커 요소의 크기와 위치에 따라 크기와 위치를 설정할 수 있습니다.
이 기사에서는 2024년 CSS의 새로운 기능에 대해 살펴보았습니다. 이 기능을 앱에서 사용할 수 있습니다.
위 내용은 4의 몇 가지 새로운 기능 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!