M

MLOG

한국어

브라우저 지원, 뷰포트 크기 등에 따른 조건부 스타일 적용을 가능하게 하는 강력한 기능인 CSS @when 규칙을 탐색합니다. 실용적인 예제로 학습해보세요.

CSS @when 규칙: 조건부 스타일 적용 마스터하기

CSS의 세계는 끊임없이 진화하며 개발자들에게 웹 페이지를 스타일링할 수 있는 더 강력하고 유연한 방법을 제공합니다. 주목받고 있는 기능 중 하나는 CSS 조건부 규칙 모듈 레벨 1이라고도 알려진 @when 규칙입니다. 이 규칙을 사용하면 특정 조건이 충족되는지에 따라 CSS 스타일을 조건부로 적용할 수 있습니다. 이는 반응형 디자인, 기능 감지 및 더 강력하고 적응적인 스타일시트를 만드는 데 강력한 도구입니다.

CSS @when 규칙이란 무엇인가요?

@when 규칙은 CSS의 조건부 at-규칙으로, 특정 조건이 참일 경우에만 적용되는 스타일을 정의할 수 있습니다. CSS의 if 문이라고 생각하시면 됩니다. 주로 뷰포트 특성(화면 크기, 방향 등)에 초점을 맞추는 미디어 쿼리와 달리, @when은 조건부 스타일링을 처리하는 더 일반적이고 확장 가능한 방법을 제공합니다. @supports 및 @media와 같은 기존 조건부 at-규칙을 확장합니다.

@when 사용의 주요 장점

@when 규칙의 구문

@when 규칙의 기본 구문은 다음과 같습니다. 
@when <condition> {
  /* 조건이 참일 때 적용될 CSS 규칙 */
}

<condition>은 참 또는 거짓으로 평가되는 유효한 부울 표현식일 수 있습니다. 이 표현식은 종종 다음을 포함합니다.

실제 @when 적용 예시

@when 규칙의 강력함과 다재다능함을 보여주는 몇 가지 실제 예시를 살펴보겠습니다.

1. @when 및 미디어 쿼리를 사용한 반응형 디자인

@when의 가장 일반적인 사용 사례는 화면 크기에 따라 스타일을 조정하는 반응형 디자인입니다. 미디어 쿼리만으로도 이를 달성할 수 있지만, @when은 특히 복잡한 조건을 다룰 때 더 구조화되고 읽기 쉬운 접근 방식을 제공합니다.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

이 예에서 @when 블록 내의 스타일은 화면 너비가 768px에서 1023px 사이(일반적인 태블릿 크기)일 때만 적용됩니다. 이는 특정 뷰포트 범위에 대한 스타일을 명확하고 간결하게 정의하는 방법을 제공합니다.

국제화 참고: 반응형 디자인은 글로벌 시청자에게 매우 중요합니다. 다양한 지역의 다양한 화면 크기를 고려하십시오. 예를 들어, 일부 국가에서는 모바일 사용량이 더 많아 모바일 우선 디자인이 더욱 중요합니다.

2. @when 및 @supports를 사용한 기능 감지

@when은 @supports와 결합하여 특정 CSS 기능이 브라우저에서 지원될 때만 스타일을 적용할 수 있습니다. 이를 통해 웹사이트를 점진적으로 향상시켜 최신 브라우저 사용자를 위한 더 나은 경험을 제공하는 동시에 이전 브라우저와의 호환성을 유지할 수 있습니다.

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* 그리드를 지원하지 않는 브라우저를 위한 대체 스타일 */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* 이전 브라우저에 대한 너비 조정 */
  }
}

여기서는 @supports를 사용하여 브라우저가 CSS Grid Layout을 지원하는지 확인합니다. 지원하는 경우 .container에 그리드 기반 스타일을 적용합니다. 그렇지 않으면 flexbox를 사용하여 대체 스타일을 제공하여 이전 브라우저에서도 유사한 레이아웃이 달성되도록 합니다.

글로벌 접근성 참고: 기능 감지는 접근성에 중요합니다. 이전 브라우저는 최신 ARIA 속성 또는 의미론적 HTML5 요소에 대한 지원이 부족할 수 있습니다. 콘텐츠가 접근 가능하도록 적절한 대체 방법을 제공하십시오.

3. 미디어 쿼리 및 기능 쿼리 결합

@when의 진정한 힘은 미디어 쿼리와 기능 쿼리를 결합하여 더 복잡하고 미묘한 조건부 스타일링 규칙을 만들 수 있는 능력에서 나옵니다.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

