배경 레이어가 그리드 안에서 561px 로 잘리던 것을 고친다

절대배치인데도 배경이 화면 가운데 561px 띠로만 깔렸다.
.section 은 subgrid 이고 `.section > * { grid-column: main }` 이 걸려 있는데,
절대배치 요소라도 그리드 영역이 잡히면 그 영역이 컨테이닝 블록이 된다.
position: absolute 는 그리드에서 배치를 면제해주지 않는다.

그리고 overflow: visible 이라 위아래 14% 여유분이 이웃 섹션으로 넘쳤다 —
조판 섹션의 종이가 프리플라이트 하단에 밝은 회색 띠로 나타났다.

  .bg-photo { grid-column: full }
  .has-bg   { overflow: clip }

띠 폭 기준으로 잡았던 투명도도 다시 올렸다
  사례 0.3 -> 0.5 · 프리플라이트 0.55 -> 0.8
  재료 0.5 -> 0.6 · 설치 0.4 -> 0.55

1440px/390px 실렌더: 배경 5개 모두 전체 폭, 가로 스크롤 0.
화면 밖 섹션의 배경은 아직 로드되지 않는다 — lazy 가 의도대로 작동한다.
This commit is contained in:
Yun Chan 2026-08-20 15:44:15 +09:00
parent 2bb1da9ce9
commit 5a18806fb6
6 changed files with 21 additions and 4 deletions

View file

@ -426,7 +426,16 @@ a:hover { color: var(--accent); }
.has-bg {
position: relative;
isolation: isolate;
/* 배경 레이어는 위아래로 14% 삐져나온다(패럴랙스 여유).
clip 하지 않으면 삐져나온 부분이 이웃 섹션 위에 얹힌다
조판 섹션의 종이가 섹션 하단에 밝은 띠로 나타났다. */
overflow: clip;
}
/* 섹션은 subgrid 이고 `.section > *` 전부 main 칼럼(561px) 배치된다.
절대배치라도 그리드 영역이 잡히면 그게 컨테이닝 블록이 되므로,
배경이 화면 가운데 561px 띠로만 깔렸다. 전체 폭으로 되돌린다. */
.bg-photo { grid-column: full; }
.bg-grid::before,
.bg-glow::before {
content: "";