[CSS] 알아두면 무기가 되는 최신 CSS 문법 모음

이번 포스팅에서는 [모던 웹 생태계] 파트의 세부 주제인 Sass 없이 구현하는 네이티브 중첩과 신규 선택자들에 대하여 상세히 알아보겠습니다.

1. 혁명적인 부모 선택자: :has()

오랜 시간 프론트엔드 개발자들이 "자식 요소를 품고 있는 부모"를 선택해 달라고 절규했던 것을 해결해 준 녀석입니다. 이제 Javascript의 개입 없이 부모를 꾸밀 수 있습니다.

/* 내부에 'img' 태그를 자식으로 가지고 있는 'figure' 카드에만 그림자 추가 */
figure:has(img) {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 0;
}

/* 체크박스가 체크되었을 때, 그 부모 컨테이너 배경색 바꾸기! */
.form-group:has(input[type="checkbox"]:checked) {
  background-color: #e0f2fe;
}

2. 네이티브 CSS 중첩 (Nesting)

그동안 SCSS(Sass) 컴파일러를 써야만 가능했던 코드 중첩이 이젠 브라우저 기본 기능으로 내장되었습니다. 가독성이 매우 향상됩니다.

/* 최신 CSS Nesting 문법 */
.navbar {
  display: flex;
  background: #333;

  /* 부모 요소의 자식들을 내부에 바로 작성 */
  .nav-item {
    color: white;
    padding: 10px;

    /* 자신(:hover)을 나타내는 '&' 앰퍼샌드 사용 */
    &:hover {
      color: #38bdf8;
    }
  }
}

---

지금까지 판도를 뒤엎은 :has() 선택자와 네이티브 Nesting에 대해 살펴보았습니다. 최신 스펙이지만 빠르게 브라우저 점유율을 높여가고 있으므로 반드시 숙지해야 할 필수 지식입니다.