긴 화면에서 화면 밖 영역의 렌더링 비용을 줄이려 합니다. contain과 content-visibility는 레이아웃·접근성에 어떤 영향을 주나요?
꼬리 질문을 독립 문항으로 확장했습니다. 원래 문항에서 맥락 보기 →
잠깐, 답변을 보기 전에
먼저 내 말로 설명해 볼까요?
답변과 점검 포인트 펼치기답변 접기
01
구두 답변
정의를 외우기보다, 원리와 조건을 연결해 설명해 보세요.
contain은 레이아웃·페인트·크기 영향의 범위를 제한하고 content-visibility는 조건에 따라 하위 렌더링 작업을 건너뛸 수 있게 합니다. 어떤 containment가 적용되는지와 자리 크기를 어떻게 유지하는지 확인해야 합니다.
화면 밖 영역에 contain-intrinsic-size 등으로 적절한 공간을 제공하면 스크롤 점프를 줄일 수 있습니다. 무조건 숨겨 접근성 트리·검색·포커스를 깨지 않는지 실제 브라우저에서 확인합니다. 콘텐츠를 아직 렌더링하지 않아도 DOM·데이터·JS 비용이 모두 사라지는 것은 아닙니다.
02
득점 포인트
이해가 드러나는 지점을 확인해 보세요.
- contain은 레이아웃·페인트·크기 영향의 범위를 제한하고 content-visibility는 조건에 따라 하위 렌더링 작업을 건너뛸 수 있게 합니다. 어떤 containment가 적용되는지와 자리 크기를 어떻게 유지하는지 확인해야 합니다.
- 콘텐츠를 아직 렌더링하지 않아도 DOM·데이터·JS 비용이 모두 사라지는 것은 아닙니다.
03
감점 포인트
놓치기 쉬운 조건과 오해를 짚어 보세요.
- 다음 핵심 구분을 반대로 설명하거나 성립 조건을 생략한다: contain은 레이아웃·페인트·크기 영향의 범위를 제한하고 content-visibility는 조건에 따라 하위 렌더링 작업을 건너뛸 수 있게 합니다.
04
더 파고들 거리
하나 더 질문하며 이해의 범위를 넓혀 보세요.
득점·감점 포인트는 학습용 자기 점검 기준이며, 특정 회사의 실제 채점표가 아닙니다.
원리부터 공부하고 싶다면
답변을 보충하는 개념·예제·슈도코드를 읽어 보세요.