당신이 몰랐던 CSS 선택자와 속성들

들어가며

CSS는 웹 개발에서 디자인을 담당하는 중요한 언어입니다.
하지만 대부분의 개발자(저)는 margin, padding, color, font-size 같은 속성만 사용합니다. 그런데 CSS에는 이보다 훨씬 더 다양한 선택자와 속성들이 있습니다. 많은 상황에서 유용하게 쓰일 수 있지만, 익숙하지 않아서 사용하지 않거나 개발의 편의를 위해서 JavaScript를 사용하는 경우가 많습니다.

오늘은 그 중에서도 특히 흥미로운 몇 가지를 소개해보겠습니다. 그럼 … 레쓰고

1. :is()와 :where(): 선택자 그룹화

여러 선택자를 그룹화할 때, 보통은 각 선택자를 따로 작성하곤 합니다.
하지만 :is()와 :where()를 사용하면 더 간결하게 작성할 수 있습니다.

/* 기존 방식 */
header h1,
header h2,
header h3 {
  color: blue;
}

/* :is() 사용 */
header :is(h1, h2, h3) {
  color: blue;
}

/* :where() 사용 */
header :where(h1, h2, h3) {
  color: blue;
}

• :is(): 선택자 그룹을 묶어서 스타일을 적용합니다.
• :where(): :is()와 비슷하지만, 특이도가 0입니다.

이 선택자들은 복잡한 선택자를 간결하게 작성할 때 유용합니다.

2. :has(): 조건부 선택자

특정 요소를 포함하는 부모 요소를 선택할 때, 보통은 JavaScript를 사용하곤 합니다.
하지만 :has()를 사용하면 CSS만으로도 조건부 선택이 가능합니다.

/* 이미지를 포함하는 div에 스타일 적용 */
div:has(img) {
  border: 2px solid blue;
}

/* 특정 클래스를 가진 자식 요소를 포함하는 요소 선택 */
section:has(.highlight) {
  background-color: yellow;
}

• :has(): 특정 요소를 포함하는 부모 요소를 선택합니다.

이 선택자는 아직 일부 브라우저에서만 지원되지만, 매우 강력한 기능입니다.

3. @supports: 기능 지원 여부 확인

특정 CSS 기능이 브라우저에서 지원되는지 확인할 때, 보통은 JavaScript를 사용하곤 합니다.
하지만 @supports를 사용하면 CSS만으로도 기능 지원 여부를 확인할 수 있습니다.

/* 그리드 레이아웃 지원 여부 확인 */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 사용자 정의 속성 지원 여부 확인 */
@supports (--custom-property: value) {
  .element {
    background-color: var(--custom-property);
  }
}

• @supports: 특정 CSS 기능이 지원되는지 확인합니다.

이 기능은 점진적 향상(Progressive Enhancement)을 구현할 때 유용합니다.

4. clip-path: 요소의 형태 변형

요소의 형태를 변형할 때, 보통은 border-radius를 사용하곤 합니다.
하지만 clip-path를 사용하면 더 복잡한 형태를 만들 수 있습니다.

/* 원형으로 자르기 */
.circle {
  clip-path: circle(50%);
}

/* 다각형으로 자르기 */
.polygon {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* SVG를 사용한 복잡한 형태 */
.custom-shape {
  clip-path: url(#custom-shape);
}

• clip-path: 요소의 형태를 변형합니다.

이 속성은 창의적인 디자인을 구현할 때 매우 유용합니다.

5. aspect-ratio: 요소의 종횡비 설정

요소의 종횡비를 설정할 때, 보통은 padding-top을 사용하곤 합니다.
하지만 aspect-ratio를 사용하면 더 간단하게 설정할 수 있습니다.

/* 16:9 비율 설정 */
.video {
  aspect-ratio: 16 / 9;
}

/* 정사각형 설정 */
.square {
  aspect-ratio: 1 / 1;
}

• aspect-ratio: 요소의 종횡비를 설정합니다.

이 속성은 반응형 디자인을 구현할 때 매우 유용합니다.

6. scroll-snap: 스크롤 스냅 기능

스크롤 시 요소가 특정 위치에 스냅되도록 할 때, 보통은 JavaScript를 사용하곤 합니다.
하지만 scroll-snap을 사용하면 CSS만으로도 구현할 수 있습니다.

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 300px;
}

.item {
  scroll-snap-align: start;
  height: 100px;
}

• scroll-snap-type: 스크롤 스냅 타입을 설정합니다.
• scroll-snap-align: 스냅 위치를 설정합니다.

이 속성은 캐러셀(Carousel)이나 페이지 스크롤을 구현할 때 유용합니다.

7. :empty: 빈 요소 선택

동적으로 콘텐츠가 로드되는 상황에서 빈 요소를 처리할 때, 보통은 JavaScript를 사용하곤 합니다.
하지만 :empty 선택자를 사용하면 CSS만으로도 빈 요소를 선택할 수 있습니다.

/* 빈 요소 숨기기 */
.container:empty {
  display: none;
}

/* 빈 요소에 플레이스홀더 표시 */
.content:empty::before {
  content: "데이터 로딩 중...";
  color: #999;
}

• :empty: 자식 요소나 텍스트가 없는 요소를 선택합니다.

이 선택자는 로딩 상태나 빈 상태를 처리할 때 유용합니다.

8. writing-mode: 텍스트 방향 설정

세로 방향 텍스트를 구현할 때, 보통은 복잡한 레이아웃 기법을 사용하곤 합니다.
하지만 writing-mode를 사용하면 간단하게 텍스트 방향을 변경할 수 있습니다.

/* 세로 방향 텍스트 (위에서 아래로) */
.vertical-text {
  writing-mode: vertical-rl;
}

/* 가로 방향 텍스트 (기본값) */
.horizontal-text {
  writing-mode: horizontal-tb;
}

• writing-mode: 텍스트의 쓰기 방향을 설정합니다.

이 속성은 다국어 지원이나 창의적인 레이아웃을 구현할 때 유용합니다.

마무리

오늘은 :is(), :where(), :has(), @supports, clip-path, aspect-ratio, scroll-snap, :empty, writing-mode와 같은 특이한 CSS 선택자와 속성들을 소개했습니다.
CSS로 해결할 수 있는 문제는 JS의 도움을 받지 않아도 해결할 수 있습니다.

하지만 이런 선택자와 속성들을 잘 활용하면,

• 더 간결하고 효율적인 CSS를 작성할 수 있고,
• JavaScript 의존도를 줄일 수 있으며,
• 마크업 코드를 더 깔끔하게 작성할 수 있습니다.

그럼 다음 번 프로젝트에서 한번 활용해보는 건 어떨까요?