CSS containment와 @container

✒️ 2025-05-02 16:07 내용 수정

참고 자료 :
mdn web docs Using CSS containment, mdn web docs Using container size and style queries

containment

css에서 containment는 container와 그 하위 트리를 페이지의 나머지 부분과 분리시키며, 이를 이용해 독립적으로 스타일 및 페인팅을 적용할 수 있다.
개발 시 contain 속성이나 content-visibility를 사용하여 사용자 에이전트(브라우저)에 특정 요소를 렌더링할지, 화면 밖에 있을 때도 렌더링할 지 알려줄 수 있다.
container 내의 속성이 외부와 단절되 있기에 브라우저는 container 영역의 레이아웃과 스타일을 처리할 수 있고, 외부의 레이아웃 및 스타일이 변경될 때 container 내부 요소를 건드리지 않을 수 있다.
- 레이아웃은 보통 전체 문서 범위에 종속되어 있어 요소 하나를 움직이면 문서 전체의 레이아웃을 모두 변경해야 한다.

contain 속성

참고 자료 : mdn web docs css contain

CSS에서 contain 속성은 요소와 그 내용이 문서 트리(document tree)의 나머지와 분리됨을 표시한다.
독립적으로 동작하기에 레이아웃이나 페인팅 등의 계산을 전체 페이지가 아닌 하위 DOM 트리에 제한하기 때문에 성능적 측면에서 이점을 볼 수 있다.
컨테이너 내부에서 contain으로 지정된 속성의 변화는 container 외부로 전파되지 않는다.
때문에 브라우저가 DOM이나 페이지를 자주 리렌더링 하지 않을 수 있어 정적 페이지 렌더링이나 동적 어플리케이션에서 퍼포먼스를 향상시킬 수 있다.

속성값	설명
`none`	요소가 일반적으로 렌더 됨 `contain`에 의한 변화 없음
`strict`	모든 containment 규칙이 요소에 적용됨
`content`	`size`를 제외한 모든 containment 규칙이 적용됨
`size`	자식 요소를 무시하고 요소 자체의 크기를 계산.
`inline-size`	자식 요소를 무시하고 요소의 크기를 계산.
`layout`	내부 요소의 레이아웃이 나머지 페이지의 레이아웃과 분리되어 서로 영향을 주지 않음.
`style`	요소와 자식 요소에 영향을 주는 속성들이 container 내부에만 영향을 줌. CSS counter가 요소 내에서 변경되어 나머지 트리에 영향을 주는 경우를 방지할 때 사용.
`paint`	자식 요소들이 요소의 경계 밖으로 표시되지 않음

contain: none;
/* contain: size layout paint style; 과 동일 */
contain: strict;
contain: content;
contain: size;
contain: inline-size;
contain: layout;
contain: style;
contain: paint;

div {
	content: paint;
}

article {
	contain: size;
	contain-intrinsic-size: 100px 200px;
}

1. `size`와 `inline-size`

size : 자식 요소를 무시하고 요소 자체의 크기를 계산한다.
- inline과 block 방향에 적용된다.
- inline-size와는 결합하여 사용할 수 없다.
- contain-intrinsic-size, contain-intrinsic-width, contain-intrinsic-heigth 속성으로 사이즈 지정
  - (적용에는 문제가 조금 있는듯)
inline-size : 자식 요소의 크기를 무시하고 요소 자체의 크기를 계산한다.
- size와는 결합하여 사용할 수 없다.

<div class="container">
	<header>
		<h2>contain: size</h2>
	</header>
	<div class="contents">
		<div class="box">
			<div class="child">
				<p>일반 설정</p>
				<!-- 생략 -->
			</div>
		</div>
		<div class="box box1">
			<div class="child">
				<p>contain:size</p>
				<!-- 생략 -->
			</div>
		</div>
	</div>
</div>
<div class="container">
	<header>
		<h2>contain: inline-size</h2>
	</header>
	<div class="contents">
		<div class="box">
			<div class="child">
				<p>일반 설정</p>
				<!-- 생략 -->
			</div>
		</div>
		<div class="box box2">
			<div class="child">
				<p>contain:inline-size</p>
				<!-- 생략 -->
			</div>
		</div>
	</div>
</div>

.child {
    background-color: rgba(0, 128, 96, 0.2);
    margin-top: 10px;
    padding: 5px;
}

.box1 {
	contain: size;
}

.box2 {
	contain: inline-size;
}

css_contain 1.png

2. `layout`

내부 요소의 레이아웃이 나머지 페이지의 레이아웃과 분리되어 서로 영향을 주지 않는다.

<div class="container">
	<header>
		<h2>contain: layout</h2>
	</header>
	<div class="contents">
		<div class="box">
			<div class="child">
				<p class="fixed-text">일반 설정</p>
				<!-- 생략 -->
			</div>
		</div>
		<div class="box box3">
			<div class="child">
				<p class="fixed-text">contain: layout</p>
				<!-- 생략 -->
			</div>
		</div>
	</div>
</div>

.box3 {
    contain: layout;
}

.fixed-text {
    padding: 3px;
    position: fixed;
    right: 5px;
    background-color: yellow;
    border: 1px solid orange;
}

.floated-text{
    float: right;
    padding: 3px;
    background-color: lightgreen;
    border: 1px solid green;
}

css_contain 2.png

3. `paint`

자식 요소들이 경계 밖으로 표시되지 않고, 자식 요소가 경계 밖으로 나갈 시엔 경계 부근까지만 표시된다.(clipped)
overflow되는 요소가 보이지 않는다.

