1. 파일 열기

portfolio/css/styles.css를 엽니다. @property는 레이어 안이 아니라 최상위(전역 범위)에 둡니다.

2. 코드 작성

@property 선언과 히어로 배경 그라디언트를 추가합니다.

/* portfolio/css/styles.css */
@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 45deg;
}
 
@layer components {
  .hero {
    padding-block: var(--space-16);
    text-align: center;
    background: linear-gradient(
      var(--gradient-angle),
      var(--color-primary) 0%,
      var(--color-accent) 100%
    );
    transition: --gradient-angle 600ms ease;
  }
 
  .hero:hover {
    --gradient-angle: 225deg;
  }
}

@supports로 @property 미지원 브라우저의 폴백을 추가합니다. @property 자체는 2024-07부터 Baseline newly available이라 대부분의 최신 브라우저가 지원하지만, 이 사이트의 모든 최신 기능 실습과 마찬가지로 폴백을 습관으로 만듭니다.

/* portfolio/css/styles.css */
@supports not (background: paint(x)) {
  /* 실제 지원 판별용 프로퍼티가 아니라 예시 — 아래 실전 형태를 씁니다 */
}
 
@supports (transition: color 1s) and (not (syntax: '<angle>')) {
  .hero {
    /* @property 미지원 시 정적 그라디언트로 대체 */
    background: linear-gradient(45deg, var(--color-primary) 0%, var(--color-accent) 100%);
  }
}

@supports는 syntax 같은 @property 내부 디스크립터를 직접 조건으로 걸 수 없으므로, 실무에서는 아래처럼 @property 지원 여부를 별도 커스텀 속성 하나로 확인하는 패턴을 씁니다.

/* portfolio/css/styles.css */
@property --supports-check {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
 
.hero {
  --fallback-angle: 45deg;
}

--supports-check가 1로 계산되면 @property가 적용된 것이고, 지원하지 않는 브라우저는 이 속성 자체를 무시하므로 정적 그라디언트만 보입니다. 이 사이트는 대상 브라우저를 최신 Chrome·Edge로 좁혔으므로 이번 편은 이 정도 확인선에서 마무리하고, 완전한 자동 폴백 패턴은 16편(@supports 총정리)에서 다시 다룹니다.

3. 실행

브라우저에서 portfolio/index.html을 새로고침합니다.

4. 확인

• 히어로 섹션 배경이 --color-primary에서 --color-accent로 이어지는 대각선 그라디언트로 보입니다.
• 히어로 영역에 마우스를 올리면 그라디언트 각도가 0.6초에 걸쳐 부드럽게 회전합니다. 마우스를 떼면 다시 원래 각도로 돌아갑니다.
• 개발자 도구 콘솔에서 CSS.registerProperty를 검색하지 않아도, Elements → Styles에서 --gradient-angle 값에 마우스를 올리면 각도 슬라이더 UI가 나타납니다. 이는 브라우저가 이 값을 문자열이 아니라 각도 타입으로 인식했다는 표시입니다.
• syntax를 '*'로 임시로 바꿔 새로고침하면 hover 시 각도가 순간적으로 바뀌고 트랜지션이 사라집니다. 확인 후 다시 '<angle>'로 되돌립니다.