Bootstrap을 사용하는데 Custom 부분은 어떻게 대처하나요?


Bootstrap 디자인을 사용하여 웹사이트를 개발하려고 합니다.

부트스트랩 사이트를 보니 CDN 링크가 소개되어 있어서 사용하였습니다. (보통 CDN 링크로 부트스트랩을 사용하는지 모르겠네요. )

그 이후 특정 부분의 색깔을 바꾸는 등 custom 하려고 하는데 어떤 방법이 있나요?

!import 속성 같은 것을 사용해야하는지 어떤 방법이 가장 효율적인지 질문드립니다. ( 웹 사이트 개발이 처음이라 방향을 잘못 잡고 있을 수도 있는데, 그렇다면 옳은 방향 조언 부탁드립니다.)

부트스트랩 디자인 적용 예제

ps.

위와 같이 초보자 템플릿을 적용해 보았습니다.

그리고 메뉴바 색깔을 변경한다던가...

  • 2016년 03월 25일에 작성됨
    웹 사이트 공부 중입니다. 많은 도움 주시면 좋아요.

조회수 1177


3 답변


좋아요
3
싫어요
채택취소하기

보통은 CSS를 오버라이드 합니다. !important를 쓰는 것보다 CSS의 로딩 순서만 변경해도 될 것 같네요.

먼저 Bootstrap의 CSS를 로딩한 후, 뒤에 변경된 테마의 CSS를 로딩하는 방식으로 하면 될 것 같습니다.

CSS 특징상 중복된 설정이 존재하는 경우에, 마지막에 선언된 문장을 따릅니다. 다만 !important로 정의된 속성의 경우, !important에 의해서만 오버라이드 할 수 있습니다.

다음은 예시입니다. css 로딩후에 태그를 사용해서 bootstrap에서 정의한 CSS의 클래스를 오버라이드한 예제입니다. 부트스트랩의 네비게이션바에 navbar-inverse를 적용할 경우의 색을 변경한 간단한 예입니다.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.navbar-inverse {
  background-color: #248
  border-color: #103070;
}
.navbar-inverse .navbar-brand {
    color: #eee;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: #103070;
}
</style>

위와 같은 식으로 전반적으로 변경하면서 디자인 하시거나, https://wrapbootstrap.com/ 과 같은 이미 디자인 된 것들을 차용한 후, 수정하시면서 사용해보는 것이 좋을 것 같습니다.

  • 2016년 06월 01일에 수정됨
    리눅스(유닉스) 기반의 시스템에서 웹 서비스를 개발하고 있습니다.
  • 2016년 03월 25일에 작성됨
    리눅스(유닉스) 기반의 시스템에서 웹 서비스를 개발하고 있습니다.

  • !important 부터 생각하다니 제가 너무 성급했네요... 제가 원하던 아주 정확한 답변인 것 같습니다. 성실한 답변 감사드립니다. 즐거운 주말 보내세요!!    상남자   2016.3.25 19:13     

간단한 customisation만 하신다면 허대영님께서 말씀해 주신 방법이 가장 간단하구요 처음엔 이 방법을 가장 많이 사용하게 됩니다.

디테일하게 customise를 원하시면 http://getbootstrap.com/customize 에서 취향에 맞게 설정하실수 있습니다.

좀 더 쉽게 보면서 적용할수있는 http://bootstrap-live-customizer.com 사이트도 있습니다.

더 전문적으로 하시게 되면 bootstrap/bootstrap-sass 같은 프로젝트를 fork해서 customise 하시면 되구요. css에 조금 익숙해지시면 sass 같은 preprocessor 로 넘어가시는걸 추천드립니다. 생산성에 많은 차이가 있을거에요.

참고

(거의 모든 경우) !important는 피하시는게 좋습니다.

css selector 우선순위만 이해하고 사용하시면 코드 유지하기가 훨씬 수월하실거에요.

http://bitsofco.de/on-not-and-specificity/


  • 와... 신세계네요 이런게 있을 것 같았지만 어떻게 질문해야할지 몰랐는데 제가 궁극적으로 원했던 답변입니다!! 방향 잡아주셔서 감사합니다!!    상남자   2016.3.26 13:31     

여기 추천합니다. 실시간을 컬러나 폰트같은것들을 실시간으로 바꿔보면서 테스트할 수 있어서, 코어단까지 까볼필요없이 사용하기 좋은것같아요. 3.3.6버전까지만 지원하는점은 참고. http://bootstrap-live-customizer.com/

이미지

  • 2016년 05월 19일에 작성됨
    Junior Front-End Developer at 'NewNormal™ '

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close