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

딱 알맞은 Customizable Select 높이 — 2026년 27주 CSS 및 스타일링

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 27-2026
폼

딱 알맞은 Customizable Select 높이

Jake Archibald가 완전히 커스터마이즈 가능한 select 요소의 picker 드롭다운 크기 조정 문제를 심층 분석합니다. ::picker(select) 가상 요소를 활용하여 팝업이 뷰포트 가장자리에 닿거나, 너무 작아지거나, 불필요하게 커지는 현상을 방지하는 해법을 도출합니다. 핵심은 calc-size()로, fit-content나 stretch 같은 고유 크기를 min() 연산에 참여시킬 수 있습니다. 이를 통해 최솟값은 calc-size(fit-content, min(size, 12em)), 최댓값은 calc-size(stretch, min(size, 30em))으로 설정할 수 있습니다. @supports와 flip-block을 활용한 position-try-fallbacks로 Firefox와 Safari에서도 calc-size()가 지원될 때까지 안정적인 대체 방안을 제공합니다.

딱 알맞은 Customizable Select 높이
Read Articlearrow_forward
Video · 애니메이션

부드러운 Animation이 있는 Native Popover(JavaScript 불필요)

Kevin Powell이 HTML popover 속성과 CSS만으로 — JavaScript 없이 — 완전히 애니메이션된 팝오버를 구축하는 과정을 설명합니다. 버튼의 popovertarget과 popover 간의 암묵적 앵커 관계를 설명하고, CSS 앵커 포지셔닝의 position-area와 position-try: flip-block을 사용해 팝오버를 화면 안에 유지합니다. 그런 다음 :popover-open 가상 클래스, @starting-style, 그리고 transition-behavior: allow-discrete를 통해 부드러운 열기/닫기 애니메이션을 적용합니다. 핵심적인 주의 사항도 강조하는데, display는 popover 요소 자체가 아닌 (UA의 display: none을 덮어쓰게 됨) :popover-open 내부에 설정해야 하며, grid-template-columns 같은 레이아웃 속성은 닫기 전환 중에도 유지되도록 가상 클래스 외부에 두어야 합니다.

AI_INFOGRAPHIC
부드러운 Animation이 있는 Native Popover(JavaScript 불필요) — infographicWATCH_VIDEOarrow_forward
Article · 레이아웃READ TIME: 3m

CSS Grid Lane Masonry Layout 치트시트

Pawel Grzybek가 display: grid-lanes에 대한 실용적인 치트시트를 제공합니다. 이는 Apple과 Google 간의 오랜 스펙 논쟁을 해소한 네이티브 CSS 마소너리 레이아웃입니다. 이 글에서는 grid-template-columns를 통한 열 기반 레이아웃, grid-template-rows를 통한 행 기반 레이아웃, grid-column: span 2를 사용한 아이템 병합, 그리고 시각적으로 혼란스럽거나 접근성을 해치는 배치를 방지하는 flow-tolerance 속성을 다룹니다. 현재 브라우저 지원은 제한적이며 Chrome과 Firefox는 아직 미지원이고, Safari 26.4가 가장 우수한 구현을 보이지만 일부 WPT 테스트는 여전히 실패합니다. 일반 grid로의 점진적 향상(progressive enhancement)이 권장됩니다.

READ_FULL_LOGarrow_forward
Article · 테마READ TIME: 9m

지속되는 Mode와 Theme: Persistent Toggle 솔루션 구축

이 글은 모드(라이트/다크)와 테마(강조 색상)를 명확히 구분하며, 이를 하나의 속성으로 혼합하면 조합 폭발로 이어진다고 주장합니다. 권장 아키텍처는 두 개념을 data-mode와 data-theme 속성으로 분리하고 네이티브 라디오 입력으로 구동합니다. 세 가지 점진적 향상 레이어를 적용하는데, CSS만을 사용하는 기반 레이어, 첫 번째 페인트 전에 localStorage를 읽어 잘못된 색상의 깜빡임을 방지하는 작은 블로킹 인라인 head 스크립트, 그리고 인터랙티브 기능과 OS 환경설정 변경 이벤트를 처리하는 지연 로드 스크립트로 구성됩니다. 핵심은 해석된 값이 아닌 사용자의 의도("system")를 저장하여 페이지가 OS 변경을 실시간으로 반영하게 하는 것입니다. fieldset/legend, :focus-visible, WCAG 명암비 등 접근성 요건도 상세히 다룹니다.

READ_FULL_LOGarrow_forward
Article · 레이아웃READ TIME: 3m

Full-bleed CSS 고치기

David Bushell이 클래식 full-bleed 유틸리티 패턴인 width: 100vw와 음수 마진 오프셋 조합을 재검토하며, OS 스크롤바가 공간을 차지할 때 뷰포트 단위가 픽셀 수준의 정렬 오류를 일으키는 이유를 설명합니다. 현대적인 해결책은 뷰포트 단위를 컨테이너 쿼리 단위로 교체하는 것으로, body 요소를 명명된 컨테이너(container: body / inline-size)로 만들고 full-bleed 클래스에 inline-size: 100cqi를 사용합니다. 중첩된 컨테이너를 처리하기 위해 @property를 사용해 --body-size를 상속 가능하고 타입이 지정된 length로 정의합니다. 이를 통해 자식 컨테이너 내에서 값이 할당 시점에 해석되고 full-bleed 요소에 올바르게 상속됩니다. Bushell은 이 우회책을 완전히 제거할 제안된 미래 문법인 100cqi(body)도 언급합니다.

