좌충우돌 anecdote

React-Native에서는 비율대로 잡아주고, style 속성에서 width, height을 지정해줬다.

하지만, Reactstrap에서는 xs, sm, md, lg 속성으로 이해가 안되는 부분들이 있어 하나씩 정리해보았다. 😀

Reactstrap의 가장 큰 특징은 "모바일 우선"이라는 것이다.

1. Grid Class

매우 작은 기기 (ex. 모바일) - 너비가 768px 미만 - xs

작은 기기 (ex. 태블릿) - 너비가 768px 이상 - sm

중간 기기 (ex. 노트북) - 너비가 992px 이상 - md

큰 기기 (ex. 노트북/데스크탑) - 너비가 1200px 이상 - lg

2. Layout

Container, Row, Col 을 이용하여 콘텐츠를 레이아웃하고 정렬한다.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function ContainerExample() {
  return (
    <Container>
      <Row>
        <Col>1 of 1</Col>
      </Row>
    </Container>
  );
}

export default ContainerExample;

여기서 Container에 fluid 속성을 주면, 디바이스 크기에 따라 100% 비율로 맞춰진다.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function ContainerFluidExample() {
  return (
    <Container fluid>
      <Row>
        <Col>1 of 1</Col>
      </Row>
    </Container>
  );
}

export default ContainerFluidExample;

fluid 속성에는 sm, md, lg, xl, xxl로 크기를 다르게 지정할 수 있다.

return (
      <Container>
        <Row>
          <Col className="item" md="6">
            col
          </Col>
          <Col className="item" md="3">
            col
          </Col>
          <Col className="item" md="3">
            col
          </Col>
        </Row>
      </Container>
    );

md 크기부터는 6:3:3 비율로 만들어진다.

여기서 중요한 것은, Reactstrap은 모바일 우선이기 때문에, xs 즉, 작은 기기에서는 각 칸의 12개로 나타나다가 지정한 크기(md) 부터는 해당 비율로 공간을 차지하게 된다. 

Reactstrap에서는 비율을 이렇게 지정하는구나!