:is(), :where(), :has() 의사 클래스를 사용하여 CSS 작성을 줄입니다.

CSS는 수년에 걸쳐 많은 발전을 이루었습니다. 삶을 더 쉽게 만들어주는 새롭고 강력한 도구를 많이 소개합니다. 오늘은 이 도구들 중에서 세 가지를 골랐습니다. :is(), :has() 및 :where() 의사 클래스가 코드를 단순화하고, 읽기 쉽게 만들고, 반복을 줄이는 데 어떻게 도움이 되는지 살펴보겠습니다.

이 글에서는 :is(), :where() 및 :has() 의사 클래스의 내용, 방법, 이유에 대해 설명합니다. 이러한 의사 클래스를 사용하여 점점 더 최적화된 코드를 작성함으로써 웹사이트를 디자인할 수 있는 방법을 알게 될 것입니다. 이는 소프트웨어 개발에서 훌륭한 사례가 될 수 있습니다.

가상 클래스를 살펴보면서 기본 개요를 한 문장으로 정리하면 다음과 같습니다. CSS 의사 클래스는 특정 조건이나 상태를 기반으로 요소에 적용되는 규칙입니다. 의사 클래스에 대해 자세히 알아보려면 이 링크를 따르세요.

우리는 어떤 문제를 해결하고 있나요?

CSS(Cascading Style Sheet)를 사용하여 웹사이트를 디자인할 때 우리 모두가 직면하는 문제 중 하나는 코드 반복입니다.

예:

.card .title, .card .body-content, .card .footer-action {
 ...
}

이 예에는 각 하위 선택기에 대해 반복되는 .card 선택기가 있습니다. 그러나 동시에 동일한 스타일이 적용되는 것을 볼 수 있습니다.

CSS에서 그룹 선택기가 정상적으로 작동하는 방식은 각 선택기를 쉼표로 구분하는 것입니다. 이 코드는 잘 작동하지만 여기서 우려되는 점은 반복을 피하고 잘 정리되지 않는 것입니다.

여기서 직면한 또 다른 문제는 CSS 특정성 문제입니다. 그런 코드를 사용하고 너무 많이 반복하면 어떤 스타일이 어디서, 어떤 조건에서 사용되는지 잊어버릴 때가 있습니다. 여기서 의사 클래스가 중요한 역할을 합니다.

각 가상 클래스를 하나씩 살펴보고 그 목적을 이해해 보겠습니다.

:is() 의사 클래스 설명

:is() 의사 클래스를 사용하면 동일한 코드를 반복하지 않고도 공통 스타일을 공유하는 여러 요소를 선택할 수 있습니다. 선택기를 단일 블록으로 결합하여 선택기를 단순화하고 중복성을 줄입니다. 선택기 목록을 인수로 사용하고 해당 목록 내의 선택기와 일치하는 모든 요소에 스타일을 적용합니다.

.card :is(.title, .body-content, .footer-action) {
 ...
}

위의 예를 사용했는데, :is() 의사 클래스로 그룹화하여 CSS 코드의 반복을 줄이는 것이 얼마나 쉬운지 알게 될 것입니다. 코드를 깔끔하고 효율적으로 유지합니다.

위 예에서는 :is() 의사 클래스에 대한 인수로 .title, .body-content 및 .footer-action을 제공하는 것을 보여줍니다. :is() 이전에는 상위 컨테이너 .card가 하위 코드를 다른 코드와 별도로 유지하도록 정의되었습니다. 이것이 :is()가 목록과 일치하는 모든 인수에 동일한 스타일을 적용하는 방법입니다.

:is() 의사 클래스는 모든 주요 브라우저에서 널리 사용됩니다. caniuse.com의 아래 이미지는 다양한 브라우저 버전에 대한 자세한 개요를 보여줍니다.

...

설명 :where() 의사 클래스

:where() 의사 클래스는 :is()와 매우 유사합니다. 코드의 반복을 줄이기 위해 여러 선택기를 그룹화할 수 있습니다. 선택자를 인수로 사용합니다. :is()와 :where() 의사 클래스의 주요 차이점은 :where()의 특이성이 0이라는 것입니다. 즉, CSS 선택기에 가중치를 추가하지 않고 요소의 스타일을 지정하려는 경우 유용합니다.

:where() 의사 클래스로 정의된 스타일은 쉽게 재정의될 수 있습니다. 이는 :where()가 선택기에 추가 특이성을 추가하지 않으며 :where() 의사 클래스 내부의 스타일이 선택기 자체의 특이성을 기반으로 한다는 것을 의미합니다.

:where() 의사 클래스를 사용하는 한 가지 좋은 사용 사례는 여러 요소의 기본 스타일을 정의하고 해당 스타일이 나중에 이를 재정의할 수 있는 더 구체적인 규칙에 영향을 미치지 않도록 하는 것입니다.

이렇게 하면 :where()를 사용하면 충돌 시 어떤 규칙이 승리해야 하는지에 대해 CSS를 지나치게 고집하지 않고도 스타일을 적용할 수 있습니다.

/* Applying a default style */
:where(h1, p, a) {
  color: red; 
  font-size: 20px;
}

/* More specific style */
a {
  color: blue;
  font-size: 16px;
}

위의 예에서 h1, p 및 a 태그는 기본 스타일 지정을 위해 :where() 의사 클래스에 대한 인수로 제공됩니다. 그 후에는 스타일과 함께 독립형 태그로 사용되는 태그가 :where()에 정의된 스타일을 쉽게 재정의할 수 있습니다.

:is()와 마찬가지로 :where()도 거의 모든 주요 브라우저에서 지원됩니다. 지원되는 브라우저 버전을 확인하려면 caniuse.com에서 아래 이미지를 참조하세요.

:has() 의사 클래스 설명

:has()는 상위 선택자입니다. 이는 포함된 하위 요소를 기반으로 상위 요소를 선택할 수 있음을 의미합니다. 이전에는 CSS가 이런 종류의 동작을 허용하지 않았기 때문에 이것은 큰 문제입니다. :has()는 조건부 요구 사항을 충족하므로 CSS의 if 문이라고 말할 수도 있습니다.

img가 포함된 div에만 스타일을 지정한다고 가정해 보겠습니다. 기존 CSS로는 불가능했지만 :has()를 사용하면 가능해졌습니다.

<!-- Card with Image -->
<div class="card">
      <img src="https://placeholderjs.com/300x300" />
      <h1>Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
</div>

<!-- Card without Image -->
<div class="card">
      <h1>Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
      <a href="#">Call to Action</a>
    </div>

.card:has(a) {
  background-color: #e6e6e6;
}

.card:has(img) {
  background-color: #979759;
}

In this example, you see I have created two div elements with the same .card class, in CSS by using :has() pseudo-class. By using the same .card with :has() pseudo-class, two conditions are given with different styling that you can able to see in the image output.

:has() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:

Conclusion

As new features are introduced in CSS, the more power it gains, and allows writing code more readable, efficient, and optimized code. You have learned :is(), :where() and :has() pseudo-classes in this article, and you see how useful they are. These pseudo-classes make our job much easier, they can be easily maintained, and the code is optimized.

This article is to show you how powerful these features are, and we’re one step closer of using these features in our project. I highly suggest you use features like these to increase your productivity.

This post is originally posted at programmingly.dev. Read full article by following this link: write less CSS by using :is(), :where(), :has() pseudo-classes

위 내용은 :is(), :where(), :has() 의사 클래스를 사용하여 CSS 작성을 줄입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!