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

조회수 12559회

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

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

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

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

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

ps.

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

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

  • (•́ ✖ •̀)
    알 수 없는 사용자

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/ 과 같은 이미 디자인 된 것들을 차용한 후, 수정하시면서 사용해보는 것이 좋을 것 같습니다.

    • !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/

    이미지

    • (•́ ✖ •̀)
      알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)