CSS - link href를 이용해야하는 이유 <캐싱>

생활코딩 WEB2 - css 편 (3/3)

*** 중복 제거의 중요성 ***

 

그러나, <style>태그의 부분은 결국 index.html, 1.html, 2.html, 3.html에 중복 되어있는 것이다.

만약 스타일 요소를 하나라도 수정한다면, 우리는 모든 파일에 들어가서 이를 수정해야 하는데

이런 번거로움을 없애고 중복을 없애기 위해 다음과 같이 .css 파일을 이용해보자.

 

위처럼 <style>태그 안의 내용을 복사해서 새 파일로 저장한다. 파일명은 style.css로, 즉 css파일로 저장해야한다.

 

그리고 해당 html문서들 안에 있던 <style>태그를 전부 제거하고

다음과 같이 작성한다.

 

<link rel="stylesheet" href="style.css">

 

---

그러나, 우리의 웹사이트에서 [우클릭]-검사를 통해 알 수 있는 사실이 있다.

F5, 즉 리로드를 해보았을때,  [Network]창을 살펴보면 다음과 같다.

 

우선 index.html파일을 불러오고, index.html파일의 <link rel="stylesheet" href="style.css">라는 코드를 통해

style.css파일 또한 불러오게 된다.

 

<style>코드를 통해 작성하는 방법은 이런 과정이 따로 필요없으므로,

1차원적으로 봤을때는 더 효율적인 방법이라고 할 수 있다.

 

그러나 우리가 css파일을 link하는 방법을 사용하는 또다른 이유는 바로 캐싱이다.

 

캐싱(caching) = 저장하는 것

 

한번 style.css 를 다운받으면, 해당 파일이 바뀌기 전까지는 우리의 컴퓨터에 저장해놓고

그 다음에 style.css를 요청하면 저장된 것을 불러서 처리 속도를 높일 수 있다. (N/W를 쓰지 않기 때문에)

 

 

 

캐시 (Cache)

Cache Memory는 메인 메모리와 CPU간의 데이터 속도 향상을 위한 중간 버퍼 역할을 하는 CPU내 또는 외에 존재하는 메모리이다.

캐싱(caching)

명령어와 데이터를 캐시 기억 장치 또는 디스크 캐시에 일시적으로 저장하는 것. 사용자들의 요청이 많은 콘텐츠를 별도 서버에 임시저장한 뒤 필요할 때마다 바로바로 데이터를 전송하는 기술. 데이터가 전송되는 과정에서 낭비되는 시간을 줄여주기 때문에 데이터베이스의 과부하를 감소시키고 응답 시간을 단축시킨다.