(BUSAN.SASHIMI)
terminal
Weekly Digest // STYLING — Week 20-2026
paletteWeekly Report

Safari 26.5의 WebKit 기능 — 2026년 20주 CSS 및 스타일링

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 20-2026
브라우저 업데이트

Safari 26.5의 WebKit 기능

Safari 26.5에서 여러 CSS 개선 사항이 추가되었습니다. 새로운 :open 의사 클래스는 details, dialog, select, input 요소의 열린 상태를 일관되게 스타일링할 수 있는 통합 선택자를 제공합니다. CSS random() 함수는 명세 변경에 맞게 업데이트되어 이름 있는 캐시 키가 기본적으로 전역 범위를 가지며, 새로운 element-scoped 키워드로 요소별 동작을 복원할 수 있습니다. Anchor Positioning은 미디어 쿼리 재평가, 체인 앵커, sticky 부모 관련 5가지 버그 수정을 받았습니다. Scroll-driven animations는 안정성 관련 4가지 수정이 이루어졌으며, SVG color-interpolation 속성이 linearRGB 그라디언트를 지원하여 더 부드러운 색상 전환이 가능해졌습니다.

Safari 26.5의 WebKit 기능
Read Articlearrow_forward
Video · 애니메이션

5분 만에 CSS sibling-index()와 sibling-count() 배우기

이 5분짜리 튜토리얼은 요소의 위치와 형제 요소의 총 수를 CSS에서 직접 노출하는 새로운 함수인 CSS sibling-index()와 sibling-count()를 시연합니다. 애니메이션 스태거링에서 sibling-index()는 하드코딩된 nth-child 지연을 대체합니다. 이를 지속 시간과 곱하고 1을 빼면 HTML에 몇 개의 요소가 있든 자동으로 확장되는 0 기반 지연이 생성됩니다. 동적 색상 그라디언트를 위해 (sibling-index() - 1)을 (sibling-count() - 1)로 나누면 OKLCH 명도를 범위에 걸쳐 구동하는 0~1 진행 값을 얻을 수 있습니다. 보너스 예시로 sibling-index()와 transform 내부의 삼각법을 사용해 순수 HTML과 CSS로 만든 3D 이미지 캐러셀을 소개합니다. 현재 Firefox는 지원되지 않습니다.

AI_INFOGRAPHIC
5분 만에 CSS sibling-index()와 sibling-count() 배우기 — infographicWATCH_VIDEOarrow_forward
Video · 색상

CSS contrast-color()로 견고한 색상 시스템 구축하기

Kevin Powell은 모든 브라우저에서 baseline-newly-available이 된 CSS contrast-color() 함수를 소개합니다. 이 함수는 주어진 배경 색상에 따라 자동으로 검정 또는 흰색 텍스트를 선택합니다. 그는 내부 기본값과 외부 오버라이드를 분리하기 위해 밑줄 접두사가 붙은 private custom property 패턴을 사용하여 버튼 테마 시스템을 구축합니다. 이를 통해 단일 --button-surface 변수가 배경, 호버 상태, contrast-color() 호출을 통해 중복 선언 없이 cascading됩니다. 호버 상태에서는 sRGB에서 color-mix()와 중립 팔레트 토큰을 결합하고, 해당 토큰에 light-dark()를 사용하여 활성 color scheme에 따라 자동으로 밝거나 어두워지는 방식을 시연합니다. 주요 제한 사항: contrast-color()는 현재 흰색 또는 검정만 출력하며 임의의 색상은 지원하지 않습니다.

AI_INFOGRAPHIC
CSS contrast-color()로 견고한 색상 시스템 구축하기 — infographicWATCH_VIDEOarrow_forward
Article · CSS 조건 로직READ TIME: 12m

CSS if() 함수가 Stylesheet에 Native Conditional Logic 제공

CSS if() 함수는 CSS 2025 스냅샷에 포함되어 Chrome 137+에서 출시되었으며, 속성 값에 직접 인라인 조건부 로직을 추가합니다. 사용자 정의 속성 값에 따라 분기하는 style 쿼리, 반응형 크기를 해당 속성 옆에 배치하는 인라인 media 쿼리, @supports 블록을 대체하는 feature 쿼리 등 세 가지 조건 유형을 지원합니다. 구문은 조건-값 쌍을 세미콜론으로 구분하며, 지원 브라우저에서 유효하지 않은 선언을 피하기 위해 else 절이 필요합니다. if() 호출을 중첩하면 다중 축 컴포넌트 변형이 가능하고, calc()와 clamp()와 결합하면 정교한 fluid sizing을 구현할 수 있습니다. Firefox와 Safari의 지원은 아직 개발 중입니다.

READ_FULL_LOGarrow_forward
Article · 타이포그래피READ TIME: 6m

CSS round()로 더 나은 Fluid Sizing

clamp()과 container query 단위를 사용한 fluid sizing은 19.7px나 143.2px 같은 소수점 값을 생성하는 경우가 많습니다. Ahmad Shadeed는 CSS round() 함수가 모드(up, down, nearest, to-zero), 값, 간격을 인수로 받아 계산된 값을 예측 가능한 단계로 스냅하는 방법을 설명합니다. 실용적인 예시로는 font-size를 가장 가까운 4px로 반올림하는 카드 컴포넌트, 5가지 fluid 크기를 일관된 증분으로 정렬하는 타입 스케일, 그리고 라인 스냅 에디토리얼 레이아웃이 포함됩니다. CSS Grid 내부의 고유 높이에는 round()와 calc-size(auto, ...)를 결합하여 반올림 전에 실제 요소 높이를 해결합니다. 이 방법은 필수 의존성이 아닌 점진적 향상으로 적용할 것을 권장합니다.

