# Interop 2027에서 주목해야 할 미래의 CSS

> https://bookfactory.kr/board/news/23527
> 게시판: 뉴스
> 작성자: tachikoma43
> 작성일: 2026-10-23T23:40:25.961Z

---

/* 45 도 각도로 100px 이동 */

particle {
  transform: --translate-polar(45deg, 100px);
}

크롬 브라우저에는 이미 구현되어 있지만, Interop 2027 에 추가된다면 다른 브라우저에도 확산될 것으로 기대됩니다.

◆corner-shape 요소는 기존의 border-radius 를 대신하여 모기를 부여할 수 있으며, corner-shape 을 사용하면 모서리 모양에 'squircle' 또는 'bevel' 등을 지정할 수 있습니다.

모서리 모양은 border, outline, box-shadow 에 대해 유효합니다.

코모어氏は当初 Apple UI 에서 흔히 볼 수 있는 'squircle' 에 주목했으나, 이후 'bevel' 을 가장 자주 사용하게 되었다는 것입니다.

◆border-shape corner-shape 보다 더 낮은 수준의 속성인 border-shape 은 직선, 원호, 베지 곡선을 사용하여 고유한 border 모양을 그릴 수 있습니다.

border-shape 은 애니메이션을 지정할 수도 있습니다.

◆Anchor Positioning API 를 사용하여 Anchor Style 의 컨테이너 쿼리를 통해 특정 요소를 다른 요소에 고정할 수 있습니다.

예를 들어, 플로팅 툴팁 요소를 그 트리거에 고정하면 트리거가 페이지의 어디에 있든 툴팁은 항상 트리거에 연결된 상태를 유지합니다.

Anchor Positioning API 를 사용하지 않고 동일한 기능을 구현하는 것은 매우 어렵습니다. 예를 들어, 툴팁을 안커 위에 띄우고 싶을 때 안커가 뷰포트의 상단 근처에 있으면 툴팁이 화면 밖으로 튀어나오기 때문에 수동으로 조정해야 하는 경우가 생깁니다.

그런데 기존 CSS 는 타겟 요소가 안커 위에 있는지 아래에 있는지, 기본 위치를 사용하고 있는지 또는 페일백 위치를 사용하고 있는지 여부를 알 수 있는 방법이 없었습니다.

그게 문제가 되는 이유는 툴팁을 구현할 때 일반적으로 안커 방향으로 화살표 부분을 추가하고 싶기 때문입니다.

Anchor Positioning API 의 '레벨 2'에는 타겟 요소가 페일백 위치를 사용하고 있는지 여부를 확인할 수 있는 새로운 유형의 컨테이너 쿼리가 포함되어 있습니다.

추가된 컨테이너 쿼리의 자세한 내용은 코모어 씨의 다른 블로그 기사에서 다루고 있습니다.

◆ CSS inherit() 함수 CSS 의 inherit 키워드를 사용하면 일반적으로 상속되지 않는 속성이라도 부모 요소에서 값을 전달할 수 있습니다.

유용한 `inherit` 키워드는 특정 경우에는 제대로 작동하지 않을 수 있습니다.

예를 들어, `border-radius` 의 반지름을 그대로 자식 요소에 상속시키면 외관이 이상해집니다.

각을 둥글게 한 경계가 네스팅될 경우, 내부 경계의 둥글기 반지름은 작게 설정해야 합니다.

이를 위해서는 상속된 값을 그대로 사용하는 대신, 계산식으로 변환된 값을 사용해야 합니다.

이에 제안된 것이 바로 `inherit()` 함수로, 예를 들어 `calc()` 와 함께 사용하면 다음과 같이 지정할 수 있습니다.

```css
p {
  border-radius: calc(inherit() - 4px);
}
```

`inherit()` 함수는 아직 제안된 지 얼마 되지 않았으며, Interop 2027 에는間に合わないかもしれませんが, 매우 유용해 보이기 때문에 언제든 구현되기를 바란다고 코모어 씨는 말했습니다.

