TIL. 08 CSS - link 태그

🎈 CSS 파일 만들기

• 여러 페이지에 들어가 있는 미디어 쿼리들의 중복된 부분들을 제거해 효율적으로 코딩한다.
• .CSS 확장자 파일의 사용법 학습

• <link rel> 링크된 문서와의 관계를 지정(rel은 href 속성의 추가 정보이며, href 속성이 있을때만 지정)
• caching
  • '저장하다'라는 뜻으로, 한 번 다운로드하면 컴퓨터에 저장해놨다가 다음에 style.css 파일을 요청했을 시, 이미 저장된 결과를 가지고와 속도를 높일 수 있다.(파일이 바뀌면 재 다운로드)
  • 결론적으로 네트워크 트래픽, 다시 말해 사용료를 훨씬 더 적게 낼 수 있는 방법이다.

▶실습

<link rel="stylesheet" href="style.css">
위처럼 style.css 파일을 만들어 링크 태그를 추가함으로써 아래의 여러 페이지에 사용되는 CSS 코딩을 한 줄로 요약할 수 있다.

<style.css>

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: 40px;
}
#grid #article {
    padding-left: 25px;
}
@media(max-width:800px)
{
    #grid {
        display: block;
    }
    ol {
        border-right:none;
    }
    h1 {
        border-bottom:none;
    }
}