CSS

WCAG를 준수하는 반응형 text 만들기

1. 서론 반응형 텍스트를 구현할 때 과거에는 Media Query 분기점을 하드코딩했으나, 새로 추가된 CSS Comparison Functions(비교 함수)를 활용하면 하나의 수식으로 해결 가능하다. 이때 단순히 Viewport 너비에 따라 Font Size를 가변적으로 계산해서는 안 된다. WCAG를 준수하기 위해 텍스트 렌더링은 다음 두 가지 조건을 통과해야 한다.1. WCAG 1.4.4 Resize Text. 보조 기술 없이 텍스트를 최대 200%까지 크기 조정할 수 있어야 한다. 여기서 Input(입력값)이 브라우저의 Zoom 레벨이라는 점이 중요하다. 사용자가 브라우저를 확대했을 때, 렌더링 된 텍스트는 그에 비례하여 물리적으로 커져야 한다. Smashing Magazine의 'Addres..

Staking Context와 Position, z-index 그리고 React Portal

서론 Fe 개발자라면 한번쯤은 CSS에서 position: fixed 요소가 스크롤을 따라오지 않거나 z-index가 제대로 먹히지 않는 현상을 경험했을 것이다. 대부분의 개발자는 “z-index를 더 높이면 되겠지”라고 생각하지만, 실제로는 해결되지 않는다. 이 문제의 원인은 stacking context이며, 특히 transform, opacity, filter 같은 속성이 새로운 stacking context를 만들기 때문이다.Stacking Context란 Stacking Context는 HTML element들을 3차원적으로 바라보는 개념이다. 우리가 평소 생각하는 X축(가로)과 Y축(세로)에 더해 Z축(깊이)이 추가된다고 이해하면 된다. 이 Z축이 바로 어떤 element가 다른 요소 위에, ..