◆스크롤 트리거 애니메이션
Interop 2026 에서 도입되어 모든 브라우저에서 구현된 '스크롤 구동형 애니메이션'을 추가하여, 특정 스크롤 위치에서 키프레임 애니메이션을 트리거하는 '스크롤 트리거 애니메이션'을 CSS 로 직접 처리할 수 있도록 제안합니다.

◆reading-flow 와 reading-order
그리드 기반 레이아웃에서는 화면 크기에 따라 시각적 레이아웃과 DOM 순서가 일치하지 않는 경우가 많습니다.

반응형 디자인의 부작용으로 인해 탭 오더는 항상 DOM 순서에만 기반하며 시각적 순서에 기반하지 않습니다.

따라서 요소 간 이동에 보조 기술을 사용하는 경우, 화면 크기에 따라 레이아웃이 크게 변하더라도 탐색 순서는 항상 동일하게 유지됩니다.

Interop 2027 제안에 포함된 reading-flow 속성은 탭 오더를 여러 가지 시각적 순서 중 하나에 따르도록 지정함으로써 이 문제의 해결책을 제공합니다.

grid {
  display: grid;
  reading-flow: grid-rows;
}reading-flow 에 지정 가능한 값은 Grid 와 Flexbox 모두 준비되어 있지만, 더 세밀한 제어가 필요한 경우 reading-order 속성을 사용하여 HTML 의 tabIndex 와 같이 고유한 순서를 설정할 수 있습니다.

◆키워드 크기 애니메이션: interpolate-size 와 calc-size() 웹 개발의 오랜 과제 중 하나는 "auto 키워드 값 사이의 애니메이션이 불가능하다"는 것이었습니다. Interop 2027 제안에 있는 interpolate-size 속성은 이 문제를 해결합니다.

html {
  interpolate-size: allow-keywords;
}
이를 통해 예를 들어 "height: 0" 에서 "height: auto" 로의 애니메이션이 가능해집니다.

또한 관련 calc-size() 도 함께 제안되었습니다.

이것은 아코디언 UI 등에 활용될 것으로 생각되며, Chrome 에서 이미 구현되었습니다.

◆Gap CSS Grid 레이아웃에서 그리드 셀 사이의 경계선 (라인) 을 직접 추가할 수 있는 기능입니다.

rule 속성으로 경계선의 너비, 색상, 스타일을 지정할 수 있으며, row-rule 과 column-rule 속성을 사용하여 행 또는 열에만 적용할 수도 있습니다.

◆스크롤 상태 컨테이너 쿼리 "position: sticky" 를 지정된 요소가 고정되어 있는지, 또는 스크롤 컨테이너가 상단/하단에 스크롤되어 있는지 감지하고, 그에 맞는 스타일링을 가능하게 합니다.

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .

웹 브라우저 호환성 개선 프로젝트 'Interop 2027'에서 주목할 만한 CSS 기능 Top 10에 대해 웹 개발자 조슈 코모우 (Josh Comeau) 가 자신의 블로그에서 설명했습니다. The Future of CSS ✨ • Josh W. Comeauhttps://www.joshwcomeau.com/css/interop-2027/

◆CSS 커스텀 함수 @function 을 사용하여 CSS 커스텀 함수를 정의함으로써, 그라데이션이나 복잡한 계산을 재사용할 수 있습니다. 코모우는 개인적으로 '극좌표와 직교좌표 변환'에 관심이 있다고 말했습니다.

@function --translate-polar(--angle, --distance) {
  result: translate(
    calc(cos(var(--angle)) * var(--distance)),
    calc(sin(var(--angle)) * var(--distance))
  );
}

header-content {
    background: var(--gray-300);
    border-bottom:
      1px solid var(--gray-500);
  }
}

위 예시에서는 스티커 헤더가 상단에 고정될 때 배경과 경계선의 색상이 변경됩니다.

◆요약Interop 프로젝트는 웹 호환성 개선에 크게 기여하며 앞으로도 더욱 발전할 것으로 예상됩니다.

이번에 언급된 기능들은 이미 일부에서 사용 가능하며, 미래에는 널리 지원될 것으로 생각됩니다.

