css코드의 재사용

많은 양의 html파일에 동일한 style 코드가 중복될 때,
중복되는 코드를 별도의 css파일에 저장한 후 불러오기

🟢 중복되는 style 코드

<style>
  body{
    margin:0;
  }
  a{
    color:black;
    text-decoration:none;
  }
  h1{
    font-size:45px;
    text-align:center;
    border-bottom:1px solid gray;
    margin:0;
    padding:20px;
  }
  ol{
    border-right:1px solid gray;
    width:100px;
    margin:0;
    padding:20px;
  }
  #grid{
    display: grid;
    grid-template-columns: 150px 1fr;
  }
  #grid ol{
    padding-left:33px
  }
  #grid #article{
    padding-left:25px;
  }
  @media(max-width:800px){
    #grid{
      display: block;
    }
    ol{
      border-right:none;
    }
    h1{
      border-bottom:none;
    }
  }
  </style>

🟣 중복되는 코드를 css파일로 별도 저장 후 불러오기

파일명 ex) style.css

❗️ style 태그는 포함 ❌

<link rel="stylesheet" href="style.css">

네트워크적인 측면에서는 css파일을 따로 만드는 것이 비효율적이지만,
캐싱의 측면에서는 효율적이다