antd로 반응형 만들기

사이트의 화면 크기를 줄이고 늘려보면 창의 크기에 따라서 배치가 바뀌는 것을 쉽게 볼 수 있다.

 

이번에 antd에서 반응형 디자인을 한 번 사용해 본다.

 

grid 사용하는 방법

https://4x.ant.design/components/grid/

Grid - Ant Design

 

 

xs: 모바일

sm: 태블릿

md: 작은 데스크탑

이렇게 각 단위마다 화면크기가 정해져 있다.

 

또 반응형을 만들 때는 모바일 => 태블릿 => 데스크탑 순으로 작은 화면부터 큰 화면 순서로 만드는 것이 편하다.

 

 

antd에서 반응형을 사용하기 위해 코드를 작성했다.

      <Row gutter={8}>
        <Col xs={24} md={6}>
          {isLoggedIn ? <UserProfile/> : <LoginForm/>}
        </Col>
        {/*모바일일때는 24칸을 다 차지 전체칸은 24칸*/}
        <Col xs={24} md={12}>
          {children}
        </Col>
        <Col xs={24} md={6}>
          <a
            href="https://jun6060.tistory.com/"
            target="_blank"
            rel="noreferrer noopener"
          >
            Made by SeongJun
          </a>
        </Col>
      </Row>

화면의 총비율을 24칸으로 쪼게 져 있고 xs={24}의 의미는

24칸 중 모바일 비율일 때 24칸을 차지한다는 의미이다.

 

gutter={8}은 각 컬럼 사이에 8만큼의 공간을 준다는 의미이다.

 

모바일

 

작은 데스크탑

이렇게 비율에 따라 차지하는 공간이 달라진다.