대규모 언어 모델 (LLM) 의 활용이 진전되는 현대에 있어서, 인간이 이러한 최신 CSS 기능을 이해하고, 오래된 데이터로 학습해 온 LLM 에게 최신 웹 기능을 활용할 수 있도록 안내해 주는 것의 중요성은 오히려 높아지고 있다고 코모우는 지적했습니다.

Google 우선 소스로 설정 Clipboard 기사 제목과 URL 을 복사 X Facebook Bluesky Discord Threads

크롬 브라우저에는 이미 구현되어 있지만, Interop 2027 에 추가된다면 다른 브라우저로의 확산이 기대됩니다. ◆corner-shape 요소에 둥근 모서리를 부여하는 기존의 border-radius 를 대신하여 corner-shape 를 사용하면 모서리 모양에 'squircle' 또는 'bevel' 등을 지정할 수 있습니다.

모서리 모양은 border, outline, box-shadow 에 대해 유효합니다. 코머 (Corner)氏は 초기에는 애플 UI 에서 흔히 볼 수 있는 'squircle' 에 주목했으나, 이후 'bevel' 을 가장 빈번하게 사용하게 되었다는 것입니다.

◆border-shape 는 border-shape 보다 더 낮은 수준의 속성으로, 직선, 원호, 베지 곡선을 사용하여 고유한 border 모양을 그릴 수 있습니다.

border-shape 는 애니메이션을 지정할 수도 있습니다. ◆Anchor Positioning API 를 사용하면 특정 요소를 다른 요소에 고정할 수 있습니다. 예를 들어, 플로팅 툴팁 요소를 그 트리거에 고정하면 트리거가 페이지의 어디에 있든 툴팁은 항상 트리거에 연결된 상태를 유지합니다. Anchor Positioning API 를 사용하지 않고 동일한 효과를 구현하는 것은 매우 어렵습니다. 예를 들어, 툴팁을 안커 위에 띄우고 싶을 때 안커가 뷰포트의 상단 근처에 있으면 툴팁이 화면 밖으로 튀어나오기 때문에 수동으로 조정해야 하는 경우가 생깁니다.

경계선이 둥근 모서리를 가질 경우, 내부 경계선의 둥근 모서리 반지름은 작게 설정해야 합니다.

이를 위해 상속된 값을 그대로 사용하는 대신 계산식으로 변환된 값을 사용해야 합니다.

이에 대해 제안된 inherit() 함수는 calc() 와 함께 사용할 경우 다음과 같이 지정할 수 있습니다.

p {
  border-radius: calc(inherit() - 4px);
}

코모어 씨는 아직 제안된 지 얼마 되지 않은 inherit() 함수가 매우 유용해 보이기 때문에 언제든 구현되기를 바란다고 말했습니다. 다만 이 함수가 Interop 2027 에까지 구현되기는 어려울 수도 있습니다.

◆스크롤 트리거 애니메이션 Interop 2026 에서 도입되어 모든 브라우저에서 구현된 '스크롤 기반 애니메이션'에 더해, 특정 스크롤 위치에서 키프레임 애니메이션을 트리거하는 '스크롤 트리거 애니메이션'을 CSS 로 직접 처리할 수 있도록 하는 제안입니다.

◆reading-flow 와 reading-order 그리드 기반 레이아웃에서는 화면 크기에 따라 시각적 레이아웃과 DOM 순서가 일치하지 않는 경우가 많습니다.

반응형 디자인의 부작용으로 인해 탭 오더는 항상 DOM 순서에만 기반하며 시각적 순서에 기반하지 않습니다.

따라서 어떤 보조 기술을 사용하여 요소 간을 이동하는 경우, 화면 크기에 따라 레이아웃이 크게 변하더라도 네비게이션 순서는 항상 동일하게 유지됩니다.

Interop 2027 제안에 포함된 reading-flow 속성은 탭 순서를 몇 가지 시각적 순서 중 하나에 따라 지정함으로써 이 문제의 해결책을 제공합니다.

