🌠중단점(Breakpoint) 설정하기

프로젝트별로 중단점을 설정하는 방법을 알아봅니다.

프로젝트를 시작하기 전에는 디바이스 별 중단점(Breakpoints)을 먼저 설정해야 합니다. 일반적으로는 Mobile, Tablet, PC 별로 중단점을 설정하지만 Laptop, Small PC, Large PC 등에 대한 반응형 디자인도 고려해야 합니다. 이 경우에는 기획 및 디자인 과정에서 컨펌을 받고 진행하는 것이 좋습니다.

** 복잡한 UI, Interaction design인 경우에는 적응형 웹을 고려할 수 있습니다. eg. Naver

Examples

Large PC / PC / Tablet / Mobile 세 버전의 디바이스에 대한 셋팅 값입니다. 각 프로젝트별로 디자인되어있는 반응형 디바이스 width 기준으로 분기처리를 해주어야 합니다.

Container width by devices

Breakpoints는 미디어 쿼리 min-width를 기준으로 설정되므로, Device width ≥ '1480px' 인 경우는 breakpoints['lg']에 해당됩니다.

* 반응형 적용은 배열 혹은 오브젝트 방식으로 적용할 수 있습니다. Use Cases 에서 확인해주세요.

Basic Setting

//styles/theme/foundations/breakpoints.ts
const breakpoints = {
  // base <780px
  base: '0px',
  sm: '780px', // ≥780px
  md: '980px', // ≥980px
  lg: '1280px', // ≥1280px
  xl: '1480px', // ≥1480px
  '2xl': '1920px', // ≥1920px
};

New Setting

// 예시의 프로젝트에서는 Width : '980px' 의 컨테이너를 지원하지 않고 있기 때문에 
// medium breakpoint를 '1280px'로 설정해주었습니다.  
const breakpoints = {
  // base <780px
  base: '0px',
  sm: '780px', // ≥780px
  md: '1280px', // ≥1280px
  lg: '1480px', // ≥1480px
  xl: '1480px', // 
  '2xl': '1480px, // 
};

Breakpoints 와 Container를 배열로 적용하기 위해서는 [base, sm, md, lg, xl, '2xl'] 모든 키값을 입력해주어야합니다.

Use Case 1 (Array Syntax)

// 배열로 적용하기
  <Box
    w={[
      '10px', // base <780px
      '30px', // sm ≥780px
      '48px', // md ≥1280px
      '62px', // lg ≥1480px
    ]}
  >
    This is a responsive box
  </Box>
  

Breakpoints 와 Container를 배열로 적용하기 위해서는 [base, sm, md, lg, xl, '2xl'] 모든 키값을 입력해주어야합니다.

Use Case 1 (Object Syntax)

// 오브젝트로 적용하기
  <Box
    w={{
        base:'5px', // base <780px
        sm:'10px',  // sm ≥780px
        md:'20px'   // md ≥1280px
        lg:'30px'   // lg ≥1480px
      }}
  >
    This is a responsive box
  </Box>  
  

Breakpoints 와 Container를 배열로 적용하기 위해서는 [base, sm, md, lg, xl, '2xl'] 모든 키 값을 입력해주어야합니다.