이 예에서 .modal 요소는 화면 너비가 최소 768px이고 브라우저가 backdrop-filter 속성을 지원하는 경우에만 흐릿한 배경을 갖게 됩니다. 이를 통해 최신 브라우저에서 시각적으로 매력적인 효과를 만들 수 있으며, 이전 브라우저에서의 잠재적인 성능 문제나 렌더링 글리치를 피할 수 있습니다.

4. 사용자 정의 속성(CSS 변수) 기반 스타일링

@when은 CSS 사용자 정의 속성(CSS 변수라고도 함)과 함께 사용하여 동적이고 상태 기반 스타일링을 만들 수도 있습니다. JavaScript를 사용하여 사용자 정의 속성의 값을 업데이트한 다음 @when을 사용하여 해당 값을 기반으로 다른 스타일을 적용할 수 있습니다.

먼저 사용자 정의 속성을 정의합니다.

:root {
  --theme-color: #007bff; /* 기본 테마 색상 */
  --is-dark-mode: false;
}

그런 다음 @when을 사용하여 사용자 정의 속성 값을 기반으로 스타일을 적용합니다.

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

마지막으로 JavaScript를 사용하여 --is-dark-mode 사용자 정의 속성 값을 전환합니다.

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

이를 통해 사용자는 라이트 및 다크 테마 간에 전환할 수 있으며 CSS는 사용자 정의 속성 값을 기반으로 동적으로 업데이트됩니다. `@when`에서 CSS 변수를 직접 비교하는 것은 브라우저 전체에서 보편적으로 지원되지 않을 수 있습니다. 대신, 0이 아닌 값을 확인하는 미디어 쿼리를 사용하는 해결 방법이 필요할 수 있습니다:

@when ( --is-dark-mode > 0 ) { ... }

하지만 이 기능을 제대로 작동하려면 사용자 정의 속성이 숫자 값을 갖도록 해야 합니다.

접근성 참고: 대체 테마(예: 다크 모드)를 제공하는 것은 접근성에 중요합니다. 시각 장애가 있는 사용자는 고대비 테마를 유익하게 사용할 수 있습니다. 테마 전환이 키보드 및 화면 판독기를 통해 접근 가능한지 확인하십시오.

5. 데이터 속성 기반 스타일링

@when과 데이터 속성을 함께 사용하여 데이터 값을 기반으로 요소를 스타일링할 수도 있습니다. 이는 요소의 모양이 사용자 상호 작용 또는 데이터 업데이트에 따라 변경되는 동적 인터페이스를 만드는 데 유용할 수 있습니다.

예를 들어, 각 작업에 상태(예: "todo", "in-progress", "completed")를 나타내는 data-status 속성이 있는 작업 목록이 있다고 가정해 보겠습니다. @when을 사용하여 각 작업의 상태에 따라 다르게 스타일링할 수 있습니다.

[data-status="todo"] {
  /* todo 작업에 대한 기본 스타일 */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

참고: `attribute()` 테스트 조건에 대한 지원은 현재 모든 브라우저에서 제한적이거나 완전히 구현되지 않았을 수 있습니다. 항상 철저하게 테스트하십시오.

브라우저 호환성 및 폴리필

2024년 말 기준, @when 규칙에 대한 브라우저 지원은 여전히 발전 중입니다. 많은 최신 브라우저가 핵심 기능을 지원하지만, 일부 이전 브라우저는 그렇지 않을 수 있습니다. 따라서 호환성 테이블을 확인하고 필요한 경우 적절한 대체 또는 폴리필을 사용하는 것이 중요합니다.

항상 Can I use...와 같은 리소스를 참조하여 @when 및 관련 기능의 현재 브라우저 지원 상태를 확인하십시오.

@when 사용 모범 사례

결론

@when 규칙은 CSS 도구 상자에 강력한 추가 기능으로, 개발자에게 스타일을 조건부로 적용할 수 있는 더 유연하고 표현력 있는 방법을 제공합니다. 이를 미디어 쿼리, 기능 쿼리 및 CSS 사용자 정의 속성과 결합하면 더 강력하고 적응적이며 유지 관리하기 쉬운 스타일시트를 만들 수 있습니다. 브라우저 지원은 아직 발전 중이지만, @when은 탐색하고 최신 웹 개발 워크플로에 통합할 가치가 있는 기능입니다.

웹이 계속 발전함에 따라 @when과 같은 기능을 마스터하는 것은 전 세계 사용자에게 매력적이고 접근 가능하며 성능이 뛰어난 경험을 만드는 데 필수적입니다. 조건부 스타일링의 힘을 받아들이고 CSS 개발에서 새로운 가능성을 열어보십시오.