Today I Learned

日々の仕事と学びの振り返りです。何をして、何を学んだかを記録します。

3件の記録 · #css

2026년 7월

2026-07-11

ホームヒーローの scroll-driven ナラティブ演出

GSAP なしで sticky scrolly·CSS keyframes·view-timeline を使い、TIL→Knowledge 昇格デモとパイプラインセクションを実装した一日

sticky scrolly はラッパーの高さぶんスクロールの時間軸を作り、phase は進行度から派生させると JS が薄くなる
ヒーローのライブデモは clip-path steps ワイプ + animation-delay だけでループを作れる

2026-07-10

Modal peek スタックと CSS layer パッケージ

単一 dialog 内の document push と @layer ベースの editor CSS 分離で、peek UX とテーマのカスタマイズを合わせた一日

gallery→peek は dialog を新しく開くより、同じ shell で documentId だけ替えるほうが連続的だ
async resolve は (newId, oldContent) 中間フレームを render-time reset で防がねばならない

2026년 6월

2026-06-30

直接アップロード契約、CSSトークンテーマ、ハイドレーション境界

presigned URL の4段階アップロード、@layer ベースのトークンテーマの単一生成器、fr レイアウトとマウント後ハイドレーションから学んだ共通原則

presigned URL アップロードは presign→PUT→complete→create の4段階契約であり、complete 通知を漏らすとバックエンドはアップロードを認識できない。
CSSトークンテーマは @layer（優先度）・@scope（範囲）・light-dark()（モード）を分離し、ランタイム・ビルドCSSを一つの生成器に単一化しないとズレる。