[CSS] CSS 기초 7(CSS 코드의 재사용)

style 태그 안에서 디자인을 일부 수정한다면 모든 html 태그에 대해 그것들을 동일하게 수정해주어야 한다면 매우 비효율적일 것이다. html 파일이 수천 수만개가 된다고 생각해보아라. 이럴 때 해결책으로 CSS코드를 재사용하는 방법이 있다. 먼저 원하는 기존에 작성해둔 html코드 안의 style 태그 안의 내용을 복사하여 style.css라는 파일에 붙여넣기 한다. 그 후 link 태그를 이용하여 모든 html 파일들에게 style.css라는 파일의 디자인 양식을 사용하라고 명령을 해주면 된다. 코드로 살펴보면 아래와 같이 된다.

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

위와 같이 style태그 안의 CSS코드만 따로 복사하여 style.css라는 파일로 저장한다. 그 후, style태그를 지우고 해당 위치에 아래와 같은 코드를 삽입한다.

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

위 코드는 style.css라는 파일을 link하여 해당 파일 안의 코드대로 CSS 디자인을 적용시키라는 뜻이다. 이러한 기능은 CSS코드의 재사용성을 높여 일일히 수정해주는 번거로움을 줄이고, 원하는 css디자인이 있을 때, 해당 디자인을 파일로 저장하여 사용할 수 있게 해준다.