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 코드가 간결해지고 유지보수가 쉬워집니다.
'Front-End > Html | CSS' 카테고리의 다른 글
CSS button hover/active (0) | 2024.04.08 |
---|---|
HTML 기본 - 프론트 엔드 (0) | 2023.05.12 |
display | position 차이 (0) | 2023.05.05 |
댓글