LAB vs LCH 둘 다 지각적으로 균일한(perceptually uniform) 색공간이라는 공통점이 있습니다. 사람 눈이 색을 인식하는 방식을 수학적으로 모델링한 것입니다. 차이는 좌표계입니다. LAB는 직교 좌표계입니다. LCH는 원통 좌표계로, LAB를 극좌표로 변환한 것입니다. css LCH가 실용적으로 훨씬 쓰기 편합니다. Hue 값을 직접 조작하는 것이 직관적이고, hsl()에 익숙하다면 자연스럽게 넘어올 수 있습니다. OK가 붙으면? LAB/LCH는 1976년 CIE 표준인데, […]

사이트를 문서화하던 중 <header> 안에 <h1>이 사용된 구조를 마주쳤습니다. 이어서 콘텐츠 영역인 <section> 안에서도 <h1>으로 헤딩이 시작되고 있었는데, 이 패턴이 과연 올바른 것인지 짚어볼 필요가 있었습니다. <section> 안에 <h1>을 사용하는 패턴은 HTML5 초기부터 꽤 흔하게 쓰여왔습니다. 섹셔닝 요소마다 독립적인 헤딩 계층을 갖는다는 아웃라인 알고리즘의 개념이 있었고, 실제로 브라우저가 section > h1을 h2처럼 렌더링해줬기 때문에 마크업 […]

기존에는 @container 규칙을 쓸 때 조건(query)이 필수라고 인식하는 경우가 많았지만, 스펙 상 <container-name>과 <container-query> 중 하나 이상만 있으면 됩니다. 즉, 쿼리 조건 없이 컨테이너 이름만으로도 @container 블록을 선언할 수 있습니다. 문법 구조 형태 예시 의미 조건만 @container (width > 400px) 가장 가까운 컨테이너의 크기 조건 이름 + 조건 @container sidebar (width > 400px) sidebar 컨테이너의 […]