중복을 제거하는 방법 (link & import 활용)
웹페이지가 1억개가 넘는 상황에서, 모든 웹페이지의 공통적으로 들어가있는 디자인을 바꿔야 할 경우(CSS) 하나하나 처리할 수 없다.
웹페이지마다 반복되는 코드가 나타나는 것은 사용자의 데이터를 잡아먹을 뿐 아니라, 여러가지 단점이 있으며 코드를 이해하는데 장애가 있을 수 있기 때문에 따라서 중복을 제거하는것이 좋다고 한다. (아직 이해 잘 안됨)
link
일일이 head>style에 입력하는 것이 아니라, style.css라는 파일을 만들어 원하는 스타일을 ㅣ다음과 같이 입력해준 뒤에
h1{
color:powderblue;
}html 파일의 head에 다음과 같이 넣어준다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styel.css">
</head>이렇게하면 스타일을 변경하고자 할때 모든 css코드를 일일이 바꿀 필요 없이 style.css의 코드만 변경해주면 link를 사용한 모든 페이지에 적용이 된다.
이 절차는 html>css다운>html에 적용의 방식으로 진행된다.
link를 사용하면 복잡한 css코드들을 밖으로 빼면 더 슬림한 코드가 가능하지만, 결국 css코드를 다운받아야 하기때문에 실제 전체의 용량이 줄어든 것은 아니다.
link를 사용하면 이미 만들어진 css style을 사용해 재사용성을 높일 수 있고 같은 취지로 사용된 코드임을 확신할 수 있다는 장점이 있다.
import
link와 같은 기능을 하며 다음과 같이 사용할 수 있다. 위처럼 style.css가 만들어져있다고 가정하고 import는 style태그 안에서 사용한다.
<style>
@import url(styel.css);
</style>
즉 link는 html태그로 css를 로드할때 사용하고 import는 css안에서 다른 css를 로드할 때 사용한다는 차이가 있다.
