2. 부트스트랩에서 사용하는 CSS

2. 부트스트랩에서 사용하는 CSS - 1

2018. 2. 13. 10:32ㆍ부트스트랩으로디자인하라

1. 부트스트랩 레이아웃의 핵심 그리드 시스템

부트스트랩은 그리드 시스템을 이용하여 레이아웃을 잡습니다. 그리드(격자)는 총 12열로 구성되어 있으며, 웹사이트의 레이아웃에 따라 구성을 변경해 줄 수 있습니다. 그리드 시스텝ㅁ은 부트스트랩의 핵심 레이아웃 시스템입니다.

그리드 시스템은 클래스 선택자를 기반으로 화면의 레이아웃을 잡아주는 역할을 합니다.

<!DOCTYPE html>

<head>

<title>앙큼한유채`s 일상 Story</title>

<style>

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {

border: 1px solid red;

padding: 10px;

}

.row{

margin-bottom: 4px;

margin-top: 4px;

}

</style>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

상위 예제를 통해 해상도별 그리드 시스템이 변화하는 모습을 확인하세요.

	모바일폰(<768px)	태블릿(≥768px)	데스크탑(≥992px)	데스크탑(≥1200px)
그리드 적용	항상	분기전보다크면 적용
container 클래스 최대 너비	none(auto)	750px	970px	1170px
클래스 접두사	.col-xs-	.col-sm-	.col-md-	.col-lg-
컬럼 수	12
컬럼 최대 너비	auto	60px	78px	95px
사이 너비	30px(컬럼의 양쪽에 15px씩)
중첩	예
오프셋	없음	예
컬럼 순서	없음	예

상위 표를 보면 container를 클래스의 최대 너비는 모바일폰, 태블릿, 데스크탑의 해상도에 맞춰서 크기가 30픽셀에서 22픽셀 18픽셀 정도 작게 설정된 것을 알 수 있습니다. 여기서 container 클래스 선택자가 하는 역할은 전체 레이아웃을 감싸는 역할을 합니다.

저작자표시 비영리 동일조건

'부트스트랩으로디자인하라' 카테고리의 다른 글

1. 부트스트랩소개와 사용방법 - 3 (0)	2018.02.09
1. 부트스트랩소개와 사용방법 - 2 (0)	2018.02.08
1. 부트스트랩소개와 사용방법 - 1 (1)	2018.02.07

앙큼한유채's 일상 Story

앙큼한유채's 일상 Story

태그

최근글

댓글

공지사항

아카이브

'부트스트랩으로디자인하라' 카테고리의 다른 글

관련글

티스토리툴바