READ_FULL_LOGarrow_forward
Article · 모던 CSSREAD TIME: 5m

오래된 기법을 대체하는 현대 CSS 기능

오랫동안 사용해 온 CSS 우회책을 대체하는 5가지 현대 CSS 속성을 실용적으로 소개합니다. scrollbar-gutter: stable은 스크롤바 공간을 항상 예약해 모달이 overflow: hidden을 설정할 때 레이아웃이 이동하는 현상을 방지합니다. system-ui 폰트 키워드는 임의적이지 않고 의도적으로 보이는 플랫폼 네이티브 대체 폰트를 제공합니다. 블록 컨테이너에 align-content: center를 적용하면 Flexbox나 Grid 컨텍스트 없이 자식 요소를 수직으로 가운데 정렬할 수 있습니다. light-dark() 함수는 두 개의 별도 @media 블록으로 작성하던 이중 테마 변수 정의를 토큰당 한 줄로 압축합니다. 마지막으로, 논리적 text-align 값(start, end)이 방향성 left/right를 대체해 RTL 지원을 자동으로 처리합니다. 각 섹션은 기존 우회책과 한 줄짜리 대체 방법을 비교합니다.

READ_FULL_LOGarrow_forward
Article · 접근성READ TIME: 4m

Grid Lane에 Progressive Enhancement 적용하기

Manuel Matuzovic가 Safari에서 display: grid-lanes를 사용할 때의 접근성 함정을 분석합니다. Safari는 해당 레이아웃을 지원하지만 포커스 순서를 시각적 순서와 일치시키는 데 필요한 reading-flow 속성은 지원하지 않습니다. 그는 display: grid-lanes와 reading-flow: grid-rows 모두를 요구하는 @supports 체크를 통해 Grid Lanes를 조건부로 적용할 것을 권장합니다. 덜 엄격한 대안으로 flow-tolerance: infinite를 사용하면 최악의 포커스 순서 불일치를 줄일 수 있지만 완전히 해결되지는 않습니다. 그의 결론은 신중합니다. Grid Lanes는 점진적으로 도입하기 쉽지만 DOM과 시각적 순서 간의 긴장 관계는 키보드 및 스크린 리더 테스트를 꼼꼼히 해야 한다고 강조합니다.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

이번 주는 CSS 레이아웃과 UI 프리미티브가 주목을 받았습니다. Apple과 Google 간의 오랜 스펙 논쟁을 마무리한 네이티브 CSS 마소너리 레이아웃 display: grid-lanes에 대해 두 편의 글이 나왔습니다. 하나는 grid-template-columns, grid-template-rows, grid-column: span 2를 이용한 아이템 병합, flow-tolerance 배치 속성을 다루는 실용적인 치트시트이며, 다른 하나는 Safari가 display: grid-lanes는 지원하지만 reading-flow: grid-rows는 미지원하여 포커스 순서가 깨질 수 있으므로, 두 속성을 모두 요구하는 @supports 조건으로 기능을 제한해야 한다는 접근성 경고입니다. Chrome과 Firefox는 아직 미지원이며, Safari 26.4가 현재 최선의 구현을 제공합니다.

Jake Archibald는 완전히 커스터마이즈 가능한 select 요소의 picker 드롭다운 크기 조정 문제를 깊이 분석하여 calc-size()를 활용해 fit-content와 stretch를 min() 비교에 참여시키는 해법을 제시하였으며, Firefox와 Safari를 위한 @supports 및 position-try-fallbacks: flip-block 폴백도 제공하였습니다. David Bushell은 기존의 100vw full-bleed 기법을 컨테이너 쿼리 단위로 교체하여 body를 명명된 컨테이너로 선언하고 inline-size: 100cqi를 사용하며, 중첩 컨테이너에서의 올바른 상속을 위해 @property를 활용하였습니다.

Kevin Powell은 HTML popover 속성, CSS 앵커 포지셔닝, @starting-style, transition-behavior: allow-discrete를 조합하여 JavaScript 없이 완전히 애니메이션된 팝오버를 구현하는 방법을 시연하였습니다. 별도의 글에서는 오래된 CSS 우회책을 대체하는 5가지 모던 CSS 원라이너 — scrollbar-gutter: stable, system-ui, 블록 요소의 align-content: center, light-dark(), 논리적 text-align: start/end — 를 소개하였습니다.

Key Takeaways
  • display: grid-lanes(네이티브 CSS 마소너리)는 Safari 26.4에서 사용 가능하지만, Safari가 reading-flow를 미지원하므로 배포 전 반드시 display: grid-lanes와 reading-flow: grid-rows를 모두 요구하는 @supports 조건을 적용해야 키보드 포커스 순서 문제를 방지할 수 있습니다.
  • calc-size()를 사용하면 fit-content, stretch 같은 고유 크기를 min()/max() 비교에 참여시킬 수 있어, JavaScript 없이 커스터마이즈 가능한 select 드롭다운을 올바르게 크기 조정할 수 있습니다.
  • popover 속성과 @starting-style, transition-behavior: allow-discrete의 조합으로 JavaScript 없이 완전히 애니메이션된 앵커 기반 팝오버를 구현할 수 있으며, 이제 프로덕션 사용에 적합한 패턴입니다.