웹 페이지에 중복돼 있는 CSS코드에서 <style>태그를 제외한 순수한 CSS코드만 복사해서 style.css에 넣는다.
그리고 <style> 태그의 내용을 다 지우고 웹 브라우저에게 이렇게 얘기한다.
↓style.css
body{
margin:0;
}
a{
color:black;
text-decoration: none;
}
h1{
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0px;
padding: 20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
}
#article{
padding-left: 25px;
}
@media ( max-width: 800px;) {
#grid{
display: block;
}
#grid ol{
border-right: none;
}
h1{
border-bottom: none;
}
}
"웹 브라우저야, 마우스 커서에 있는 위치에는 style.css라는 별도의 파일에 저장된 CSS코드를 내려받아서 원래 그 코드가 있었던 것처럼 동작해"
이런 역할을 하는게 <link>태그 이다.
...생략...
<head>
<title>WEB1-CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
</head>
...생략...
이 웹페이지는 style.css라는 파일과 연결돼 있고, 웹 브라우저는 style.css 파일을 내려받아 이 웹 페이지에 적용한다.
이렇게 link 링크로 걸어주면 내부적으로 훨씬 더 효율적인 상태가 된다.
재사용성도 높아지고 사용성도 높아진다.
캐싱(cache)이라는 것은 저장한다는 뜻인데,
우리가 한번 style.css 파일을 다운로드했다면 이 style.css의 내용이 바뀌기 전까지는
style.css 파일을 웹 브라우저가 우리의 컴퓨터에 저장해뒀다가
다음에 style.css 파일을 요청하면 저장된 결과를 가져와
속도를 높일 수 있고, 사업자들은 돈을 덜 쓸 수 있는 굉장히 중요한 효과를 얻게 된다.
따라서 가급적 CSS 파일을 별도로 만들어 중복을 제거하는 것을 추천한다.
위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.
'WEB > CSS' 카테고리의 다른 글
| 미디어 쿼리 (0) | 2020.11.04 |
|---|---|
| 그리드(grid) (0) | 2020.11.04 |
| 박스 모델 (0) | 2020.11.04 |
| CSS 속성, 선택자 (0) | 2020.11.04 |
| CSS의 기본 문법 (0) | 2020.11.04 |