```css
grid {
  display: grid;
  reading-flow: grid-rows;
}
```
reading-flow 에 지정 가능한 값은 Grid 와 Flexbox 모두 준비되어 있지만, 더 세밀한 제어가 필요한 경우 reading-order 속성을 사용하여 HTML 의 tabIndex 와 같이 고유한 순서를 설정할 수 있습니다.

◆키워드 크기 애니메이션: interpolate-size 와 calc-size() 웹 개발의 오랜 과제 중 하나인 "auto 키워드 값 사이의 애니메이션이 불가능하다"는 문제가 있었으나, Interop 2027 제안에 있는 interpolate-size 속성은 이 문제를 해결합니다.

html {
  interpolate-size: allow-keywords;
}
이를 통해 예를 들어 "height: 0" 에서 "height: auto" 로의 애니메이션이 가능해집니다.

또한 관련 calc-size() 도 함께 제안되었습니다.

이것은 아코디언 UI 등에 활용될 것으로 예상되며, Chrome 에서 이미 구현되었습니다.

◆Gap CSS Grid 레이아웃에서 그리드 셀 사이의 경계선 (그림자) 을 직접 추가할 수 있는 기능입니다.

rule 속성으로 경계선의 너비, 색상, 스타일을 지정할 수 있으며, row-rule 과 column-rule 속성을 사용하여 행 또는 열에만 적용할 수도 있습니다.

◆스크롤 상태 컨테이너 쿼리 "position: sticky" 를 지정된 요소가 고정되어 있는지, 또는 스크롤 컨테이너가 상단/하단에 스크롤되어 있는지 감지하고, 이에 맞는 스타일링을 가능하게 합니다.

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .

`inherit()` 함수는 아직 제안된 지 얼마 되지 않았으며 Interop 2027 에는間に合わない지도 모르지만 매우 유용해 보이기 때문에 코모어 씨는 언제든 구현되기를 바라고 있습니다.

◆스크롤 트리거 애니메이션 Interop 2026 에서 도입되어 모든 브라우저에서 구현된 '스크롤 기반 애니메이션'에 더해, 특정 스크롤 위치에서 키프레임 애니메이션을 트리거하는 '스크롤 트리거 애니메이션'을 CSS 로 직접 처리할 수 있도록 하는 제안입니다.

◆reading-flow 와 reading-order 를 기반으로 한 그리드 기반 레이아웃에서는 화면 크기에 따라 시각적 레이아웃과 DOM 순서가 일치하지 않는 경우가 많습니다.

반응형 디자인의 부작용으로 인해 탭 오더는 항상 DOM 순서에만 기반하며 시각적 순서에 기반하지 않습니다.

따라서 요소 간 이동에 어떤 보조 기술을 사용하는 경우, 화면 크기에 따라 레이아웃이 크게 변하더라도 탐색 순서는 항상 동일하게 유지됩니다.

Interop 2027 의 제안에 포함된 reading-flow 속성은 탭 오더를 몇 가지 시각적 순서 중 하나에 따라 지정함으로써 이 문제의 해결책을 제공합니다.

grid {
  display: grid;
  reading-flow: grid-rows;
}reading-flow 에 지정 가능한 값은 Grid 와 Flexbox 두 가지가 준비되어 있지만, 더 세밀한 제어가 필요한 경우 reading-order 프로퍼티를 사용하여 HTML 의 tabIndex 와 유사하게 고유한 순서를 설정할 수 있습니다.

◆키워드 크기의 애니메이션: interpolate-size 와 calc-size() 웹 개발의 오랜 과제 중 하나는 "키워드 값 auto 와 사이의 애니메이션이 불가능하다"는 것이었습니다. Interop 2027 의 제안에 있는 interpolate-size 프로퍼티는 이 문제를 해결합니다.

html {
  interpolate-size: allow-keywords;
}이를 통해 예를 들어 "height: 0" 에서 "height: auto" 로의 애니메이션이 가능해집니다.

또한 관련 있는 calc-size() 도 동시에 제안되었습니다.

아코디언 UI 등에 활용될 것으로 생각되며, Chrome 에서 이미 구현되었습니다.

