(공부) 부트스트랩 레이아웃의 그리드
부트스트랩은 그리드 시스템을 이용하여 레이아웃을 잡습니다.
그리드(=격자)는 총12열로 구성되어 있으며, 웹사이트의 레이아웃에 따라 구성을 변경해 줄 수 있습니다.
그리드 시스템 = 부트스트랩의 핵심 레이아웃 시스템
그리드 시스템은 클래스 선택자를 기반으로 화면의 레이아웃을 잡아주는 역할을 합니다,
각각의 클래스 선택자에 따라 화면이 나뉘는 것을 볼 수 있습니다.
화면해상도가 변경될 때마다 레이아웃은 그에 맞게 변경되게 되어 있습니다.
※ 그리드 옵셥 : 기기별 해상도에 따른 클래스 접두사 ※
1. 모바일폰 ( <768px )
그리드 적용 : 항상
container 클래스 최대너비 : None (auto)
클래스 접두사 : .col-xs-
컬럼 수 : 12
컬러 최대 너비 : Auto
사이 너비 : 30px ( 컬럼의 양쪽에 15px씩 )
중첩 : 예
오프셋 : 없음
컬럼 순서 : 없음
2. 태블릿 ( ≥768px )
그리드 적용 : 분기점보다 크면 적용
container 클래스 최대너비 : 750px
클래스 접두사 : .col-sm-
컬럼 수 : 12
컬럼 최대 너비 : 60px
사이 너비 : 30px ( 컬럼의 양쪽에 15px씩 )
중첩 : 예
오프셋 : 예
컬럼 순서 : 예
3. 데스크탑 ( ≥992px )
그리드 적용 : 분기점보다 크면 적용
containe 클래스 최대너비 : 970px
클래스 접두사 : .col-md-
컬럼 수 : 12
컬럼 최대 너비 : 78px
사이 너비 : 30px ( 컬럼의 양쪽에 15px씩 )
중첩 : 예
오프셋 : 예
컬럼 순서 : 예
4. 데스크탑 ( ≥1200px )
그리드 적용 : 분기점보다 크면 적용
container 클래스 최대너비 : 1170px
클래스 접두사 : .col-lg-
컬럼 수 : 12
컬럼 최대 너비 : 95px
사이 너비 : 30px (컬럼의 양쪽에 15px씩)
중첩 : 예
오프셋 : 예
컬럼 순서 : 예
*오프셋이란? 그리드와 그리드 사이를 분리하는 것을 의미
container 클래스의 최대 너비는 모바일폰, 태블릿, 데스크탑의 해상도에 맞춰서 크기가 30px에서 22px 18px 정도 작게 설정된 것을 알 수 있습니다.
여기서 container 클래스 선택자가 하는 역할은 전체 레이아웃을 감싸는 역할을 함
container 선택자는 최대 해상도에 따라서 해상도의 길이 width를 지정하지만, container 선택자 대신에 container-fluid 클래스 선택자를 사용하게 되면 전체 화면을 전부 사용할 수 있습니다.
.col-me-는 화면 해상도가 1200px 이하이면서 992px 이상인 데스크탑에서 사용하는 클래스 접두사인 것을 알 수 있습니다. (container-fluid인 경우도 해당됨) 이경우 클래스에 적용된 컬럼의 최대 너비는 78px이라는 것을 의미
각 컬럼들 사이의 너비는 좌우로 15px의 padding 값을 가짐
모든 그리드는 중첩이 된다는 말은 그리드를 겹쳐서 사용할 수 있음을 의미
즉, 라나의 그리드 내부에 또 하나의 그리드를 만들 수 있으며, 내부에 만들어진 그리드는 또다시 12개의 그리드가 생성