[생활코딩] link & import

---

똑같은 CSS를 적용해야 하는 웹페이지가 1000개가 있을 때 CSS의 내용이 바뀌었다면 어떻게 해야할까요?

아마 천개의 웹페이지를 모두 수정해야 할 것입니다.

이것은 CSS의 수정을 소극적으로 만들고 그것은 곧 아름다움을 억압하는 암담한 장애물이 될 것입니다.

여기서는 이런 문제를 근본적으로 해결할 수 있는 방법인 link 태그와 @import에 대해서 알아 보겠습니다.

 

프로그램으로 코드를 만들 때

좋은 코드를 만들 수 있는 실천적이고, 어렵지 않은, 하지만 강력한 효과가 있는 방법은

바로 중복을 제거하는 것입니다.

 

 

개발자 도구 → 검사 → Network에 들어가 보면

현재 이 웹페이지를 화면에 표현하기 위해서 웹 서버로부터 다운로드 받은 파일들을 전부 다 보여주는 기능이 있습니다.

 

reload 해보면 link_1.html과 style.css가 다운로드 받아진 걸 볼 수 있습니다.

link_1.html 파일이 열리기 위해서는 style.css라는 파일을 다운로드 받아야 합니다.

 

즉, 실제로는 용량이 줄어들지 않았다는 얘기가 됩니다.

 

그리고 이 웹브라우저가 서버에 여러 번 접속 할수록 컴퓨터의 부담이나 부하가 생깁니다.

그럼에도 불구하고 파일을 분리 하는 게 경제적인 이유는 웹브라우저는 캐시라는 기능이 있기 때문입니다.

 

캐시는 무언가를 저장한다는 뜻입니다.

즉, 한번 다운받은 css를 웹브라우저는 임시 저장 폴더에 저장 해놨다가

다음에 접속 할 때 똑같은 style.css를 다운로드 받으려고 하면 네트워크를 통해 접속 하는 것이 아니라

임시 디렉토리에  이미 저장되어 있는 파일을 사용하기 때문에 네트워크를 사용하지 않아 더 경제적입니다.

 

즉, link1.html 파일이 경량화된 상태가 된다는 뜻입니다. + 재사용성도 높일 수 있습니다.

---

link라는 태그는 html 태그로 css를 로드 할 때 사용하고

@import라는 지시어는 css 안에서 다른 css를 로드하는 차이가 있을 뿐

둘은 같은 기능입니다.