READ_FULL_LOGarrow_forward
Article · HTML 시맨틱READ TIME: 18m

당신은 HTML List를 모른다

ol과 ul을 넘어, HTML에는 5가지 고유한 목록 유형과 올바른 선택을 위한 결정 트리가 있습니다. 제어 목록은 고정 선택에 select와 option 및 optgroup을, 범위나 주차 입력을 포함한 모든 입력 유형의 제안에는 input과 datalist를 사용합니다. 순서 있는 목록은 reversed와 start 속성을 통해 순서 의존적 의미를 인코딩합니다. Description list(dl, dt, dd) — HTML5의 발전된 definition list — 는 키-값 메타데이터와 JSON 디버깅에 활용됩니다. menu 요소는 툴바 버튼과 같은 인터랙티브 컨트롤을 의미론적으로 묶어 ul에 role=menu를 추가할 필요를 없앱니다. 또한 dl을 2열 flex 레이아웃으로 표시하는 CSS 패턴과 타입이 지정된 attr() 함수 및 writing-mode를 사용해 range input에 datalist 눈금을 배치하는 방법도 소개합니다.

READ_FULL_LOGarrow_forward
Article · 유동 타이포그래피READ TIME: 13m

CSS 때문에 대수학을 다시 배웠다 — 그리고 마음에 들었다

그리드 영역 내 img의 stray margin-block-end로 인한 캐러셀 레이아웃 버그가 container query를 활용한 fluid typography 심층 탐구로 이어졌습니다. clamp()의 중간 인수는 y = mx + b 기울기-절편 방정식이며, cqi와 같은 CSS 길이 단위는 계수와 컨텍스트 변수를 하나의 토큰으로 인코딩합니다. MIN, MAX, 두 컨테이너 너비 W1과 W2가 결정되면 기울기와 절편은 파생 값이 됩니다. 실제 픽셀 값을 사용한 예시, 4가지 변수를 매개변수화하는 CSS custom property 코드 스니펫을 제공합니다. 또한 긴 복합어를 위한 hyphens: auto, fluid padding과 font-size의 결합, 그리고 cqi가 측정하는 content box와 DevTools에 표시되는 outer box의 중요한 차이점도 다룹니다.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

이번 주에는 브라우저에 새로운 CSS 기능이 대거 추가됐습니다. Safari 26.5는 details, dialog, select, input 요소의 열린 상태를 통합 스타일링하는 :open 의사 클래스를 출시하고, CSS random()에서 이름 있는 캐시 키가 기본으로 전역 범위를 갖도록 명세를 업데이트했으며, Anchor Positioning 5가지 버그 수정과 Scroll-driven 애니메이션 안정성 4가지 패치를 포함했습니다. CSS 2025 스냅샷에 포함돼 Chrome 137+에 출시된 CSS if() 함수는 속성 값 내부에 style 쿼리, 인라인 media 쿼리, feature 쿼리를 지원하는 인라인 조건부 로직을 추가합니다. Firefox와 Safari 지원은 개발 중입니다.

새로운 수학 및 위치 함수들이 순수 CSS로 구현 가능한 범위를 넓히고 있습니다. Ahmad Shadeed는 round()가 clamp()와 container query 단위로 생성된 fluid 사이징 값을 예측 가능한 픽셀 단계로 스냅하는 방법을 시연했습니다. 예를 들어 font-size를 가장 가까운 4px로 반올림하고, calc-size(auto, ...)와 결합해 CSS Grid의 고유 높이를 처리합니다. CSS sibling-index()와 sibling-count()는 JavaScript 없이 동적 스태거 애니메이션과 OKLCH 색상 그라디언트를 구현할 수 있도록 요소의 위치와 형제 요소 수를 CSS에 직접 노출합니다.

Kevin Powell은 모든 브라우저에서 baseline-newly-available이 된 contrast-color()로 버튼 테마 시스템을 구축하며, private custom property 패턴, color-mix(), light-dark()를 결합하는 방법을 보여줬습니다. HTML 목록 시맨틱에 대한 심층 분석은 ol, ul을 넘어 datalist를 활용한 select, reversed 순서 목록, dl 설명 목록, 인터랙티브 컨트롤 그룹을 위한 menu 요소 등 5가지 고유 목록 유형을 명확히 설명했습니다.

Key Takeaways
  • CSS if()가 Chrome 137에 style 쿼리, 인라인 media 쿼리, feature 쿼리 조건을 지원하며 출시됐습니다. 지금 바로 실험해보되, Firefox와 Safari 지원이 아직 개발 중이므로 @supports로 게이팅하세요.
  • CSS round()는 fluid 사이징의 마지막 퍼즐 조각입니다. clamp() 출력을 round(nearest, ..., 4px)로 감싸 소수점 폰트 크기와 간격 값을 제거하고, Grid의 고유 높이에는 calc-size(auto)와 결합하세요.
  • contrast-color()가 이제 크로스 브라우저 baseline입니다. private custom property 패턴, sRGB의 color-mix(), light-dark()와 함께 사용해 JavaScript 색상 로직 없이 완전 자동화된 color scheme 인식 버튼 테마를 구축할 수 있습니다.