🎈 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;
}
}