센터

센터 (Center)

자식을 자신의 안에서 가운데 정렬할 때 사용하는 컴포넌트예요. Center, Square, Circle을 함께 사용해 다양한 가운데 정렬 패턴을 만들 수 있어요.

출처: 문서

본문

사용법 (Usage)

import { Center, Circle, Square } from "@chakra-ui/react"

<Center bg="tomato" h="100px" color="white">
  This is the Center
</Center>

예제 (Examples)

아이콘 (Icon)

Center는 아이콘이나 숫자 주변에 프레임을 만들 때 사용할 수 있어요.

인라인 센터 (Center with Inline)

inline prop을 사용하면 Center가 블록 레벨 요소(display: flex) 대신 인라인 요소(display: inline-flex)처럼 동작해요. 이렇게 하면 Center가 콘텐츠가 필요한 만큼의 너비만 차지해서, 링크, 버튼 또는 다른 인라인 컨텍스트 안에 레이아웃을 깨뜨리지 않고 들어갈 수 있어요.

사각형 (Square)

Square는 너비와 높이가 같은 고정 크기 컨테이너 안에서 자식을 가운데 정렬해요. 너비와 높이를 같은 값으로 설정하는 size prop을 받아요.

원 (Circle)

Circle은 Square에 borderRadius="9999px"를 추가해 완벽한 원을 만들어요. Square와 마찬가지로 너비와 높이를 같은 값으로 설정하는 size prop을 받아요.

Props

Center

Square

Circle

Circle은 Square를 확장하며 모든 동일한 prop을 받아요. 유일한 차이는 Circle이 borderRadius="9999px"를 적용한다는 점이에요.

더 알아보기 (Learn more)