CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 28-2026
article
Anchor Positioning 시작하기
TAG: 레이아웃
CSS Anchor Positioning API는 anchor-name과 position-anchor 속성을 사용해 툴팁이나 드롭다운 같은 플로팅 요소를 임의의 앵커 요소에 연결하며, JavaScript 기반 위치 지정 로직을 대체합니다. position-area 속성은 앵커 주변의 3x3 그리드 개념으로 타깃을 배치하고, position-try-fallbacks는 뷰포트 공간이 부족할 때 툴팁을 자동으로 반대편으로 전환합니다. Level 2 명세는 anchored container queries(container-type: anchored)를 도입하며, 2026년 7월 현재 Chromium에서만 지원되고 활성 폴백 위치에 따라 CSS로 캐럿 방향을 변경할 수 있습니다. flip-block 키워드는 크로스 브라우저 수직 전환 단축키를 제공하며 방향성 마진도 자동으로 미러링합니다. 폴백 전략으로는 Oddbird 폴리필과 @supports 기능 쿼리를 통한 점진적 저하 방식이 있습니다.
이 글은 cubic-bezier() 이징을 Figma 등의 벡터 도구에서 디자이너가 이미 사용하는 베지어 핸들 메커니즘과 연결하여 명확하게 설명합니다. cubic-bezier(x1, y1, x2, y2)의 네 숫자는 두 개의 제어 핸들을 나타내는데, x 값은 시간(0~1 범위), y 값은 진행도로 이 범위를 초과해 오버슈트나 되감기 효과를 낼 수 있습니다. CSS 키워드 프리셋 다섯 가지를 정확한 cubic-bezier 값으로 매핑하고, ease-out은 cubic-bezier(0, 0, 0.58, 1)임을 확인합니다. 입장에는 ease-out, 퇴장에는 ease-in, 화면 내 이동에는 ease-in-out을 사용하라는 명확한 규칙을 제시합니다. 단일 베지어 곡선으로 모델링할 수 없는 물리 기반 바운스에는 CSS linear()로 실제 스프링 방정식을 인코딩할 수 있습니다.
전직 인쇄 디자이너가 작성한 이 글은 JavaScript 없이 편집 타이포그래피를 웹에 구현하는 CSS 제어 기법 여섯 가지를 소개합니다. 유동적 타입 스케일은 clamp()에 rem + vw 기본값을 조합해 뷰포트에 반응하면서도 사용자 폰트 설정을 존중하도록 구성합니다. text-wrap: balance는 헤드라인의 들쭉날쭉한 라인(Chromium에서 최대 6줄 제한)을 방지하고, text-wrap: pretty는 본문 마지막 몇 줄만 재정렬해 고아 단어를 수정합니다. initial-letter는 네이티브 드롭 캡을 제공하고(Firefox 미지원, 우아하게 폴백), font-optical-sizing: auto는 렌더링 크기에 따라 opsz 가변 폰트 축을 자동으로 조정하며, hanging-punctuation: first는 시작 따옴표를 마진으로 내보내 광학적 정렬을 구현합니다(현재 Safari 전용). 여섯 가지 속성 모두에 대해 Chrome, Firefox, Safari 브라우저 지원 표가 제공됩니다.
Jakub T Jankiewicz가 작성한 이 글은 HTML 라디오 입력과 CSS :has() 가상 클래스를 결합해 JavaScript 없는 다크 모드 토글을 구현하는 방법을 보여줍니다. :root:has(#mode_dark:checked) 선택자는 부모 인식 조건으로 작동해 페이지 전체에 걸쳐 --bg 및 --fg CSS 커스텀 속성 재정의를 트리거합니다. 라디오 입력은 appearance: none, opacity: 0, pointer-events: none으로 시각적으로 숨기고, 해와 달 이모지가 담긴 레이블이 클릭 가능한 UI 역할을 합니다. @media (prefers-color-scheme: dark) 쿼리로 시스템 설정에 맞춰 기본 상태를 설정하며, 수동 라디오 선택이 이를 지속적으로 재정의합니다. Eleventy 같은 SSG 도구나 AI 크롤러 또는 저대역폭 사용자에게 JavaScript가 제공되지 않는 환경에서 특히 유용합니다.
Remy Sharp는 CSS에 와일드카드 요소 선택자가 없어 rem-* { }처럼 접두사를 공유하는 모든 커스텀 요소를 타깃으로 하는 규칙을 작성할 수 없다고 지적합니다. 현재 사용 가능한 우회책은 [class^="btn-"](시작 일치, 취약함)이나 [class*="btn"](포함 일치, 과도하게 광범위함) 같은 속성 선택자뿐이며, 두 방법 모두 요소 태그 이름에는 적용되지 않습니다. 같은 공백이 querySelectorAll에도 영향을 미쳐, 접두사로 커스텀 요소를 초기화하려면 대상 선택자 대신 전체 DOM을 스캔해야 합니다. Sharp는 Lea Verou가 2년 전 CSSWG에 이 이슈를 제기했으나 진전이 없다고 언급하며, CSS 문법상 이 용도로 * 문자가 사용 가능한지도 탐색합니다.
Blender Camera Path와 Three.js·GSAP로 Scroll-driven 3D Gallery 만들기
TAG: 3D 애니메이션
Gaspard Hedde가 작성한 이 Codrops 튜토리얼은 Blender에서 그린 베지어 곡선을 따라 카메라가 이동하는 스크롤 기반 3D 갤러리 구축 방법을 안내합니다. 곡선은 Blender의 Z-up 좌표계를 Three.js의 Y-up 시스템으로 변환하는 Python 스크립트를 통해 JSON으로 내보냅니다. Three.js에서 CatmullRomCurve3로 곡선을 재구성하고, 곡선의 로컬 법선 벡터에서 파생된 무작위 측면 및 깊이 오프셋으로 500개의 이미지 평면을 배치합니다. GSAP의 quickTo는 카메라 스무딩(power3.out, 1초)과 평면별 스케일 애니메이션 모두를 처리해 프레임당 500개의 새로운 tween 생성을 방지합니다. 근접 기반 포커스 시스템은 카메라에 가까워진 이미지를 최대 14배까지 확대하며, 3제곱 감쇠(f cubed)로 효과를 집중시킵니다.
이 Coding2GO 영상은 dialog 요소나 조건부 렌더링된 React 컴포넌트처럼 이전 CSS 상태가 없는 요소의 트랜지션에 첫 번째 프레임 시작점을 제공하는 CSS 규칙인 @starting-style을 설명합니다. @starting-style 없이는 dialog가 열릴 때 이미 open 속성 선택자와 일치하기 때문에 브라우저가 전환할 이전 상태를 가지지 못합니다. 해결책은 @starting-style 내부에 opacity: 0과 scale: 0.8을 선언해 브라우저가 해당 값을 요소의 초기 상태로 취급하도록 하는 것입니다. dialog의 경우 display와 overlay 같은 이산 속성도 allow-discrete와 함께 transition 목록에 추가해야 페이드아웃이 완료될 때까지 요소가 렌더링 상태를 유지합니다. 영상은 이 패턴을 ::backdrop 가상 요소와 React 렌더링 목록까지 확장하고, 모든 모션을 @media (prefers-reduced-motion: reduce)로 감싸야 함을 상기시키며 마무리합니다.
CSS Anchor Positioning API는 anchor-name과 position-anchor 속성을 사용해 툴팁이나 드롭다운 같은 플로팅 요소를 임의의 앵커 요소에 연결하며, JavaScript 기반 위치 지정 로직을 대체합니다. position-area 속성은 앵커 주변의 3x3 그리드 개념으로 타깃을 배치하고, position-try-fallbacks는 뷰포트 공간이 부족할 때 툴팁을 자동으로 반대편으로 전환합니다. Level 2 명세는 anchored container queries(container-type: anchored)를 도입하며, 2026년 7월 현재 Chromium에서만 지원되고 활성 폴백 위치에 따라 CSS로 캐럿 방향을 변경할 수 있습니다. flip-block 키워드는 크로스 브라우저 수직 전환 단축키를 제공하며 방향성 마진도 자동으로 미러링합니다. 폴백 전략으로는 Oddbird 폴리필과 @supports 기능 쿼리를 통한 점진적 저하 방식이 있습니다.
이 Coding2GO 영상은 dialog 요소나 조건부 렌더링된 React 컴포넌트처럼 이전 CSS 상태가 없는 요소의 트랜지션에 첫 번째 프레임 시작점을 제공하는 CSS 규칙인 @starting-style을 설명합니다. @starting-style 없이는 dialog가 열릴 때 이미 open 속성 선택자와 일치하기 때문에 브라우저가 전환할 이전 상태를 가지지 못합니다. 해결책은 @starting-style 내부에 opacity: 0과 scale: 0.8을 선언해 브라우저가 해당 값을 요소의 초기 상태로 취급하도록 하는 것입니다. dialog의 경우 display와 overlay 같은 이산 속성도 allow-discrete와 함께 transition 목록에 추가해야 페이드아웃이 완료될 때까지 요소가 렌더링 상태를 유지합니다. 영상은 이 패턴을 ::backdrop 가상 요소와 React 렌더링 목록까지 확장하고, 모든 모션을 @media (prefers-reduced-motion: reduce)로 감싸야 함을 상기시키며 마무리합니다.
이 글은 cubic-bezier() 이징을 Figma 등의 벡터 도구에서 디자이너가 이미 사용하는 베지어 핸들 메커니즘과 연결하여 명확하게 설명합니다. cubic-bezier(x1, y1, x2, y2)의 네 숫자는 두 개의 제어 핸들을 나타내는데, x 값은 시간(0~1 범위), y 값은 진행도로 이 범위를 초과해 오버슈트나 되감기 효과를 낼 수 있습니다. CSS 키워드 프리셋 다섯 가지를 정확한 cubic-bezier 값으로 매핑하고, ease-out은 cubic-bezier(0, 0, 0.58, 1)임을 확인합니다. 입장에는 ease-out, 퇴장에는 ease-in, 화면 내 이동에는 ease-in-out을 사용하라는 명확한 규칙을 제시합니다. 단일 베지어 곡선으로 모델링할 수 없는 물리 기반 바운스에는 CSS linear()로 실제 스프링 방정식을 인코딩할 수 있습니다.
전직 인쇄 디자이너가 작성한 이 글은 JavaScript 없이 편집 타이포그래피를 웹에 구현하는 CSS 제어 기법 여섯 가지를 소개합니다. 유동적 타입 스케일은 clamp()에 rem + vw 기본값을 조합해 뷰포트에 반응하면서도 사용자 폰트 설정을 존중하도록 구성합니다. text-wrap: balance는 헤드라인의 들쭉날쭉한 라인(Chromium에서 최대 6줄 제한)을 방지하고, text-wrap: pretty는 본문 마지막 몇 줄만 재정렬해 고아 단어를 수정합니다. initial-letter는 네이티브 드롭 캡을 제공하고(Firefox 미지원, 우아하게 폴백), font-optical-sizing: auto는 렌더링 크기에 따라 opsz 가변 폰트 축을 자동으로 조정하며, hanging-punctuation: first는 시작 따옴표를 마진으로 내보내 광학적 정렬을 구현합니다(현재 Safari 전용). 여섯 가지 속성 모두에 대해 Chrome, Firefox, Safari 브라우저 지원 표가 제공됩니다.
Jakub T Jankiewicz가 작성한 이 글은 HTML 라디오 입력과 CSS :has() 가상 클래스를 결합해 JavaScript 없는 다크 모드 토글을 구현하는 방법을 보여줍니다. :root:has(#mode_dark:checked) 선택자는 부모 인식 조건으로 작동해 페이지 전체에 걸쳐 --bg 및 --fg CSS 커스텀 속성 재정의를 트리거합니다. 라디오 입력은 appearance: none, opacity: 0, pointer-events: none으로 시각적으로 숨기고, 해와 달 이모지가 담긴 레이블이 클릭 가능한 UI 역할을 합니다. @media (prefers-color-scheme: dark) 쿼리로 시스템 설정에 맞춰 기본 상태를 설정하며, 수동 라디오 선택이 이를 지속적으로 재정의합니다. Eleventy 같은 SSG 도구나 AI 크롤러 또는 저대역폭 사용자에게 JavaScript가 제공되지 않는 환경에서 특히 유용합니다.
Remy Sharp는 CSS에 와일드카드 요소 선택자가 없어 rem-* { }처럼 접두사를 공유하는 모든 커스텀 요소를 타깃으로 하는 규칙을 작성할 수 없다고 지적합니다. 현재 사용 가능한 우회책은 [class^="btn-"](시작 일치, 취약함)이나 [class*="btn"](포함 일치, 과도하게 광범위함) 같은 속성 선택자뿐이며, 두 방법 모두 요소 태그 이름에는 적용되지 않습니다. 같은 공백이 querySelectorAll에도 영향을 미쳐, 접두사로 커스텀 요소를 초기화하려면 대상 선택자 대신 전체 DOM을 스캔해야 합니다. Sharp는 Lea Verou가 2년 전 CSSWG에 이 이슈를 제기했으나 진전이 없다고 언급하며, CSS 문법상 이 용도로 * 문자가 사용 가능한지도 탐색합니다.
Blender Camera Path와 Three.js·GSAP로 Scroll-driven 3D Gallery 만들기
Gaspard Hedde가 작성한 이 Codrops 튜토리얼은 Blender에서 그린 베지어 곡선을 따라 카메라가 이동하는 스크롤 기반 3D 갤러리 구축 방법을 안내합니다. 곡선은 Blender의 Z-up 좌표계를 Three.js의 Y-up 시스템으로 변환하는 Python 스크립트를 통해 JSON으로 내보냅니다. Three.js에서 CatmullRomCurve3로 곡선을 재구성하고, 곡선의 로컬 법선 벡터에서 파생된 무작위 측면 및 깊이 오프셋으로 500개의 이미지 평면을 배치합니다. GSAP의 quickTo는 카메라 스무딩(power3.out, 1초)과 평면별 스케일 애니메이션 모두를 처리해 프레임당 500개의 새로운 tween 생성을 방지합니다. 근접 기반 포커스 시스템은 카메라에 가까워진 이미지를 최대 14배까지 확대하며, 3제곱 감쇠(f cubed)로 효과를 집중시킵니다.
이번 주 CSS 분야는 JavaScript 의존성을 줄이는 새로운 플랫폼 기능에 집중되었습니다. CSS Anchor Positioning API는 anchor-name, position-anchor, position-area를 사용해 툴팁이나 드롭다운을 임의의 앵커 요소에 정확하게 배치하며, position-try-fallbacks가 뷰포트 가장자리에서 자동 반전을 처리합니다. 곧 출시될 Level 2 명세는 CSS 기반 캐럿 방향 제어를 위한 container-type: anchored를 추가하는데, 현재 Chromium에서만 지원됩니다. 이와 함께 @starting-style은 오랜 공백을 해소합니다. dialog나 조건부 렌더링된 React 컴포넌트 같은 요소들은 이전에는 CSS 트랜지션이 애니메이션을 시작할 이전 상태가 없었습니다. @starting-style 내부에 초기 값을 선언하고, display나 overlay 같은 이산 속성에 대해 transition 목록에 allow-discrete를 추가하면 JavaScript 없이 부드러운 입장/퇴장 애니메이션이 가능합니다.
타이포그래피도 중점적으로 다루어졌습니다. clamp() 기반 유동 타입 스케일, 헤드라인과 본문 줄 바꿈을 위한 text-wrap: balance와 text-wrap: pretty, 드롭 캡을 위한 initial-letter, 가변 폰트 opsz 축 제어를 위한 font-optical-sizing: auto, 광학적 마진 정렬을 위한 hanging-punctuation: first(현재 Safari 전용) 등 여섯 가지 CSS 편집 타이포그래피 제어 기법이 소개되었습니다. 또한 cubic-bezier() 이징을 CSS 키워드 프리셋 다섯 가지 값과 함께 체계적으로 정리한 가이드도 발행되었습니다. 입장에는 ease-out, 퇴장에는 ease-in, 화면 내 이동에는 ease-in-out 원칙이 제시되었으며, 단일 베지어 곡선으로 모델링할 수 없는 물리 기반 바운스에는 CSS linear()로 스프링 방정식을 인코딩하는 방법도 소개됐습니다.
라디오 입력과 :has() 가상 클래스를 결합한 JavaScript 없는 다크 모드 토글도 소개됐습니다. :root:has(#mode_dark:checked)를 사용해 커스텀 속성 값을 전환하는 방식으로 정적 사이트나 AI 크롤러에게도 동작합니다. Remy Sharp는 CSS의 와일드카드 요소 선택자 부재 — rem-* 요소를 대상으로 하는 규칙을 작성할 수 없는 문제 — 에 대한 논의를 제기했으며, Lea Verou가 2년 전 CSSWG에 해당 이슈를 제기했으나 아직 진전이 없음을 지적했습니다.
Key Takeaways
CSS Anchor Positioning(anchor-name, position-area, position-try-fallbacks)이 플로팅 UI 위치 지정의 표준 방식으로 자리잡았습니다. Level 2의 container-type: anchored 기능은 2026년 7월 기준 Chromium 전용입니다.
@starting-style은 dialog나 조건부 렌더링 요소에 CSS 네이티브 입장/퇴장 트랜지션을 구현합니다. transition 속성에 allow-discrete를 함께 사용해야 display: none의 갑작스러운 전환을 방지할 수 있습니다.
clamp() 유동 스케일, text-wrap: balance/pretty, initial-letter, font-optical-sizing: auto, hanging-punctuation: first 등 6가지 CSS 속성을 활용하면 JavaScript 없이 인쇄물 수준의 타이포그래피를 웹에 구현할 수 있습니다.
