Surface

화면의 층(바탕·종이·오버레이) 원시 요소.

개요

미리보기

예시 언어동작 줄이기

내용에 집중하는 면

level

padding

as

children

이렇게 층은 세 단계만 쓴다. 구분은 채움으로 하고 그림자는 떠 있는 층에만 둔다. 반투명 층 위의 글자는 최악 합성 지점에서 대비를 잰다.
이렇게 층과 여백은 따로 고른다. 의미가 필요하면 Card나 Section을 쓴다.
이렇게 하지 않기 면을 세 겹 넘게 겹치지 않는다.
이렇게 하지 않기 색 면으로 상태를 표현하지 않는다.

이름	타입	기본값	설명
`level?`	`'canvas' \| 'paper' \| 'overlay'`	`paper`	층. canvas = 페이지 바탕, paper = 내용 면, overlay = 떠 있는 면. 반전(inverse) 면은 없다.
`padding?`	`'none' \| 'sm' \| 'md' \| 'lg'`	`md`	안쪽 여백 0 / 16 / 24 / 32px(간격 토큰).
`as?`	`'div' \| 'section' \| 'article' \| 'aside'`	`div`	렌더 요소. section·article이면 aria-labelledby로 제목을 연결한다.
`children?`	`ReactNode`	`내용에 집중하는 면`	내용.
그 밖의 속성	—	—	id, aria-*, lang, dir 등 네이티브 속성은 그대로 전달된다. className·style은 받지 않는다.

예시

이렇게 · 이렇게 하지 않기

이렇게 층은 세 단계만 쓴다. 구분은 채움으로 하고 그림자는 떠 있는 층에만 둔다. 반투명 층 위의 글자는 최악 합성 지점에서 대비를 잰다.

이렇게 층과 여백은 따로 고른다. 의미가 필요하면 Card나 Section을 쓴다.

이렇게 하지 않기 면을 세 겹 넘게 겹치지 않는다.

이렇게 하지 않기 색 면으로 상태를 표현하지 않는다.

토큰과 속성

이름	타입	기본값	설명
`level?`	`'canvas' \| 'paper' \| 'overlay'`	`paper`	층. canvas = 페이지 바탕, paper = 내용 면, overlay = 떠 있는 면. 반전(inverse) 면은 없다.
`padding?`	`'none' \| 'sm' \| 'md' \| 'lg'`	`md`	안쪽 여백 0 / 16 / 24 / 32px(간격 토큰).
`as?`	`'div' \| 'section' \| 'article' \| 'aside'`	`div`	렌더 요소. section·article이면 aria-labelledby로 제목을 연결한다.
`children?`	`ReactNode`	`내용에 집중하는 면`	내용.
그 밖의 속성	—	—	id, aria-*, lang, dir 등 네이티브 속성은 그대로 전달된다. className·style은 받지 않는다.