Integrate

반응형 레이아웃

스트립이 1열, 2열, 3열 중 어느 것을 선택하는지, 그리고 패널 크기가 어떻게 결정되는지 설명합니다.

스트립은 패널마다 캔버스 하나씩 배치된 격자이며, 열 개수는 컨테이너 너비가 바뀔 때마다 새로 계산됩니다. 어떤 값도 저장되지 않습니다. 엘리먼트에 붙은 ResizeObserver가 레이아웃을 다시 실행하고 영향을 받은 패널을 다시 그립니다.

직접 시험해 보기

결정 방식

패널의 기본 크기는 400 × 340 CSS 픽셀이고 최대 열 수는 3입니다. 너비가 w 픽셀이고 거터가 10px인 컨테이너에서는 다음 순서로 결정됩니다.

1. 기본 너비의 85% 이상인 패널이 w에 몇 개나 들어가는지 세되, 3을 넘지 않습니다.
2. w를 그 개수만큼의 열로 나눕니다.
3. 패널은 기본 크기보다 커지지 않습니다. 나눈 몫이 400px보다 넓으면 패널은 400px을 유지하고 행 전체가 가운데 정렬됩니다.
4. 열 하나라도 기본 크기보다 좁아지면, 단일 패널이 그 너비에 맞춰 축소됩니다.

따라서 700px 안팎의 블로그 칼럼에서는 약 345px 패널 2열이 나오고, 약 1060px 이상의 전체 너비 섹션에서는 기본 크기 패널 3열이 나오며, 폰에서는 축소된 1열이 나옵니다.

선명도

각 캔버스는 width × devicePixelRatio 크기의 백킹 스토어를 갖고 있어서, 2배 디스플레이는 2배 비트맵을 받습니다. 페이지를 확대하면 레이아웃과 렌더링이 다시 일어나며, 확대된 비트맵을 그대로 늘려 쓰는 부분은 없습니다.

화면 밖 패널

패널은 화면에 보이는 영역에서 한 뷰포트 이내에 있을 때만 그려지고, 멀리 스크롤되면 비트맵이 해제됩니다. 패널 50개짜리 스트립도 독자 근처의 몇 개만큼의 메모리만 사용합니다. 도구 작업 시 주의할 점은, 전체 페이지 스크린샷을 찍으면 아직 그려지지 않은 패널이 검은 상자로 나타난다는 것입니다. 먼저 해당 패널을 스크롤해서 화면에 들어오게 하세요.

임베딩 시 유의사항

• 엘리먼트에 해당 열의 전체 너비를 부여하세요. display: block이며 자신의 박스를 스스로 측정합니다.
• 높이는 지정하지 마세요. 높이는 열 개수에 따라 자동으로 결정됩니다.
• 캔버스 자체에는 스타일을 적용하지 마세요. 여백이나 테두리, 배경은 래퍼(wrapper)에 적용하세요.