Programming/Front-end

Bootstrap container 폭 넓이 조정

동건 2016. 7. 30. 15:09

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픽셀 폭은 네이버나 다음, 그 외 우리 나라의 대다수의 웹사이트가 사용하는 폭보다 많이 넓다. 네이버를 볼까? (클릭하면 크게 보입니다)

naver-container-width

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 라던지) 사용하면 더 좋을 것이라고 생각한다.

반응형