머리글과 바닥글이 이제 화면 전체 너비로 이어집니다

여기 모든 페이지에서 보이는 작은 변화입니다. 맨 위의 어두운 띠와 맨 아래의 바닥글이 이제 창의 전체 너비로 이어집니다.

오늘까지는 다른 모든 것과 같은 1180픽셀 단 안에 있었고, 그래서 넓은 화면에서는 페이지가 빈 배경에 떠 있는 내용의 띠처럼 보였습니다. 통계 페이지의 바닥글은 이미 전체 너비였습니다. 유일하게 그랬고, 그 어긋남이 이 일을 시작하게 했습니다.

바뀌지 않은 것

그 띠 안의 내용입니다. 글자와 단추와 숫자는 여전히 아래 구역과 같은 1180픽셀에 맞추어 서므로, 띠는 넓고 글은 그렇지 않습니다. 백 자짜리 줄을 읽는 사람은 없고, 27인치 화면을 가로질러 늘어난 제목은 디자인이 아니라 실수입니다.

왜 흔한 수법을 쓰지 않았는가

가운데 정렬된 단에서 요소를 빼내는 흔한 방법은 100vw에 대한 음수 여백입니다. 스크롤 막대를 꺼 둔 데스크톱에서는 놓치기 쉬운 결함이 있습니다. vw는 스크롤 막대를 포함합니다. 그래서 블록이 보이는 영역보다 딱 그 너비만큼 넓어지고, 페이지 전체를 옆으로 몇 픽셀 끌 수 있게 됩니다. 휴대전화에서는 읽는 도중에 엄지 아래에서 화면이 흔들린다는 뜻입니다.

그래서 띠는 밖으로 뻗지 않고, 넓게 시작해 안으로 여백을 줍니다:

padding-inline: max(20px, calc((100% - 1180px) / 2))

백분율은 요소의 부모를 기준으로 계산되고, 여기서 그것은 페이지 본문이며 스크롤 막대를 포함하지 않습니다. 1180픽셀 아래에서는 첫 번째 값이 이기고, 띠는 음수 대신 20픽셀의 알맞은 여백을 유지합니다. 두 번째 감싸개도, 자바스크립트도, 실행 중에 잴 것도 없습니다.

어디에 적용되는가

첫 페이지, 소개 페이지, 그리고 모든 통계 페이지입니다. 셋 다 같은 구조이고, 그것이 목적이었습니다.