◆Gap 장식 CSS Grid 레이아웃에서 그리드 셀 사이의 경계선 (그리드라인) 을 직접 추가할 수 있는 기능입니다.

rule 속성으로 경계선의 너비, 색상, 스타일을 지정할 수 있으며, row-rule 와 column-rule 속성을 사용하여 행 또는 열에만 적용할 수도 있습니다.

◆스크롤 상태 컨테이너 쿼리 "position: sticky"를 지정된 요소가 고정되어 있는지, 또는 스크롤 컨테이너가 상단/하단에 스크롤되어 있는지 감지하고 이에 맞춰 스타일링을 가능하게 합니다.

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .header-content {
    background: var(--gray-300);
    border-bottom:
      1px solid var(--gray-500);
  }
}
위 예시에서는 스티키 헤더가 상단에 고정되면 배경색과 경계선 색상이 변경됩니다.

◆요약Interop 프로젝트는 웹 호환성 향상에 크게 기여했으며, 앞으로도 더욱 발전할 것으로 예상됩니다.

이번에 언급된 기능들은 이미 일부에서 사용 가능하며, 향후에는 광범위하게 지원될 것으로 보입니다.

단, 기존 CSS 는 타겟 요소가 어커 (anchor) 의 위에 있는지 아래인지, 기본 위치를 사용하는지, 아니면 폴백 (fallback) 위치를 사용하는지 여부를 알 수 있는 방법이 없었습니다. 이것이 문제가 되는 이유는 툴팁을 구현할 때 일반적으로 어커 방향으로 블레이드 부분을 추가하고 싶기 때문입니다. Anchor Positioning API 의 '레벨 2'에는 타겟 요소가 폴백 위치를 사용하는지 여부를 확인할 수 있는 새로운 유형의 컨테이너 쿼리가 포함되어 있습니다. 추가된 컨테이너 쿼리의 자세한 내용은 코모어 (Commo) 의 다른 블로그 기사에서 다루고 있습니다. ◆CSS inherit() 함수 CSS 의 inherit 키워드를 사용하면 일반적으로 상속되지 않는 속성이라도 부모 요소에서 값을 전달할 수 있습니다. 유용한 inherit 키워드이지만, 특정 경우에는 제대로 작동하지 않을 수 있습니다. 예를 들어, border-radius 의 반지름을 그대로 자식 요소에 상속시키면 외관이 이상해집니다. header-content { background: var(--gray-300); border-bottom: 1px solid var(--gray-500); } 위의 예에서는 스티키 헤더가 상단에 고정되면 배경색과 테두리 색이 변합니다. ◆요약 Interop 프로젝트는 웹 호환성 향상에 크게 기여했으며, 앞으로도 더욱 발전할 것으로 예상됩니다. 이번 기사에서 언급한 기능들은 이미 일부에서 사용 가능하며, 향후에는 광범위하게 지원될 것으로 생각됩니다. 대규모 언어 모델 (LLM) 의 활용이 진전되는 현대だからこそ, 인간이 이러한 최신 CSS 기능을 이해하고, 과거 데이터로 학습된 LLM 에게 최신 웹 기능을 활용할 수 있도록 안내해 주는 것의 중요성은 오히려 높아지고 있다고 코모어氏は 지적하고 있습니다.

반응형 디자인의 부작용으로 인해 탭 오더는 항상 DOM 순서에만 기반하며 시각적 순서에 기반하지 않습니다.

따라서 요소 간 이동에 보조 기술을 사용하는 경우, 화면 크기에 따라 레이아웃이 크게 변하더라도 탐색 순서는 항상 동일하게 유지됩니다.

Interop 2027 제안에 포함된 reading-flow 속성은 탭 오더를 여러 가지 시각적 순서 중 하나에 따르도록 지정함으로써 이 문제의 해결책을 제공합니다.

grid {
  display: grid;
  reading-flow: grid-rows;
}reading-flow 에 지정 가능한 값은 Grid 와 Flexbox 모두 준비되어 있지만, 더 세밀한 제어가 필요한 경우 reading-order 속성을 사용하여 HTML 의 tabIndex 와 유사하게 고유한 순서를 설정할 수 있습니다.

