Bootstrap은 container 클래스를 통해서 스크린 크기에 따른 화면의 폭의 한계를 자동으로 조절한다. 실제로 container 클래스가 어떻게 정의되어 있는지 살펴보자.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
@media (min-width: xxx) 를 통해 스크린의 폭이 xxx 이상일 때만 css의 효과를 적용시킬 수 있게 한다. min-width 대신 max-width라면 어떻게 될 지는 예상이 될 것이다. 따라서 Bootstrap은 스크린 폭이 768px 이상이면 750px의 container 폭을 주고, 스크린 폭이 992px 이상으로 커지면 container의 폭을 970px로 설정한다. 스크린 폭이 더 커져서 1200px 이상이 되면 container의 폭을 1170px로 정하는 것이다.
Bootstrap container의 1170픽셀 폭은 네이버나 다음, 그 외 우리 나라의 대다수의 웹사이트가 사용하는 폭보다 많이 넓다. 네이버를 볼까? (클릭하면 크게 보입니다)
container라는 id의 블럭에 940px을 줬다. 기존 Bootstrap의 반응형 웹을 유지하면서 나도 네이버와 같은 폭을 주고 싶으니 위의 container 클래스를 덮어씌울 것이다. 아래는 전체적인 HTML 코드이다.
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 940px;
}
}
/*사실 이 블럭은 없어도 된다*/
@media (min-width: 1200px) {
.container {
width: 940px;
}
}
</style>
</head>
<body>
<!--
... 위에서 설정한 container를 맘껏 쓰세요
자바스크립트는 생략합니다
-->
</body>
</html>
HTML 문서에 직접 써넣은 css를 별도의 파일로 만들어 (예를 들어 bootstrap.custom.css 라던지) 사용하면 더 좋을 것이라고 생각한다.
'Programming > Front-end' 카테고리의 다른 글
| 효과적인 코드 시각화, highlight.js (0) | 2016.11.28 |
|---|---|
| MathJax: 웹에서 Latex 수식을 쓰자 (0) | 2016.09.03 |
| c3.js 여러 종류의 차트 사용법 (0) | 2016.08.22 |
| Bootstrap 기반 티스토리 스킨: 첫 작업 기록 (4) | 2016.08.21 |
| Bootstrap modal 사이즈 및 위치 조절 (19) | 2016.03.22 |