티스토리 뷰
리액트(부트)스트랩의 가장 큰 특징은 "모바일 우선" 이라는 것입니다.
공식 홈페이지에 레이아웃에 보면 큰 설명은 안 되어있지만 대략 레이아웃을 잡는데 Container, Row, Col 컴포넌트를 이용하면 된다고 나와있습니다.
Container 컴포넌트를 쓴다면 전체를 감싸는데 사용할 것이고, 중요한 것은 Row와 Col 컴포넌트 입니다. Row는 줄을 나누는 것이고, Col이 그 안에서 공간을 나눕니다.
위와 같은 코드가 있다면 아래와 같이 나타납니다.
Row와 Col
정확히 3등분으로 나눠지게 됩니다. 즉 다른 코드를 추가하지 않는다면 Row 컴포넌트 안에 Col 컴포넌트의 개수만큼 나눠진다는 것이죠. 너비가 달라져도 똑같은 크기를 가지게 됩니다.
크기 다르게 주기
리액트스트랩과 부트스트랩은 주어진 공간을 12개로 나눕니다. Col의 크기를 이에 맞게 줄 수 있습니다. 즉 하나는 주어진 공간에서 6/12을 차지하고, 나머지 둘은 3/12씩 차지할 수 있게 줄 수 있는 것이죠.
그리고 화면 크기에 따라서도 공간을 쉽게 적용시킬 수 있습니다.
화면의 크기는 xs, sm, md, lg, xl 순으로 구성됩니다. 거기에 차지할 공간만큼의 숫자를 넣어주면 되는 것이죠. 설명이 너무 길었나요?
해당 코드를 작성하면 md 크기 부터는 6:3:3의 비율로 만들어집니다. "모바일 우선"이라는 말은 이때 중요합니다. 저렇게 공간을 지정해주면 모바일(xs)에서는 각 칸이 12개로 나타나다가, 지정한 크기부터(위의 경우엔 md) 해당 비율로 공간을 가지게 됩니다. 이 점만 주의하면 레이아웃을 짜는 일은 그렇게 어렵지 않습니다.
왜 12일까요?
보통 프론트엔드 웹 프레임워크의 경우 저렇게 공간을 줄 수 있다면 12로 된 것들이 많습니다. 왜 12일까요? 그건 12라는 숫자가 그 주위의 숫자들에 비해 똑같이 나눠지는 수가 많기 때문입니다. 1개씩 이라면 12, 2개씩 이라면 6, 3개씩 이라면 4, 4개씩 이라면 3, 6개씩 이라면 2개, 12라면 1개로 사용할 수 있죠. 똑같은 비율로 나눠질수록 레이아웃 공간을 나누는 것이 더 쉬워지게 됩니다. 그래서 12라는 숫자를 사용하는 것이죠.
'Frontend-dev > react' 카테고리의 다른 글
리액트스트랩 시작하기 (0) | 2019.01.03 |
---|---|
react-native의 세팅을 도와주는 expo 이용해보기 (0) | 2018.12.23 |
리액트 라우터 v4의 switch 알아보기 (0) | 2018.12.06 |
리액트 라우터로 path와 querystring 받아오기 (0) | 2018.12.06 |
리액트의 라우터 v4를 알아봅시다. (0) | 2018.12.06 |
댓글