◆키워드 크기 애니메이션: interpolate-size 와 calc-size() 웹 개발의 오랜 과제 중 하나는 "auto 키워드 값 사이의 애니메이션이 불가능하다"는 것이었습니다. Interop 2027 제안에 있는 interpolate-size 속성은 이 문제를 해결합니다.

html {
  interpolate-size: allow-keywords;
}이를 통해 예를 들어 "height: 0" 에서 "height: auto" 로의 애니메이션이 가능해집니다.

또한 관련 calc-size() 도 함께 제안되었습니다.

이것은 아코디언 UI 등에 활용될 것으로 생각되며, Chrome 에서 이미 구현되었습니다.

◆Gap CSS Grid 레이아웃에서 그리드 셀 사이의 경계선 (라인) 을 직접 추가할 수 있는 기능입니다.

rule 속성으로 경계선의 너비, 색상, 스타일을 지정할 수 있으며, row-rule 과 column-rule 속성을 사용하여 행 또는 열에만 적용할 수도 있습니다.

◆스크롤 상태 컨테이너 쿼리 "position: sticky" 를 지정된 요소가 고정되어 있는지, 또는 스크롤 컨테이너가 상단/하단에 스크롤되어 있는지 감지하고, 그에 맞는 스타일링을 가능하게 합니다.

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .

`reading-flow` 에 지정 가능한 값은 `Grid` 와 `Flexbox` 두 가지 모두 지원하지만, 더 세밀한 제어가 필요한 경우 `reading-order` 속성을 사용하여 HTML 의 `tabIndex` 와 유사하게 고유한 순서를 설정할 수 있습니다.

◆ 키워드 크기의 애니메이션: `interpolate-size` 와 `calc-size()` 웹 개발의 오랜 과제 중 하나는 "키워드 값 `auto` 와 사이의 애니메이션이 불가능하다"는 것이었습니다. `Interop 2027` 제안에 포함된 `interpolate-size` 속성은 이 문제를 해결합니다.

```css
html {
  interpolate-size: allow-keywords;
}
```이를 통해 예를 들어 "height: 0" 에서 "height: auto" 로의 애니메이션이 가능해집니다.

또한 관련 있는 `calc-size()` 도 동시에 제안되었습니다.

아코디언 UI 등에 활용될 것으로 예상되며, Chrome 에서 이미 구현되었습니다.

◆ Gap 장식 CSS Grid 레이아웃에서 그리드 셀 사이의 경계선 (선) 을 직접 추가할 수 있는 기능입니다.

`rule` 속성으로 경계선의 너비, 색상, 스타일을 지정할 수 있으며, `row-rule` 과 `column-rule` 속성을 사용하여 행 또는 열에만 적용할 수도 있습니다.

◆'scroll-state' 컨테이너 쿼리 'position: sticky' 를 사용하여 지정된 요소가 고정되었는지, 또는 스크롤 컨테이너가 상단/하단에 스크롤되었는지 감지하고 이에 맞는 스타일링을 가능하게 합니다.

```css
header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .header-content {
    background: var(--gray-300);
    border-bottom: 1px solid var(--gray-500);
  }
}
```위 예시에서는 스티키 헤더가 상단에 고정되면 배경색과 테두리 색이 변경됩니다.

◆요약Interop 프로젝트는 웹 호환성 향상에 크게 기여했으며, 앞으로도 더욱 발전할 것으로 예상됩니다.

제시된 기능들은 이미 일부에서 사용 가능하며, 향후 널리 지원될 것으로 보입니다.

대규모 언어 모델 (LLM) 의 활용이 확대되는 현대 사회에서, 인간이 이러한 최신 CSS 기능을 이해하고, 과거 데이터로 학습된 LLM 에 최신 웹 기능을 활용할 수 있도록 안내하는 것의 중요성은 오히려 더 높아지고 있습니다. 코모어 (Koomo) 는 이렇게 지적했습니다.

