CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 2-2026
article
곡선 화살표 만들기
TAG: 크리에이티브 코딩
Ben Knight은 두 DOM 요소를 연결하는 동적 SVG 곡선 화살표를 구현하는 과정을 단계별로 설명합니다. SVG 경로 명령 M(이동)과 C(3차 베지에 곡선), 그리고 orient="auto"가 설정된 <marker> 요소로 방향이 자동 조정되는 화살촉을 만듭니다. 시작·끝 좌표는 공통 position: relative 부모를 기준으로 offsetLeft, offsetWidth, offsetTop에서 읽어오고, 제어점은 수평 중심에 배치하되 각 끝점보다 위아래로 오프셋을 두어 곡선을 형성합니다. S 명령으로 첫 번째 제어점을 수동 지정하지 않고도 추가 곡선을 부드럽게 연결할 수 있습니다. CSS stroke-dashoffset 애니메이션으로 선이 스스로 그려지는 효과를, opacity와 stroke-width 키프레임으로 추가 효과를 구현합니다. Safari에서 동적으로 업데이트되는 SVG marker 속성에 알려진 버그가 있어 인터랙티브 데모는 Chrome 또는 Firefox를 권장합니다.
Temani Afif은 최신 CSS 기능 세 가지를 조합하여 미디어 쿼리 없이 완전히 반응형인 육각형 그리드를 구현하는 방법을 보여줍니다. border-radius: 50% / 25%에 corner-shape: bevel을 적용해 육각형 모양을 만들고, 컨테이너 쿼리(container-type: inline-size)로 100cqw를 산술에 사용할 수 있게 하며, sibling-index()를 round(), mod(), calc()와 함께 활용해 격행의 첫 번째 요소에만 margin-left 오프셋을 적용하는 --_c 플래그를 파생시킵니다. cos(30deg)로 계산한 음수 margin-bottom이 행 간 겹침을 만듭니다. 이 기법은 현재 Chrome 전용이며, Afif는 이를 명시하고 더 넓은 브라우저 지원을 가진 이전 구현 방식을 링크로 제공합니다. aspect-ratio, border-radius, 간격 공식을 조정하면 마름모 및 팔각형 그리드로도 확장할 수 있습니다.
@view-transition { navigation: auto; } 규칙 하나만 추가하면 JavaScript 없이 정적 페이지 간 기본 크로스페이드 전환을 활성화할 수 있습니다. 지속 시간과 이징은 ::view-transition-group(*) 의사 요소로 재정의할 수 있습니다. 네비게이션 항목이 다음 페이지의 브레드크럼으로 자연스럽게 이동하는 것처럼 개별 요소를 따로 애니메이션하려면, 두 문서에서 대응하는 요소에 동일한 view-transition-name 값을 지정하면 브라우저가 보간을 자동 처리합니다. Firefox는 cross-document view transitions를 아직 완전히 지원하지 않아 해당 환경에서는 효과가 점진적으로 저하됩니다. 저자는 Gleam과 Lustre로 페이지를 생성하며, 인라인 스타일로 view-transition-name을 적용하는 소형 헬퍼 함수를 활용해 반복을 줄였습니다.
margin-left, top, width 같은 물리적 CSS 프로퍼티에는 좌→우, 위→아래 방향 가정이 내재되어 있어 아랍어·히브리어·파르시어 같은 RTL 언어나 세로쓰기 동아시아 문자에서 레이아웃이 깨집니다. 논리 프로퍼티는 이를 플로우 상대적 등가물로 대체합니다. margin-inline-start는 문서 쓰기 방향에 따라 자동 적응하고, inline-size는 가로 레이아웃에서는 너비, 세로 레이아웃에서는 높이에 매핑되며, inset-block-start가 top을 대신합니다. Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저가 현재 논리 프로퍼티를 완전 지원하므로 IE만이 실질적 걸림돌입니다. 기사는 점진적 도입을 권장합니다. 우선 새 PR에서 margin-left와 margin-right를 금지하고, 이후 stylelint-use-logical-spec 플러그인으로 코드베이스 전반의 물리 프로퍼티를 자동 감지하는 방식입니다.
Miriam Suzanne은 2025년 한 해 동안 진행한 fluid 및 반응형 타이포그래피 연구를 web.dev 아티클로 정리하며, 뷰포트 기준 폰트 사이징의 핵심 트레이드오프를 짚습니다. 뷰포트를 더 많이 추적할수록 사용자 정의 줌에는 덜 반응하게 된다는 것입니다. 그녀의 접근법은 em이나 rem을 vw 또는 vi 단위와 결합한 clamp() 함수를 사용하며, 이는 Baseline에 포함된 CSS 비교 함수 덕분에 깔끔하게 표현할 수 있습니다. 뷰포트 너비 대비 기본 폰트 크기(px)와 유효 줌 비율(%)을 겹쳐 그린 그래프로 수식을 시각화하여, 뷰포트 스케일링으로 달성하는 2× 폰트 크기 증가가 200% 줌보다 훨씬 가파른 기울기를 가짐을 보여줍니다. CSS min(), max(), clamp()의 광범위한 지원 덕분에 px와 rem 중 하나만 선택해야 한다는 이분법은 더 이상 유효하지 않다고 강조합니다.
Kevin Powell은 CSS relative colors를 사용하면 밝기나 투명도 변형별로 별도의 변수를 관리할 필요가 없어진다는 것을 toast 알림 UI 예제로 시연합니다. hsl(from var(--toast-color) H S L) 구문으로 단일 커스텀 프로퍼티에서 배경색, 테두리색, box-shadow를 파생시키고, 명도 값을 고정하거나 슬래시로 알파 채널을 추가하는 방법을 보여줍니다. 이후 OKLCH를 HSL의 지각적으로 균일한 대안으로 소개합니다. HSL에서는 같은 명도 값이라도 노란 계열이 파란 계열보다 훨씬 밝게 보이는 반면, OKLCH는 색상(hue)이 달라져도 지각되는 밝기가 일정하게 유지되어 자동 생성된 색상 변형들이 시각적으로 일관성을 갖습니다. 이 튜토리얼은 Powell이 Piccalilli에 기고한 공백 구분 CSS 색상 구문 및 색상 조작 심화 가이드 두 편을 기반으로 합니다.
Kevin Powell은 CSS relative colors를 사용하면 밝기나 투명도 변형별로 별도의 변수를 관리할 필요가 없어진다는 것을 toast 알림 UI 예제로 시연합니다. hsl(from var(--toast-color) H S L) 구문으로 단일 커스텀 프로퍼티에서 배경색, 테두리색, box-shadow를 파생시키고, 명도 값을 고정하거나 슬래시로 알파 채널을 추가하는 방법을 보여줍니다. 이후 OKLCH를 HSL의 지각적으로 균일한 대안으로 소개합니다. HSL에서는 같은 명도 값이라도 노란 계열이 파란 계열보다 훨씬 밝게 보이는 반면, OKLCH는 색상(hue)이 달라져도 지각되는 밝기가 일정하게 유지되어 자동 생성된 색상 변형들이 시각적으로 일관성을 갖습니다. 이 튜토리얼은 Powell이 Piccalilli에 기고한 공백 구분 CSS 색상 구문 및 색상 조작 심화 가이드 두 편을 기반으로 합니다.
Ben Knight은 두 DOM 요소를 연결하는 동적 SVG 곡선 화살표를 구현하는 과정을 단계별로 설명합니다. SVG 경로 명령 M(이동)과 C(3차 베지에 곡선), 그리고 orient="auto"가 설정된 <marker> 요소로 방향이 자동 조정되는 화살촉을 만듭니다. 시작·끝 좌표는 공통 position: relative 부모를 기준으로 offsetLeft, offsetWidth, offsetTop에서 읽어오고, 제어점은 수평 중심에 배치하되 각 끝점보다 위아래로 오프셋을 두어 곡선을 형성합니다. S 명령으로 첫 번째 제어점을 수동 지정하지 않고도 추가 곡선을 부드럽게 연결할 수 있습니다. CSS stroke-dashoffset 애니메이션으로 선이 스스로 그려지는 효과를, opacity와 stroke-width 키프레임으로 추가 효과를 구현합니다. Safari에서 동적으로 업데이트되는 SVG marker 속성에 알려진 버그가 있어 인터랙티브 데모는 Chrome 또는 Firefox를 권장합니다.
Temani Afif은 최신 CSS 기능 세 가지를 조합하여 미디어 쿼리 없이 완전히 반응형인 육각형 그리드를 구현하는 방법을 보여줍니다. border-radius: 50% / 25%에 corner-shape: bevel을 적용해 육각형 모양을 만들고, 컨테이너 쿼리(container-type: inline-size)로 100cqw를 산술에 사용할 수 있게 하며, sibling-index()를 round(), mod(), calc()와 함께 활용해 격행의 첫 번째 요소에만 margin-left 오프셋을 적용하는 --_c 플래그를 파생시킵니다. cos(30deg)로 계산한 음수 margin-bottom이 행 간 겹침을 만듭니다. 이 기법은 현재 Chrome 전용이며, Afif는 이를 명시하고 더 넓은 브라우저 지원을 가진 이전 구현 방식을 링크로 제공합니다. aspect-ratio, border-radius, 간격 공식을 조정하면 마름모 및 팔각형 그리드로도 확장할 수 있습니다.
@view-transition { navigation: auto; } 규칙 하나만 추가하면 JavaScript 없이 정적 페이지 간 기본 크로스페이드 전환을 활성화할 수 있습니다. 지속 시간과 이징은 ::view-transition-group(*) 의사 요소로 재정의할 수 있습니다. 네비게이션 항목이 다음 페이지의 브레드크럼으로 자연스럽게 이동하는 것처럼 개별 요소를 따로 애니메이션하려면, 두 문서에서 대응하는 요소에 동일한 view-transition-name 값을 지정하면 브라우저가 보간을 자동 처리합니다. Firefox는 cross-document view transitions를 아직 완전히 지원하지 않아 해당 환경에서는 효과가 점진적으로 저하됩니다. 저자는 Gleam과 Lustre로 페이지를 생성하며, 인라인 스타일로 view-transition-name을 적용하는 소형 헬퍼 함수를 활용해 반복을 줄였습니다.
margin-left, top, width 같은 물리적 CSS 프로퍼티에는 좌→우, 위→아래 방향 가정이 내재되어 있어 아랍어·히브리어·파르시어 같은 RTL 언어나 세로쓰기 동아시아 문자에서 레이아웃이 깨집니다. 논리 프로퍼티는 이를 플로우 상대적 등가물로 대체합니다. margin-inline-start는 문서 쓰기 방향에 따라 자동 적응하고, inline-size는 가로 레이아웃에서는 너비, 세로 레이아웃에서는 높이에 매핑되며, inset-block-start가 top을 대신합니다. Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저가 현재 논리 프로퍼티를 완전 지원하므로 IE만이 실질적 걸림돌입니다. 기사는 점진적 도입을 권장합니다. 우선 새 PR에서 margin-left와 margin-right를 금지하고, 이후 stylelint-use-logical-spec 플러그인으로 코드베이스 전반의 물리 프로퍼티를 자동 감지하는 방식입니다.
Miriam Suzanne은 2025년 한 해 동안 진행한 fluid 및 반응형 타이포그래피 연구를 web.dev 아티클로 정리하며, 뷰포트 기준 폰트 사이징의 핵심 트레이드오프를 짚습니다. 뷰포트를 더 많이 추적할수록 사용자 정의 줌에는 덜 반응하게 된다는 것입니다. 그녀의 접근법은 em이나 rem을 vw 또는 vi 단위와 결합한 clamp() 함수를 사용하며, 이는 Baseline에 포함된 CSS 비교 함수 덕분에 깔끔하게 표현할 수 있습니다. 뷰포트 너비 대비 기본 폰트 크기(px)와 유효 줌 비율(%)을 겹쳐 그린 그래프로 수식을 시각화하여, 뷰포트 스케일링으로 달성하는 2× 폰트 크기 증가가 200% 줌보다 훨씬 가파른 기울기를 가짐을 보여줍니다. CSS min(), max(), clamp()의 광범위한 지원 덕분에 px와 rem 중 하나만 선택해야 한다는 이분법은 더 이상 유효하지 않다고 강조합니다.
2주차 CSS의 주제는 색상 인텔리전스와 레이아웃 창의성의 만남입니다. 주목할 영상은 Kevin Powell의 CSS relative colors 시연으로, 디자인 시스템의 흔한 고통 지점을 재정의합니다. 브랜드 색상마다 tint·shade·transparent 변수를 별도로 관리하는 대신, hsl(from var(--toast-color) H S L) 구문으로 단일 커스텀 프로퍼티에서 모든 변형을 파생시킵니다. Powell은 여기에 지각적으로 우월한 색 공간인 OKLCH를 더합니다. HSL은 같은 명도의 노란색과 파란색을 시각적으로 동등하게 취급하지만(실제로는 그렇지 않음), OKLCH는 색상(hue)이 달라져도 지각 밝기를 일정하게 유지하여 수동 보정 없이 팔레트를 일관성 있게 만듭니다.
web.dev를 통해 발표된 Miriam Suzanne의 fluid typography 연구는 모든 반응형 폰트 시스템이 해결해야 할 긴장을 다룹니다. 뷰포트 상대 스케일링과 사용자 줌은 근본적으로 충돌합니다. 뷰포트를 더 많이 추적할수록 사용자 접근성 설정에 덜 반응하게 됩니다. 해법은 Baseline 지원 min()·max()·clamp() 함수로 깔끔하게 표현되는 em/rem과 vw/vi를 결합한 clamp()입니다. 그래프로 시각화된 수식은 트레이드오프를 명확하게 보여줍니다. 2× 뷰포트 스케일링은 200% 사용자 줌보다 훨씬 가파르며, 이 차이는 접근성에서 중요합니다.
Temani Afif의 육각형 그리드는 세 가지 최신 기능이 어떻게 합쳐져 놀라운 결과를 만드는지 보여줍니다: corner-shape: bevel과 특정 border-radius로 모양을 만들고, 컨테이너 쿼리로 100cqw를 산술에 사용하며, sibling-index()와 round()/mod()/calc()로 격행 오프셋을 파생시킵니다. cos(30deg)의 음수 margin-bottom이 행 간 겹침을 만듭니다. 현재 Chrome 전용이지만 미디어 쿼리 없는 레이아웃 합성의 방향을 미리 보여줍니다. 이 주는 물리 프로퍼티(margin-left, top)에서 벗어나 코드베이스 전체를 마이그레이션할 것을 주장하는 CSS 논리 프로퍼티 글과, SVG 3차 베지에 곡선 화살표 튜토리얼로 마무리됩니다. 후자는 M/C/S 경로 명령, <marker orient="auto"> 화살촉, stroke-dashoffset 애니메이션을 결합해 두 DOM 요소를 동적으로 연결합니다.
Key Takeaways
tint/shade/alpha 변수 세트를 CSS relative color 구문으로 교체하세요. hsl(from var(--color) H S L)을 사용하면 토큰 하나로 다섯 개의 역할을 대신할 수 있으며, OKLCH로 전환하면 색상 전반에서 생성된 음영이 지각적으로 일관성을 유지합니다.
fluid typography에는 단일 단위 대신 clamp()에 rem과 vw를 결합하세요. 이 조합은 뷰포트 너비와 사용자 줌 모두에 반응하는 반면, 하나만 사용하면 접근성의 한 축을 포기하게 됩니다.
새 코드에서는 CSS 논리 프로퍼티(margin-inline-start, inset-block-start, inline-size)를 사용하고, stylelint-use-logical-spec 플러그인으로 기존 코드베이스의 물리 프로퍼티를 찾아내세요.
