광고 게재 공간 예약

레이아웃 변경을 최소화하려면 페이지에 광고를 위한 충분한 공간을 확보하는 것이 중요합니다. 이 예에서는 공간 예약에 관한 다양한 접근 방식과 레이아웃 안정성에 미치는 영향을 보여줍니다.

  • 예약된 공간 없음: 광고 슬롯 컨테이너에 크기가 지정되지 않았습니다. 컨테이너는 접힌 상태로 시작해서 광고가 채워질 때 확장되어 사용자에게 표시되는 레이아웃 변경을 일으킵니다.
  • 예약된 공간: 광고 슬롯 컨테이너에 크기가 지정됩니다. 컨테이너는 항상 페이지에서 일정한 공간을 차지하므로 레이아웃이 이동하지 않습니다. 광고가 로드되기 전에 빈 공간이 보입니다.
  • 자리표시자가 예약된 공간: 광고 슬롯 컨테이너에 측정기준이 지정됩니다. 컨테이너가 페이지에서 일정한 공간을 차지하므로 레이아웃이 바뀌지 않습니다. CSS는 광고가 로드되기 전에 빈 공간이 보이지 않도록 빈 컨테이너의 스타일을 지정하는 데 사용됩니다.

샘플 구현

데모 보기