4의 몇 가지 새로운 기능 CSS

이 기사에서는 2024년에 도입될 몇 가지 새로운 CSS 기능을 살펴보겠습니다.

제 글이 마음에 드셨다면 커피 한잔 사주시면 됩니다 :)

1. CSS 컨테이너 쿼리

컨테이너 쿼리를 사용하면 항목 컨테이너의 크기에 따라 항목에 스타일을 적용할 수 있습니다. 컨테이너 쿼리는 미디어 쿼리처럼 작동합니다.

컨테이너 쿼리 사용

컨테이너 쿼리를 사용하면 크기에 따라 상위 요소 내의 하위 요소 스타일을 동적으로 조정할 수 있습니다.

이를 위해서는 먼저 상위 요소에 대한 컨테이너 컨텍스트를 정의해야 합니다. 이를 컨테이너 유형 속성으로 지정합니다.

• 컨테이너 유형: 크기; 로 설정하면 너비와 높이 값을 모두 사용하여 쿼리할 수 있습니다.

• 컨테이너 유형: 인라인 크기; 로 설정하면 너비(가로 차원)에 대해서만 쿼리가 수행됩니다.

이 기능 덕분에 상위 요소의 크기에 따라 하위 요소의 스타일 속성이 변경될 수 있습니다.

예 :

 <div class="post">
        <div class="card">
          <h2 id="Card-title">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은 브라우저에서 직접 구문 분석됩니다. 즉, 중첩된 규칙을 컴파일하는 데 전처리기가 필요하지 않습니다. 기본적으로 브라우저에서 작동합니다.

예 :

Name: Surname:

 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
와 동일합니다.

예 :

:scope {
  background-color: orange;
}

출력 :

---

• @scope 블록 내에서:scope를 사용하면 클래스 이름으로 정의된 컨텍스트를 기반으로 명확하고 타겟이 명확한 스타일을 지정할 수 있습니다.

예 :

 <div class="post">
        <div class="card">
          <h2 id="Card-title">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() 선택기를 사용하면 상위 요소에 특정 하위 요소가 포함된 경우 해당 요소의 스타일을 지정할 수 있습니다.

예 :

Name: Surname:

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

출력 :

---

5. 색상 기능

color-mix() 및 color-contrast()와 같은 새로운 색상 기능을 사용하면 색상

의 톤과 대비를 훨씬 더 효과적으로 제어할 수 있습니다.

예 :

---

6. 앵커 위치 지정

CSS 앵커 위치 지정 모듈은 요소를 함께 묶을 수 있는 기능을 정의합니다. 특정 요소는 앵커 요소로 정의됩니다. 앵커 위치 요소는 바인딩된 앵커 요소의 크기와 위치에 따라 크기와 위치를 설정할 수 있습니다.

---

결론

이 기사에서는 2024년 CSS의 새로운 기능에 대해 살펴보았습니다. 이 기능을 앱에서 사용할 수 있습니다.

위 내용은 4의 몇 가지 새로운 기능 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!