그리드 시스템 의 이해

그리드 시스템 에 대해 논의한다.
무슨 시사 그리드?
위키피디아의 설명:
그래픽 디자인에서 그리드(grid)는 다음과 같은 일련의 구조(일반적으로 2차원)로 이루어진 구조이다.
내용을 구조화하는 데 사용되는 직선(직선, 수평)을 교차합니다. 널리 퍼져 있다.
인쇄 설계의 레이아웃 및 내용 구조를 설계하는 데 사용됩니다. 웹 디자인에서, 그것은 매우
HTML을 사용하여 빠르고 효과적으로 일관된 레이아웃을 만드는 효과적인 방법 그리고

그리드 시스템

CSS.
간단한 말로 표현하자면, 웹 디자인의 그리드는 내용을 구성하고 구조화하며,
웹 사이트는 검색하기 쉽고 사용자의 인지 부하를 줄입니다.
BootstrapGridSystem이란?
그리드 시스템 용 부트스트랩의 공식 문서에서 알 수 있듯이:
부트스트랩은 적절히 확장되는 대응성, 이동성 최초의 유체 그리드 시스템을 포함한다.
장치 또는 뷰포트 크기가 증가함에 따라 최대 12개 열까지 지정할 수 있습니다. 여기에는

미리 정의된 클래스가 포함됩니다.
보다 의미 있는 레이아웃을 생성하기 위한 강력한 믹스인뿐만 아니라 쉬운 레이아웃 옵션도 제공합니다.
위의 문구를 이해하자. 부트스트랩 3은 다음과 같은 의미에서 먼저 이동성이 있다.
Bootstrap을 위한 코드는 이제 모바일 기기, 태블릿, 같은 작은 화면을 목표로 하는 것으로 시작한다.
노트북, 데스크톱과 같은 대형 화면을 위한 부품 및 그리드를 “구축”합니다.


그리드 시스템 의 모바일 우선 전략


■ 내용
o 무엇이 가장 중요한지 결정한다.
■ 레이아웃
o 먼저 더 작은 너비로 디자인합니다.
o 기본 CSS 주소 모바일 장치 먼저; 미디어는 태블릿에 대한 주소를 쿼리합니다.
데스크톱
■ 점진적 개선
o 화면 크기가 증가함에 따라 요소를 추가합니다.
부트스트랩GridSystem 작업
그리드 시스템 은 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용됩니다.
여러분의 만족을 담습니다. 부트스트랩 그리드 시스템의 작동 방식은 다음과 같습니다.
■ 행은 .컨테이너 클래스 내에 배치해야 올바른 정렬과 패딩이 가능합니다.
■ 행을 사용하여 열의 수평 그룹을 만듭니다. 6
부트스트랩
■ 내용은 칸 내에 배치되어야 하며, 칸만 배치될 수 있습니다.

줄의 직계 자식
■ .row 및 .col-xs-4와 같은 미리 정의된 그리드 클래스를 사용하여 신속하게 만들 수 있습니다.
그리드 레이아웃 LESS 믹스인은 더 많은 의미적 레이아웃에도 사용될 수 있다.
② 기둥은 패딩을 통해 거터(기둥 내용물 사이의 틈새)를 만든다. 그것
패딩은 음의 여백을 통해 첫 번째 및 마지막 열에 대해 행으로 간격띄우기됩니다.
행에
② 그리드 기둥은 12개의 사용 가능한 기둥의 수를 지정하여 생성
스팬을 원합니다. 예를 들어, 세 개의 동일한 열은 세 개의 .col-xs-4를 사용합니다.

미디어쿼리


미디어 쿼리는 “조건적 CSS 규칙”을 나타내는 매우 화려한 용어입니다. 그것은 단지 약간 적용된다.
CSS, 제시된 특정 조건에 근거합니다. 이러한 조건이 충족되면 스타일은
적용의
부트스트랩의 미디어 쿼리를 사용하여 내용을 이동, 표시 및 숨길 수 있습니다.
뷰포트 크기 다음 미디어 쿼리는 LESS 파일에서 키를 만드는 데 사용됩니다.
부트스트랩 그리드 시스템의 중단점입니다.
/*1 추가 소형 기기(전화, 768px 미만) */
/*2 부트스트랩의 기본값이므로 미디어 쿼리가 없습니다 */
/*3 소형 장치(태블릿, 768px 이상) */
@media(최소 너비: @screen-sm-min) {… }
/* 중형 장치(데스크톱, 992px 이상) */
@media(최소 너비: @screen-md-min) {… }
/* 대형 기기(대형 데스크톱, 1200px 이상) */

1@media(최소 너비: @screen-lg-min) {… }
CSS를 더 좁은 집합으로 제한하기 위해 최대 너비를 포함하도록 확장되는 경우가 있습니다.
장치를 사용합니다.
@media(최대 너비: @screen-contain-max) {… }
샘플2 @media(최소 너비: @screen-sm-min) 및 (최대 너비: @screen-sm-max) {… }
3 @media(최소 너비: @screen-md-min) 및 (최대 너비: @screen-md-md-max) {… }
4 @media(최소 너비: @screen-lg-min) {… }
미디어 쿼리는 장치 사양과 크기 규칙의 두 부분으로 구성됩니다. 상기에서
대소문자를 선택하면 다음과 같은 규칙이 설정됩니다.

7
부트스트랩
다음 라인을 고려해보자.
5 @media(최소 너비: @screen-sm-min) 및 (최대 너비: @screen-sm-max) {… }
모든 장치의 경우 최소 너비가 있는 경우: @screen-sm-min, 폭의 경우
화면은 @스크린-sm-max보다 작아지고, 그리고 나서 무엇인가를 한다.