4의 몇 가지 새로운 기능 CSS
- DDD원래의
- 2024-10-30 17:01:02834검색
이 기사에서는 2024년에 도입될 몇 가지 새로운 CSS 기능을 살펴보겠습니다.
제 글이 마음에 드셨다면 커피 한잔 사주시면 됩니다 :)
1. 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;
}
}
출력 :
2. CSS 중첩
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;
}
}
출력 :
3. :scope 의사 클래스
범위 선택기는 CSS에서 스타일의 범위를 정의하는 데 사용됩니다.
사용방법 :
- :scope가 CSS의 루트 수준에 있는 경우 :root 와 동일합니다.
예 :
<html></html>
:scope {
background-color: orange;
}
출력 :
- @scope 블록 내에서:scope를 사용하면 클래스 이름으로 정의된 컨텍스트를 기반으로 명확하고 타겟이 명확한 스타일을 지정할 수 있습니다.
예 :
<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;
}
}
출력 :
4. :has() 의사 클래스
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;
}
}
출력 :
5. 색상 기능
color-mix() 및 color-contrast()와 같은 새로운 색상 기능을 사용하면 색상
의 톤과 대비를 훨씬 더 효과적으로 제어할 수 있습니다.예 :
<html></html>
6. 앵커 위치 지정
CSS 앵커 위치 지정 모듈은 요소를 함께 묶을 수 있는 기능을 정의합니다. 특정 요소는 앵커 요소로 정의됩니다. 앵커 위치 요소는 바인딩된 앵커 요소의 크기와 위치에 따라 크기와 위치를 설정할 수 있습니다.
결론
이 기사에서는 2024년 CSS의 새로운 기능에 대해 살펴보았습니다. 이 기능을 앱에서 사용할 수 있습니다.
위 내용은 4의 몇 가지 새로운 기능 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!