🔰 "HTML에 부트 스트랩을 통합 한 후 CSS가 반영되지 않음"오류 해결

오늘 공부할 때 발생한 오류 기록입니다.

<내용>
html에 Bootstrap을 통합하는 중 <hr>,<h1> css가 반영되지 않는 오류가 발생했습니다.

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ご利用アンケート</title>

  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <header>
      <div class="row">
        <div class="col-sm-6">
          <h1>ご利用アンケート</h1>
        </div>
        <div class="col-sm-6 align-right">
          <a href="/">HOMEへ戻る</a>
        </div>
      </div>
    </header>
  </div>

    <hr>

    <hr>

  <div class="container">   
    <footer>
      <p>&copy; H20 space</p>
    </footer>
  </div>

</body>
</html>

style.css

header {
  margin-top: 30px;
  color: #2e99a9;
}

hr {
  border-width: 3px;
  border-color: #2e99a9;
}

h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.align-right {
  text-align: right;
}

<확인 사항 1> 개발자 도구 확인

<확인 사항 2> 코드의 맞춤법 오류 확인
문제가 없으므로 Google 검색을 실시했습니다.
<검색 결과>
부트 스트랩과 CSS 파일이 싸우고 있었기 때문인 것 같습니다.

＜검증①＞css 태그 앞에 직전의 클래스명을 넣어 본다.col-sm-6 h1.conteiner hr＜결과①＞전혀 효과 없음을 위해 다음의 검증②로 진행되었습니다.

＜검증②＞

index.html

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="../css/style.css">

<결과②> 성공! ! css 파일이 link에 반영되었습니다!

파일 우선순위에 대한 지식 복습 부족으로 인해 발생했습니다. 복습, 출력을 앞으로도 계속하겠습니다 🔥

google 검색시의 참고 기사↓↓
css가 효과가 없거나 반영되지 않을 때의 대처법
h tps://사루와카군. 이 m / html - c / s / rdp re / s / t
teratail Q&A
htps : // 놀라운 l. 코m/쿠에 s치온 s/86446

Reference

이 문제에 관하여(🔰 "HTML에 부트 스트랩을 통합 한 후 CSS가 반영되지 않음"오류 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hatabo_engineer/items/19f20b9daa66984aa315

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다