Box란?

공식 문서에 따르면, Box는 다음과 같다.

Box is the most abstract component on top of which all other Chakra UI components are built. By default, it renders a div element

즉, Box는 Chakra UI의 모든 다른 컴포넌트들 보다 Top(맨 위)에 위치하는 추상 컴포넌트이고, div 태그를 의미한다.

Container란?

Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid.

즉, Container는 안의 내용물(content)을 유동적으로 유지하면서 이의 너비를 '현재 중단점(?)'으로 제한하는 데 사용한다.

여기서 Breakpoint가 무엇인지 몰라 찾아보니, 아래와 같다.

Breakpoint는 반응형 레이아웃이 뷰포트 크기 또는 기기에서 어떻게 작동 할지 결정하는 사용자가 정의 가능한 넓이이다.

Breakpoint

Chakra-ui 에서 제공하는 Breakpoints는 다음과 같다.

const breakpoints = {
  sm: '30em', // 480px
  md: '48em', // 768px
  lg: '62em', // 992px
  xl: '80em', // 1280px
  '2xl': '96em', // 1536px
}

위의 영어때기의 용어의 의미는 다음과 같다.

sm	md	lg	xl	2xl
Small	Medium	Large	Extra large	Extra extra large