<div class="container">
	<header>
		<h2>contain: paint</h2>
	</header>
	<div class="contents">
		<div class="box">
			<div class="child">
				<p>일반 설정</p>
				<!-- 생략 -->
			</div>
		</div>
		<div class="box box4">
			<div class="child">
				<p>contain: paint</p>
				<!-- 생략 -->
			</div>
		</div>
	</div>
</div>

.box4 {
    height: 140px;
    contain: paint;
}

css_contain 3.png

content-visibility

content-visibility 속성은 해당 요소의 컨텐츠를 모두 렌더링할지 정할 수 있다.
- 설정 시 사용자 에이전트가 해당 요소가 필요하기 전까지 렌더를 스킵할 수 있어 초기 페이지 로드 시간을 단축시킬 수 있다.
내부 요소가 많은 부모 요소 container가 주로 화면 밖에 위치하는 경우라면 contain-visibility: auto 속성을 사용하여 필요시에만 컨텐츠를 표시하도록 설정할 수 있다.
사용자와 연관된 컨텐츠로 인식되는 경우는 요소가 뷰포트에 보일 때, 포커스나 선택(select), 그리고 상위 레이어에 표시될 때이며, 이 경우 content-visibility: auto는 요소의 컨텐츠를 보여준다.

속성값	설명
`visible`	기본 설정 요소의 컨텐츠가 평소처럼 배치 및 렌더됨
`hidden`	요소의 컨텐츠를 스킵 탭 이동이나 선택 및 포커스로도 접근 불가능
`auto`	`contain: content` 설정처럼 동작 사용자와 연관된 컨텐츠라면 표시하고 아니면 숨김 `hidden`과 달리 탭 이동, 선택, 포커스로 접근 가능

<div class="container">
	<header>
		<h2>content-visibility: hidden</h2>
	</header>
	<div class="contents">
		<div class="box">
			<div class="child">
				<p>일반 설정</p>
				<p>요소의 컨텐츠 렌더 여부 설정</p>
			</div>
		</div>
		<div class="box box6">
			<div class="child">
				<p>content-visibility: hidden</p>
				<p>요소의 컨텐츠 렌더 여부 설정</p>
			</div>
		</div>
	</div>
</div>

.box6 {
    content-visibility: hidden;
}

css_contain 4.png

container 속성

참고 자료 : mdn web docs CSS container, mdn web docs CSS container-type

container query에서 containment context를 선언하기 위해 사용하는 속성이다.
container-name 속성과 container-type 속성을 모두 지정할 수 있는 축약 속성이다.

div {
/* container-name / container-type */
	container: my-box / size;
}

container-type 속성

container query에서 containment context를 선언하기 위해 사용하는 속성이다.
container의 타입을 지정한다.
- size : 일반적인 size나 inline-size 조건에 기반하여 container의 자식 요소에 CSS를 선택적으로 적용한다.
  - 최대/최소 길이, 비율, 방향 등
- scroll-state : 스크롤 상태 조건에 기반하여 container의 자식 요소에 CSS를 선택적으로 적용한다.
container-name과 container-type을 사용하면 contain: style layout이 자동으로 적용된다.

속성값	설명
`normal`	기본값 container style queries에 적용되며 container size query에는 query container로 사용 X
`size`	`size`와 `inline-size` 차원에 대한 query container 생성
`inline-size`	`inline` 축에 대한 query container 생성
`scroll-state`	`scroll-state`에 대한 query container 생성 요소의 크기는 독립적으로 계산되지 않음(containment 적용X)

div {
	container-type: inline-size;
}

.container {
	container-name: scroll-box;
	container-type: scroll-state;
}

@container

참고 자료 : mdn web docs CSS container queries, mdn web docs css @container

@container를 사용하면 해당 container에 특정 속성을 설정할 수 있다.
- @media query의 또 다른 종류로 viewport 사이즈나 다른 장치 특성에 따른 요소의 스타일을 적용할 수 있다.
@container를 사용하려면 먼저 containment context를 선언해야 하며, container-type 속성을 사용하여 선언할 수 있다.

<div class="post">
	<div class="card">
		<h2>Card title</h2>
		<p>Card content</p>
	</div>
</div>

.post {
	width: 50%;
	padding: 10px;
	container-type: inline-size;
	border: 1px solid black;
}

/* .post의 최소 너비가 500px일 때 제목 색 변경 */
@container (min-width: 500px) {
	.card h2{
		color: red;
	}
}

css_container_query 1.png

css_container_query 2.png

container-name을 지정하여 해당 container에 container-query를 적용할 수 있다.

.post {
	/* container : post / inline-size; */
	container-name: post;
	container-type: inline-size;
	border: 1px solid black;
}

/* container-name이 post인 container에 적용 */
@container post (min-width: 500px) {
	.card h2{
		color: red;
	}
}

container의 하위 요소에선 query container를 기준으로 한 길이 단위를 사용할 수 있다.
적용 가능한 query container가 없는 경우엔 container query 길이 단위는 해당 축의 small viewport unit(sv*)를 기준으로 적용된다.

단위	설명
`cqw`	query container 너비의 1%
`cqh`	query container 높이의 1%
`cqi`	query container의 inline-size의 1%
`cqb`	query container의 block-size의 1%
`cqmin`	`cqi`와 `cqb` 중 더 작은 값
`cqmax`	`cqi`와 `cqb` 중 더 큰 값

.post p{
	/* query container 폭의 50% */
	width: 50cqw;
	border: 1px solid red;
}

css_container_query 3.png

containment

contain 속성

1. size와 inline-size

2. layout

3. paint

content-visibility

container 속성

container-type 속성

@container

1. `size`와 `inline-size`

2. `layout`

3. `paint`