CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 29-2026bolt1 CRITICAL
article
CSS random()으로 색종이 뿌리기
TAG: CSS 기능
Schalk Neethling는 아직 실험적인 random() 함수를 사용해 JavaScript 없이 50개 요소로 이루어진 색종이 필드를 구현합니다. Safari 26.2+와 Chrome 148+(enable-experimental-web-platform-features 플래그 필요)에서 사용 가능하며, 2026년 7월 13일 기준 Firefox는 미지원입니다. 핵심 개념은 랜덤 캐시 네임으로, 선택적 <dashed-ident>·요소·문서로 구성된 튜플입니다. 이 덕분에 값은 페인트마다 굴리는 주사위가 아닌 결정론적 조회가 되며, 페이지 리로드 시에만 색종이가 재배치되고 스타일 재계산 중에는 위치가 유지되는 이유를 설명합니다. 미등록 커스텀 속성은 random() 텍스트를 저장하고 var() 치환 지점마다 평가하므로, 속성이 두 번 읽히면 명시적 이름 없이는 서로 다른 값이 생성됩니다. 이식 가능한 폴백 패턴은 기본값과 :nth-child 규칙을 @layer fallback에 넣어 레이어 우선순위에서 비레이어 @supports 블록이 항상 이기도록 합니다. Safari는 @property로 등록된 커스텀 속성 내부의 random()을 무시하며, 이는 Chromium과의 차이점으로 저자가 실시간으로 문서화합니다.
What's !important #15: 경계 인식 CSS, 시간 기반 CSS, 전체 너비 CSS 외 | CSS-Tricks
TAG: 생태계
CSS-Tricks 15호는 2주간의 풍성한 내용을 정리합니다. Preethi Sam의 view() 기반 경계 인식 CSS는 JavaScript 없이 스크롤 범위 효과를 만들고, Sophie Koonin의 시간 기반 디자인은 Temporal API와 color-mix()를 결합해 macOS 스타일 동적 테마를 구현합니다. David Bushell의 전체 너비 수정은 컨테이너 쿼리 단위를 사용해 오버플로 없이 중첩 래퍼를 탈출합니다. Chrome 150은 Safari와 Firefox에 아직 없는 기능들을 출시했습니다. flex-wrap: balance, text-fit, named-feature(), focusgroup, 애니메이션 가능한 zoom이 포함됩니다. AccentColor와 AccentColorText는 Chrome 150에서 Baseline을 달성했고, background-clip: border-area와 polygon()의 모서리 둥글기는 Chrome에 적용됐지만 Firefox는 미지원입니다. Manuel Matuzović는 그리드 레인 레이아웃(구 매소너리)이 아직 접근 가능하지 않다고 지적했으며, reading-flow 수정이 제안됐지만 대규모 테스트는 아직입니다.
Ahmad Shadeed는 각 라운드를 별도의 형제 요소로 인위적으로 분리한 FIFA 월드컵 토너먼트 대진표 UI를 분석하고, grid-template-columns와 grid-template-rows 양 축에 CSS subgrid를 사용해 의미론적으로 중첩된 HTML로 재구현합니다. 각 .round는 grid-column: 1 / -1과 grid-row: 1 / -1로 전체 부모 그리드에 걸친 뒤, display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid로 동일한 트랙을 재노출합니다. 이를 통해 .start와 .end 자식 요소가 각각 grid-column: 1과 grid-column: -2에 스스로 배치됩니다. 경기 쌍의 수직 정렬은 각 절반 열에 display: flex; flex-direction: column과 각 경기 컨테이너에 flex: 1을 적용해 공간을 균등하게 분배함으로써 라운드 간 연결선이 중앙에 맞도록 합니다. 반응형 동작은 grid-template-columns: repeat(4, 1fr)로 좁은 화면에서 라운드를 단일 열로 축소합니다. 이 글은 레이아웃에만 집중하며, 애니메이션과 호버 효과는 명시적으로 다루지 않습니다.
Trionn의 아키텍처: GSAP, Three.js, Lenis, Web Audio 조율하기 | Codrops
TAG: 크리에이티브 코딩
Codrops의 이 케이스 스터디는 Trionn 스튜디오 팀이 4개월에 걸쳐 애니메이션, WebGL, 오디오를 단일 통합 시스템으로 구현한 수상 경력(FWA, GSAP, CSS Design Awards) 포트폴리오 사이트의 아키텍처를 공개합니다. GSAP + @gsap/react는 ScrollTrigger로 페이지 전환과 스크롤 기반 시퀀스를 구동합니다. 하나의 정규화된 scrollProgressRef(0–1)가 371개 WebP 프레임, 글리프 파티클 폭발, 서비스 카드 곡선 경로 애니메이션, 색상 팔레트 전환을 충돌 없이 모두 조율합니다. Three.js는 공유 렌더 루프를 직접 제어하기 위해 React Three Fiber 없이 사용했으며, 호버 감지는 심볼의 실제 3D 지오메트리에 대한 레이캐스팅으로 이루어지고, 카드의 둥근 모서리는 투명 PNG 대신 부호 거리 함수(SDF) 프래그먼트 셰이더로 생성됩니다. 371개 WebP 프레임은 requestIdleCallback으로 20개씩 배치 로드하고 img.decode()로 사전 처리하며, 갤러리 WebGL 장면은 뷰에 들어오기 전에 명시적으로 웜업 — 셰이더 컴파일, 텍스처 업로드 — 합니다. 푸터의 플럭 가능한 기타 줄 워드마크와 히어로 호버 비프음을 포함한 모든 사운드 효과는 사전 녹음 파일 대신 오실레이터, 비브라토 LFO, 피드백 딜레이로 Web Audio API를 통해 런타임에 합성됩니다.
주목받지 못한 기능들: Highlight API, text-indent, font-family: math | utilitybend
TAG: CSS 기능
Brecht De Ruyte는 화려한 기능들에 가려 주목받지 못한 세 가지 CSS Baseline 기능을 조명합니다. CSS Custom Highlight API는 Chrome 105, Safari 17.2, Firefox 111부터 사용 가능하며, 기존의 DOM 분리 방식을 CSS.highlights.set()과 ::highlight() 의사 요소로 대체합니다. 브라우저는 페인트 단계에 개입해 글리프 바로 아래에 색칠된 직사각형을 직접 그리며, 레이아웃 단계를 완전히 건너뛰고 리플로우를 제거합니다. text-indent 키워드 hanging과 each-line은 Chrome 146과 함께 2026년 3월에 Baseline을 완성했으며(Safari와 Firefox는 더 일찍 구현): hanging은 참고문헌 스타일 들여쓰기를 네이티브로 구현하고, each-line은 모든 <br> 줄바꿈 이후에 들여쓰기를 적용합니다. font-family: math와 네이티브 MathML 태그(<math>, <mfrac>, <msub>)는 브라우저가 STIX나 Latin Modern Math 같은 수학 레이아웃 폰트를 불러오도록 지시하며, 외부 JavaScript 라이브러리 없이 스크린 리더로 접근 가능한 수식 출력을 가능하게 합니다. 두 기능 모두 Chrome 109와 함께 2023년에 Baseline을 달성했습니다.
Kevin Powell은 CSS Day에서 Eric Meyer의 발표로 발견한 offset-path: border-box 기법을 사용해 버튼에 위트 있는 반짝임 장식을 구현합니다. SVG 경로 없이도 요소 자신의 테두리를 따라 객체를 애니메이션할 수 있다는 사실을 보여줍니다. 절대 위치 지정된 <span>에 offset-path: border-box를 설정하면 테두리에 배치되고, offset-distance(예: 80%)를 애니메이션하면 border-radius를 따라 완전히 이동합니다. offset-rotate: 0deg는 이동 중에도 장식이 똑바로 유지되도록 합니다. 별 모양 장식은 rotate로 레이어된 의사 요소로 만들고, filter: blur(2px)로 흐리게 하며, @keyframes opacity 변화(0% → 20%–80% 불투명 → 100% 투명)로 생애주기를 부여합니다. --deco-timing, --deco-color, --end-offset, --speed-variation 같은 커스텀 속성이 제어를 중앙화해 다섯 개 이상의 장식이 스케일, 색상(oklch() 상대 색상), 이동 거리, 속도를 달리할 수 있게 합니다. 애니메이션과 트랜지션은 :hover / :focus-visible 범위로 제한해야 각 상호작용 시 offset-distance가 항상 시작점으로 재설정됩니다.
강사 Pat Verra(freeCodeCamp)는 p5.js v2의 WebGL 모드를 사용한 4부작 초보자 GLSL 시리즈를 진행하며, GPU에서 완전히 렌더링되는 애니메이션 프랙탈 하트로 마무리합니다. 핵심 인사이트는 프래그먼트 셰이더가 프레임당 픽셀마다 한 번씩 실행된다는 것입니다. 800×600 캔버스에서는 48만 번, 1080p에서는 200만 번 이상 실행되며, 각 호출은 자신의 gl_FragCoord 위치와 uTime, uResolution 같은 CPU 제공 uniform 값만 알 수 있는 고립된 환경에서 동작합니다. 강좌에서는 fract()로 도메인 반복(루프 없이 4×4 그리드 타일링), 모양 감지를 위한 부호 거리 함수(Inigo Quilez의 2D SDF 라이브러리에서 원, 하트, 둥근 박스), 역거리 발광 공식(0.05 / d로 빛 감쇠 모델링), 풍부한 다색 그라데이션을 위한 코사인 팔레트 색상 함수, 그리고 프랙탈 깊이를 만드는 for 루프를 통한 UV 재매핑 누적을 가르칩니다. 고DPI 화면에서 gl_FragCoord와 캔버스 크기의 1:1 비율을 유지하려면 pixelDensity(1) 호출이 필수이며, 생략 시 지오메트리가 어긋납니다.
Schalk Neethling는 아직 실험적인 random() 함수를 사용해 JavaScript 없이 50개 요소로 이루어진 색종이 필드를 구현합니다. Safari 26.2+와 Chrome 148+(enable-experimental-web-platform-features 플래그 필요)에서 사용 가능하며, 2026년 7월 13일 기준 Firefox는 미지원입니다. 핵심 개념은 랜덤 캐시 네임으로, 선택적 <dashed-ident>·요소·문서로 구성된 튜플입니다. 이 덕분에 값은 페인트마다 굴리는 주사위가 아닌 결정론적 조회가 되며, 페이지 리로드 시에만 색종이가 재배치되고 스타일 재계산 중에는 위치가 유지되는 이유를 설명합니다. 미등록 커스텀 속성은 random() 텍스트를 저장하고 var() 치환 지점마다 평가하므로, 속성이 두 번 읽히면 명시적 이름 없이는 서로 다른 값이 생성됩니다. 이식 가능한 폴백 패턴은 기본값과 :nth-child 규칙을 @layer fallback에 넣어 레이어 우선순위에서 비레이어 @supports 블록이 항상 이기도록 합니다. Safari는 @property로 등록된 커스텀 속성 내부의 random()을 무시하며, 이는 Chromium과의 차이점으로 저자가 실시간으로 문서화합니다.
Kevin Powell은 CSS Day에서 Eric Meyer의 발표로 발견한 offset-path: border-box 기법을 사용해 버튼에 위트 있는 반짝임 장식을 구현합니다. SVG 경로 없이도 요소 자신의 테두리를 따라 객체를 애니메이션할 수 있다는 사실을 보여줍니다. 절대 위치 지정된 <span>에 offset-path: border-box를 설정하면 테두리에 배치되고, offset-distance(예: 80%)를 애니메이션하면 border-radius를 따라 완전히 이동합니다. offset-rotate: 0deg는 이동 중에도 장식이 똑바로 유지되도록 합니다. 별 모양 장식은 rotate로 레이어된 의사 요소로 만들고, filter: blur(2px)로 흐리게 하며, @keyframes opacity 변화(0% → 20%–80% 불투명 → 100% 투명)로 생애주기를 부여합니다. --deco-timing, --deco-color, --end-offset, --speed-variation 같은 커스텀 속성이 제어를 중앙화해 다섯 개 이상의 장식이 스케일, 색상(oklch() 상대 색상), 이동 거리, 속도를 달리할 수 있게 합니다. 애니메이션과 트랜지션은 :hover / :focus-visible 범위로 제한해야 각 상호작용 시 offset-distance가 항상 시작점으로 재설정됩니다.
강사 Pat Verra(freeCodeCamp)는 p5.js v2의 WebGL 모드를 사용한 4부작 초보자 GLSL 시리즈를 진행하며, GPU에서 완전히 렌더링되는 애니메이션 프랙탈 하트로 마무리합니다. 핵심 인사이트는 프래그먼트 셰이더가 프레임당 픽셀마다 한 번씩 실행된다는 것입니다. 800×600 캔버스에서는 48만 번, 1080p에서는 200만 번 이상 실행되며, 각 호출은 자신의 gl_FragCoord 위치와 uTime, uResolution 같은 CPU 제공 uniform 값만 알 수 있는 고립된 환경에서 동작합니다. 강좌에서는 fract()로 도메인 반복(루프 없이 4×4 그리드 타일링), 모양 감지를 위한 부호 거리 함수(Inigo Quilez의 2D SDF 라이브러리에서 원, 하트, 둥근 박스), 역거리 발광 공식(0.05 / d로 빛 감쇠 모델링), 풍부한 다색 그라데이션을 위한 코사인 팔레트 색상 함수, 그리고 프랙탈 깊이를 만드는 for 루프를 통한 UV 재매핑 누적을 가르칩니다. 고DPI 화면에서 gl_FragCoord와 캔버스 크기의 1:1 비율을 유지하려면 pixelDensity(1) 호출이 필수이며, 생략 시 지오메트리가 어긋납니다.
What's !important #15: 경계 인식 CSS, 시간 기반 CSS, 전체 너비 CSS 외 | CSS-Tricks
CSS-Tricks 15호는 2주간의 풍성한 내용을 정리합니다. Preethi Sam의 view() 기반 경계 인식 CSS는 JavaScript 없이 스크롤 범위 효과를 만들고, Sophie Koonin의 시간 기반 디자인은 Temporal API와 color-mix()를 결합해 macOS 스타일 동적 테마를 구현합니다. David Bushell의 전체 너비 수정은 컨테이너 쿼리 단위를 사용해 오버플로 없이 중첩 래퍼를 탈출합니다. Chrome 150은 Safari와 Firefox에 아직 없는 기능들을 출시했습니다. flex-wrap: balance, text-fit, named-feature(), focusgroup, 애니메이션 가능한 zoom이 포함됩니다. AccentColor와 AccentColorText는 Chrome 150에서 Baseline을 달성했고, background-clip: border-area와 polygon()의 모서리 둥글기는 Chrome에 적용됐지만 Firefox는 미지원입니다. Manuel Matuzović는 그리드 레인 레이아웃(구 매소너리)이 아직 접근 가능하지 않다고 지적했으며, reading-flow 수정이 제안됐지만 대규모 테스트는 아직입니다.
Ahmad Shadeed는 각 라운드를 별도의 형제 요소로 인위적으로 분리한 FIFA 월드컵 토너먼트 대진표 UI를 분석하고, grid-template-columns와 grid-template-rows 양 축에 CSS subgrid를 사용해 의미론적으로 중첩된 HTML로 재구현합니다. 각 .round는 grid-column: 1 / -1과 grid-row: 1 / -1로 전체 부모 그리드에 걸친 뒤, display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid로 동일한 트랙을 재노출합니다. 이를 통해 .start와 .end 자식 요소가 각각 grid-column: 1과 grid-column: -2에 스스로 배치됩니다. 경기 쌍의 수직 정렬은 각 절반 열에 display: flex; flex-direction: column과 각 경기 컨테이너에 flex: 1을 적용해 공간을 균등하게 분배함으로써 라운드 간 연결선이 중앙에 맞도록 합니다. 반응형 동작은 grid-template-columns: repeat(4, 1fr)로 좁은 화면에서 라운드를 단일 열로 축소합니다. 이 글은 레이아웃에만 집중하며, 애니메이션과 호버 효과는 명시적으로 다루지 않습니다.
Trionn의 아키텍처: GSAP, Three.js, Lenis, Web Audio 조율하기 | Codrops
Codrops의 이 케이스 스터디는 Trionn 스튜디오 팀이 4개월에 걸쳐 애니메이션, WebGL, 오디오를 단일 통합 시스템으로 구현한 수상 경력(FWA, GSAP, CSS Design Awards) 포트폴리오 사이트의 아키텍처를 공개합니다. GSAP + @gsap/react는 ScrollTrigger로 페이지 전환과 스크롤 기반 시퀀스를 구동합니다. 하나의 정규화된 scrollProgressRef(0–1)가 371개 WebP 프레임, 글리프 파티클 폭발, 서비스 카드 곡선 경로 애니메이션, 색상 팔레트 전환을 충돌 없이 모두 조율합니다. Three.js는 공유 렌더 루프를 직접 제어하기 위해 React Three Fiber 없이 사용했으며, 호버 감지는 심볼의 실제 3D 지오메트리에 대한 레이캐스팅으로 이루어지고, 카드의 둥근 모서리는 투명 PNG 대신 부호 거리 함수(SDF) 프래그먼트 셰이더로 생성됩니다. 371개 WebP 프레임은 requestIdleCallback으로 20개씩 배치 로드하고 img.decode()로 사전 처리하며, 갤러리 WebGL 장면은 뷰에 들어오기 전에 명시적으로 웜업 — 셰이더 컴파일, 텍스처 업로드 — 합니다. 푸터의 플럭 가능한 기타 줄 워드마크와 히어로 호버 비프음을 포함한 모든 사운드 효과는 사전 녹음 파일 대신 오실레이터, 비브라토 LFO, 피드백 딜레이로 Web Audio API를 통해 런타임에 합성됩니다.
주목받지 못한 기능들: Highlight API, text-indent, font-family: math | utilitybend
Brecht De Ruyte는 화려한 기능들에 가려 주목받지 못한 세 가지 CSS Baseline 기능을 조명합니다. CSS Custom Highlight API는 Chrome 105, Safari 17.2, Firefox 111부터 사용 가능하며, 기존의 DOM 분리 방식을 CSS.highlights.set()과 ::highlight() 의사 요소로 대체합니다. 브라우저는 페인트 단계에 개입해 글리프 바로 아래에 색칠된 직사각형을 직접 그리며, 레이아웃 단계를 완전히 건너뛰고 리플로우를 제거합니다. text-indent 키워드 hanging과 each-line은 Chrome 146과 함께 2026년 3월에 Baseline을 완성했으며(Safari와 Firefox는 더 일찍 구현): hanging은 참고문헌 스타일 들여쓰기를 네이티브로 구현하고, each-line은 모든 <br> 줄바꿈 이후에 들여쓰기를 적용합니다. font-family: math와 네이티브 MathML 태그(<math>, <mfrac>, <msub>)는 브라우저가 STIX나 Latin Modern Math 같은 수학 레이아웃 폰트를 불러오도록 지시하며, 외부 JavaScript 라이브러리 없이 스크린 리더로 접근 가능한 수식 출력을 가능하게 합니다. 두 기능 모두 Chrome 109와 함께 2023년에 Baseline을 달성했습니다.
이번 주 CSS & 스타일링 이슈의 핵심은 새로 등장한 random() 함수입니다. Schalk Neethling의 28분짜리 심층 분석은 랜덤 캐시 네임 모델, 점진적 향상의 함정, 그리고 폴백 아키텍처에서 @supports not보다 @layer가 더 나은 이유를 다루는 결정판 가이드입니다. Safari 26.2와 Chrome 148(플래그)에서 지원되며, 2026년 7월 현재 Firefox는 지원하지 않습니다.
Ahmad Shadeed는 양 축에 subgrid를 적용해 FIFA 토너먼트 대진표 문제를 해결하는 방법을 보여줍니다. DOM 구조 변경 없이 자식 요소가 부모 그리드 트랙에 참여하고, align-items: center와 flex: 1로 경기 연결선을 픽셀 단위로 정렬합니다. Kevin Powell의 동영상은 offset-path: border-box의 가능성을 새롭게 발견하게 해줍니다. SVG 경로 없이 offset-distance만 애니메이션으로 조작해 버튼에 위트 있는 반짝임 효과를 만들 수 있습니다.
Brecht De Ruyte는 조용히 Baseline에 안착한 세 가지 기능을 소개합니다. DOM 변형 없이 텍스트를 강조하는 CSS Custom Highlight API, 2026년 3월에 Baseline을 달성한 text-indent: hanging / each-line, 그리고 접근 가능한 MathML을 위한 font-family: math입니다. CSS-Tricks 뉴스레터는 Chrome 150에서 출시된 flex-wrap: balance, text-fit, named-feature()를 정리했으며, 세 기능 모두 Safari와 Firefox에서는 아직 지원되지 않습니다.
크리에이티브 코딩 분야에서는 Trionn 케이스 스터디가 4개월에 걸친 야심 찬 아키텍처를 공개합니다. GSAP + ScrollTrigger로 371프레임 WebP 스크러빙을 구동하고, Three.js 레이캐스팅으로 움직이는 지오메트리의 호버를 감지하며, 프래그먼트 셰이더로 절차적 안개와 둥근 모서리를 구현하고, Web Audio API로 모든 사운드를 런타임에 합성합니다. freeCodeCamp 셰이더 강좌는 GLSL 버텍스/프래그먼트 기초부터 도메인 반복, fract() 기반 타일링, GPU에서 완전히 구현한 프랙탈 하트까지 초보자를 안내합니다.
Key Takeaways
CSS random()은 Safari 26.2와 Chrome 148(플래그)에서 출시됐지만 Firefox는 미지원입니다. 랜덤 캐시 네임 모델에 따라 값은 요소·속성·문서를 키로 하는 결정론적 조회이며, 명시적 <dashed-ident>와 폴백에 @layer를 사용하는 패턴이 이식 가능하고 스펙에 부합하는 방식입니다.
양 축에 subgrid를 적용하면 DOM을 평탄화하지 않고도 중첩 요소가 부모 그리드 트랙에 참여해 복잡한 토너먼트 대진표나 다중 열 정렬이 가능합니다. 내부 컨테이너에 flex: 1을 함께 사용하면 라운드 간 수직 정렬이 정교해집니다.
offset-path: border-box를 사용하면 요소 자신의 테두리를 따라 객체를 애니메이션할 때 SVG 경로가 필요 없습니다. offset-distance를 애니메이션으로 조작하고 offset-rotate로 방향을 제어하면 JavaScript 없이 장식적인 모션 효과를 만들 수 있습니다.
