흐미흐미
587
2017-06-28 14:33:02
3
4023

부트스트랩에 제가 만든 css 추가 방법


부트스트랩으로 간단한 홈페이지 하나 만들고 있는데요


부트 스트랩의 css안에 제가 원하는 css 내용을 넣어서 적용하면 잘 되는데요


아예 제가 파일을 하나 만들고 밑의 제일 아래처럼 추가 하면 적용이 안되네요


혹시 몰라 부트 스트랩의 CSS들을 없애고 제꺼만 추가 하니 잘되던데


방법이 잘못 된건가요?


감사합니다^^


    <!-- 합쳐지고 최소화된 최신 CSS -->

    <link rel="stylesheet" href="css/bootstrap.min.css">


    <!-- 부가적인 테마 -->

    <link rel="stylesheet" href="css/bootstrap-theme.min.css">


    <!-- sinwho CSS -->

    <link rel="stylesheet" href="css/sinwho.css">

1
  • 답변 3

  • 프리미엄
    289
    2017-06-28 14:52:48

    bootstrap.css 아래에 커스톰 파일을 호출하셨으면 custom.css에다가 bootstrap에서 쓰였던 셀렉터를 찾으셔야 합니다.

    예를 들어서 커스톰 파일에 아래와 같이 h1 스타일링 코드를 넣었어도

    h1 {
    	line-height: 2;
    	color: #f00;
    }

    부트스트랩에 있는 코드인 .jumbotron h1 클래스를 오버라이드 할 수 없을 때도 있습니다.

    .jumbotron h1, .jumbotron .h1 {
    	line-height: 1;
    	color: inherit;
    }


  • 흐미흐미
    587
    2017-06-28 14:57:41

    답변 너무 감사합니다 저도 오보라이드 못할수도 있을거 같아 아예 

    sinwho-h1 이라든가 sinwho-font-color 이런식으로 새로운 이름을 만들고 있는데도

    적용이 안되네요 ㅠㅠ

    감사합니다^^

  • 프리미엄
    289
    2017-06-28 15:26:17 작성 2017-06-28 15:39:24 수정됨

    기본적으로 모든 선택자가 중요성 점수을 가지고 있습니다. 

    • ID = 100점
    • 클래스 또는 수도클래스 = 10점
    • 태그선택자 또는 수도엘리먼트 = 1점

    브라우저는 항상 두 개의 선택자 중에 점수가 더 높은 중요성을 선택하게 되거든요. css파일의 위치는 숫자로 된 중요성이 일치할 때만 적용되게 됩니다 그래서 부트스트랩를 오버라이드 하기가 사실 쉽지 않은 거구요.

    부트스트랩 파일에서 선택자를 그대로 복사하셔서 엘리먼트가 같은 점수의 중요성을 가지게 하는 방법이 있긴 하지만 그렇게 하다보면 부트스트랩의 편리성도 잃게 되기 마련이거든요.

    그래서 또 다른 방법은 아래처럼 커스톰 파일이 적용되기 원하시는 페이지 가장 최상단에 있는 root 엘리먼트에 ID를 넣어주는 겁니다.

    <body id="bootstrap-overrides">

    이렇게 하면 어떤 css 선택자든 바로 100점의 중요성을 엘리먼트해 줄 게 되고 부트스트랩도 오버라이드 할 수 있게 됩니다. 

    /* 부트스트랩에 나와있는 선택자 예제 */
    .jumbotron h1 { /* 중요성 점수: 10+1=11 */
      line-height: 1;
      color: inherit;
    }
    
    /* 처음 스타일 할 때 */
    h1 { /* 중요성 점수 1점 - 부트스트랩 jumbotron을 오버라이드 하기에 부족한 점수 */
      line-height: 1;
      color: inherit;
    }
    
    /* 중요성 점수를 정해주는 새로운 방법  */
    #bootstrap-overrides h1 { /* 중요성 점수: 100+1=101 */
      line-height: 1;
      color: inherit;
    }


  • 로그인을 하시면 답변 을 등록할 수 있습니다.