article태그: CSS 기능읽기_시간: 9분
CSS grid lanes로 만드는 네이티브 메이슨리 레이아웃
Saleh Mubashar는 display: grid-lanes가 Grid의 트랙 정의를 재사용하면서 다른 축으로 항목을 촘촘하게 배치하는 방식을 설명합니다. 명시적으로 위치를 지정하거나 여러 트랙에 걸친 항목이 알고리즘에 영향을 주므로 모든 항목이 가장 짧은 열에 들어간다고만 설명하면 중요한 동작을 놓칩니다. fit-tolerance는 비슷한 크기의 빈 공간을 동률로 보는 기준이며, normal은 1em으로 계산되고 infinite는 소스 순서를 우선하지만 모든 배치에서 이를 보장하지는 않습니다. 시각적 위치가 키보드와 보조 기술이 따르는 DOM 순서와 달라질 수 있다는 점에서 이 차이는 중요합니다. 글은 사양을 Editor’s Draft로 다루므로 점진적 향상, 사용할 수 있는 대체 레이아웃, 소스 순서 검토를 도입 과정에 포함해야 합니다.
CSS 기능13:57
clamp()의 매직 넘버 없이 유동형 글자 크기 만들기
Kevin Powell은 유동형 타이포그래피의 관계를 설명 없는 clamp() 계수 안에 숨기지 않고 이해하기 쉬운 제어값으로 나눕니다. 시연에서는 500px~1000px 뷰포트 구간을 정규화한 뒤 진행도에 따라 48px~64px 글자 크기를 만들고, 이후 글자 크기 입력에는 rem을 권합니다. 사용자 정의 속성으로 뷰포트 경계, 기본 크기, 타입 스케일 비율을 분리하고 pow()로 단계별 배율을 계산합니다. 테스트하는 브라우저에서 progress()나 길이 사이의 나눗셈을 사용할 수 없을 때는 진행도를 제한한 tan(atan2()) 대안도 보여 줍니다. 이 방법은 디자인 의도를 유지 관리하기 쉽게 표현하지만, 모든 산술 기능이 어디서나 동작한다는 보장이 아니라 기능별 지원 확인을 전제로 합니다.
태그: CSS 기능읽기_시간: 6분
Safari 27.1의 WebKit 기능과 접이식 화면 레이아웃
Safari 27.1의 접이식 기기 미리보기는 CSS 레이아웃을 기기 자세와 뷰포트 영역에 연결합니다. device-posture 미디어 기능은 folded와 continuous를 구분하고, horizontal-viewport-segments와 vertical-viewport-segments는 영역이 배열된 방식을 나타냅니다. viewport-segment 환경 변수 여섯 개는 열과 행 인덱스로 지정한 영역의 위치와 크기를 제공합니다. WebKit 예제의 뷰포트 너비는 382~951 CSS 픽셀에 걸쳐 있어 휴대전화 너비를 하나로 고정하지 말고 실제 공간에 대응해야 하는 이유를 보여 줍니다. 기능 플래그 두 개와 지원 하드웨어가 필요하며 자세별 화면 검증도 남아 있으므로, 실험적 영역 기능이나 브라우저 컨트롤 뒤 콘텐츠가 널리 출시됐다는 뜻은 아닙니다.
태그: CSS 기능읽기_시간: 13분
Safari Technology Preview 255: 레이아웃 정확성 수정 살펴보기
Safari Technology Preview 255 릴리스 노트는 다양한 브라우저 변경과 함께 구체적인 CSS 회귀 테스트 대상을 제공합니다. 여러 line-clamp 수정은 서식 문맥, 잘림 지점 뒤에도 보이는 콘텐츠, 크기나 넘침을 잘못 늘리는 부유 요소를 다룹니다. Grid 수정은 고유 크기 계산, 백분율 및 calc() 제약, box-sizing 경계를 다루고 컨테이너 크기 쿼리는 소수 크기를 정수로 잘라내지 않도록 바뀝니다. currentColor에 의존하는 배경 다시 그리기와 구조적인 DOM 변경 뒤의 범위 소속도 수정 대상입니다. 실제 레이아웃에서 재현해 볼 사례를 제시하지만 Technology Preview 제공은 안정 브라우저의 폭넓은 지원을 뜻하지 않으며, 일반적인 성능 향상이나 모든 관련 레이아웃 오류의 해결을 보장하지 않습니다.
summarize다이제스트_요약
이번 주 레이아웃 자료는 소스 순서와 시각적 공간의 관계를 살펴봅니다. CSS grid lanes는 익숙한 트랙 정의로 콘텐츠를 채울 수 있지만 여러 트랙에 걸친 항목, 명시적 위치, 허용 오차 때문에 가장 짧은 열이라는 설명만으로는 부족합니다. 키보드와 보조 기술의 이동 순서도 의도적으로 검토해야 합니다.
유동형 타이포그래피는 제어값을 이해하기 쉽게 드러낼 때 관리하기 좋습니다. Kevin Powell은 뷰포트 진행도, 크기 경계, 스케일 비율을 분리하고 산술 지원이 다를 때의 대안도 보여 줍니다. 명확한 입력값은 브라우저 요구를 숨기지 않으면서 디자인을 조정하기 쉽게 만듭니다.
레이아웃 정확성에는 별도의 회귀 검사가 필요합니다. Safari Technology Preview 255는 줄 잘림, Grid 크기 계산, 소수 단위 컨테이너 쿼리를 다룹니다. 일반적인 성능 향상을 가정하기보다 미리보기 노트로 구체적인 재현 대상을 고르십시오.
Safari의 접이식 화면 미리보기는 명시적인 공간 정보를 자세와 뷰포트 영역으로 확장합니다. 점진적 향상은 실험적 레이아웃 기능을 켜기 전에도 사용할 수 있는 콘텐츠를 보존해야 합니다. 데스크톱에서 한 번 잘 보였다는 이유로 설계가 검증됐다고 보지 말고 대체 레이아웃, 읽기 순서, 실제 기기 자세를 함께 확인하십시오.
핵심 요점CSS grid lanes를 도입할 때 DOM 순서와 시각적 순서를 검토하십시오.- 뷰포트 경계, 글자 크기, 타입 스케일 비율을 별도 제어값으로 유지하십시오.
- 접이식 뷰포트 영역 미리보기 전에 사용할 수 있는 대체 레이아웃을 시험하십시오.
