css로 돌아가 업데이트(:is(),:has(),컴포넌트 반응형)

css 지속적인 업데이트

최근에는 Tailwind를 주로 사용하고 있지만 css기능들이 점점 업데이트 되면서 scss보다 css를 사용할지 고민이 되네요.

새롭게 추 가된 기능을 소개해드릴께요.

 

:is () 선택자

 

/* :is()를 사용한 예시 */

:is(h1, h2, h3) {

   color: red;

}

 

이렇게 하면 h1, h2, h3 태그에 모두 color: red 스타일이 적용됩니다. :is()는 선택자가 길어질 때 가독성을 높이고, 반복되는 스타일을 더 간단하게 작성할 수 있게 해줍니다.

 

:has() 선택자

:has()는 부모 요소가 특정 자식 요소를 포함할 때 스타일을 적용하는 선택자입니다. 예를 들어, 자식 요소가 있을 때 부모 요소에 스타일을 적용할 수 있습니다. 이는 "부모 요소가 자식 요소를 가지고 있으면"이라는 조건을 만족할 때 사용됩니다.

 

/* :has()를 사용한 예시 */

div:has(> img) {

    border: 2px solid red;

}

 

이 코드는 div 요소 내에 img 태그가 있을 때 div에 border: 2px solid red를 적용합니다.

 

 

컴포넌트 반응형 디자인에서의 활용

is()와 :has()는 반응형 디자인에서도 강력하게 활용될 수 있습니다.

/* 화면 크기가 600px 이상일 때 */

@media (min-width: 600px) {

      .component:has(.sidebar) { display: flex; }

}

 

/* 화면 크기가 600px 미만일 때 */

@media (max-width: 599px) {

      .component:has(.sidebar) {

           display: block;

    }

}

 

위 예시에서 :has()는 sidebar가 포함된 .component 요소의 레이아웃을 반응형으로 변경하는 데 사용됩니다. 화면 크기에 따라 flex 또는 block을 적용해 레이아웃을 변경할 수 있습니다.이렇게 :is()와 :has()를 활용하면 반응형 디자인을 더 효율적으로 처리할 수 있으며, CSS 코드가 간결해지고 유지보수가 쉬워집니다.