◆reading-flow 와 reading-orderGrid 를 기반으로 한 레이아웃의 경우 화면 크기에 따라 시각적 레이아웃과 DOM 순서가 일치하지 않는 경우가 종종 발생합니다.

header-content {
    background: var(--gray-300);
    border-bottom:
      1px solid var(--gray-500);
  }
}위 예시에서는 스틱키 헤더가 상단에 고정될 때 배경색과 경계선 색이 변경됩니다.

◆요약Interop 프로젝트는 웹의 상호 운용성을 크게 향상시켰으며, 앞으로도 더욱 발전할 것으로 예상됩니다.

이번에 언급된 기능들은 이미 일부에서 사용 가능하며, 향후 널리 지원될 것으로 보입니다.

대규모 언어 모델 (LLM) 의 활용이 진전되는 현대 사회에서, 인간이 이러한 최신 CSS 기능을 이해하고, 과거 데이터로 학습된 LLM 에 최신 웹 기능을 활용할 수 있도록 안내하는 것의 중요성은 오히려 더 높아지고 있습니다. 코모어는 지적하고 있습니다.

Google 우선 소스 설정 Clipboard 기사 제목과 URL 복사 X Facebook Bluesky Discord Threads

이를 통해 예를 들어 'height: 0'에서 'height: auto'로의 애니메이션이 가능해지며, 관련 calc-size()도 동시에 제안되었습니다. 이는 아코디언 UI 등에 활용될 것으로 예상되며, Chrome에서는 이미 구현되어 있습니다. ◆Gap CSS Grid 레이아웃에서는 그리드 셀 사이의 경계선 (라인) 을 직접 추가할 수 있는 기능입니다.

rule 속성으로 경계선의 너비, 색상, 스타일을 지정할 수 있으며, row-rule 와 column-rule 속성을 사용하여 행 또는 열에만 적용할 수도 있습니다. ◆스크롤 상태 컨테이너 쿼리 'position: sticky'가 지정된 요소가 고정되어 있는지, 또는 스크롤 컨테이너가 상단/하단에 스크롤되어 있는지 감지하고 이에 맞춰 스타일링을 가능하게 합니다. header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .header-content {
    background: var(--gray-300);
    border-bottom:
      1px solid var(--gray-500);
  }
}위 예시에서는 스티키 헤더가 상단에 고정되면 배경색과 경계선 색상이 변경됩니다. ◆요약Interop 프로젝트는 웹 호환성 향상에 크게 기여했으며, 앞으로도 더욱 발전할 것으로 예상됩니다. 이번 기사에서 언급된 기능의 대부분은 이미 일부에서 사용 가능하며, 향후 널리 지원될 것으로 생각됩니다. 대규모 언어 모델 (LLM) 의 활용이 빠르게 진행되는 현대だからこそ, 인간이 이러한 최신 CSS 기능을 이해하고, 오래된 데이터로 학습해 온 LLM 에게 최신 웹 기능을 활용할 수 있도록 안내해 주는 것의 중요성은 오히려 높아지고 있다고 코모어氏 지적했습니다. Google 우선 소스 설정 Clipboard 기사 제목과 URL 을 복사 X Facebook Bluesky Discord Threads

위 예시에서는 스티커 헤더가 상단에 고정되면 배경 및 경계선의 색상이 변경됩니다. ◆요약 Interop 프로젝트는 웹 호환성 향상에 크게 기여했으며, 앞으로도 더욱 발전할 것으로 예상됩니다. 이번 기사에서 언급된 기능의 대부분은 이미 일부에서 사용 가능하며, 향후 널리 지원될 것으로 보입니다. 대규모 언어 모델 (LLM) 의 활용이 빠르게 확산되는 현대 사회에서, 인간이 이러한 최신 CSS 기능을 이해하고, 과거 데이터로 학습된 LLM 에 최신 웹 기능을 활용할 수 있도록 안내해 주는 것의 중요성은 오히려 더 높아지고 있습니다. 코모어氏は 지적하고 있습니다.

[원문 보기](https://gigazine.net/news/20261023-future-of-css/) | 출처: Gigazine