4의 몇 가지 새로운 기능 CSS-CSS 튜토리얼-php.cn

4의 몇 가지 새로운 기능 CSS

DDD

풀어 주다： 2024-10-30 17:01:02

원래의

926명이 탐색했습니다.

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

제 글이 마음에 드셨다면 커피 한잔 사주시면 됩니다 :)
Some new features CSS in 4

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;
    }
  }

로그인 후 복사

출력 :

Some new features CSS in 4

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;
    }
  }

로그인 후 복사

출력 :

Some new features CSS in 4

3. :scope 의사 클래스

범위 선택기는 CSS에서 스타일의 범위를 정의하는 데 사용됩니다.

사용방법 :

:scope가 CSS의 루트 수준에 있는 경우 :root

예 :

<html></html>

로그인 후 복사

:scope {
  background-color: orange;
}

로그인 후 복사

출력 :

Some new features CSS in 4

@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;
    }
  }

로그인 후 복사

출력 :

Some new features CSS in 4

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;
    }
  }

로그인 후 복사

출력 :

Some new features CSS in 4