Responsive Web

• Bootstrap grid system

웹 페이지의 레이아웃을 조정하는 데 사용되는 12개의 컬럼으로 구성된 시스템

레이아웃 배치의 기준이 12개의 컬럼인 것!

반응형 디자인을 지원하여 웹 페이지를 데스크탑, 모바일, 태블릿 등 다양한 기기에서 적절하게 표시할 수 있도록 도와주기 위함.

왜 하필 12개인가?

→ 그리 크지 않은 적당한 숫자 중에서 약수가 많아서 컬럼을 나누어 배치하기 좋은 숫자이기 때문이다.

그래서 보통 12개의 컬럼으로 나누어 시스템을 구성한다.

 

• 반응형 웹 디자인

디바이스 종류나 화면 크기에 상관없이, 어디서든 일관된 레이아웃 및 사용자 경험을 제공하는 디자인 기술

 

• grid system의 기본 요소

container → 컬럼을 포함하는 영역

column → 실제 콘텐츠를 담는 영역

gutter → 컬럼 사이의 공백

• grid system nest (중첩)
• grid system offset (상쇄)

 

• Gutters

Grid system에서 컬럼 사이의 여백 영역이다.

x축은 padding, y축은 margin으로 여백 생성한다.

 

• Grid System

CSS가 아닌 편집 디자인에서 나온 개념이다.

구성 요소를 잘 배치해서 시각적으로 좋은 결과물을 만들기 위함

기본적으로 안쪽에 있는 요소들의 오와 열을 맞추는 것에서 기인함.

정보 구조와 배열을 체계적으로 작성하여 정보의 질서를 부여하는 시스템

container > row > column

 

• breakpoints

웹 페이지를 다양한 화면 크기에서 적절하게 배치하기 위한 분기점

화면 너비에 따라 6개의 분기점 제공 (xs, sm, md, lg, xl, xxl)

각 point 마다 설정된 최대 너비 값 이상으로 화면이 커지면 grid system 동작이 변경된다.

6개의 분기점을 모두 설정할 필요는 없고 중간에 몇개의 분기점은 설정하지 않고 생략 가능

카드 컴포넌트는 너무 자주 써서 따로 그리드 시스템이 마련되어 있다.

row - cols - ? : 행당 표시할 카드 수