CSS 코드의 재사용

여태까지 만든 것은 하나의 웹페이지에만 적용이 된 것이므로 다른 웹페이지에도 같이 적용을 해봅시다.

복사해서 붙여넣기 하고 div를 추가하면 됩니다.

이렇게하면 조금 까다롭고 복잡하지 않았나요??

3개가 아니라 웹페이지가 1억개라고 했을 때 이렇게 바꾸면 얼마나 귀찮고 불편할까요??

이런 문제가 발생하는 이유는 우리가 작성한 코드 

이 CSS코드가 모든 웹페이지에서 중복해서 등장하기 때문입니다.

'중복의 제거'가 필요할 때입니다. 그럼 중복을 제거해서 코딩이 얼마나 효율적인지 다시한번 느껴보겠습니다.

우선 style 태그를 제외하고 순수한 CSS만을 복사해서 style.css라는 파일을 만들어서 복사해서 붙여넣겠습니다.

그리고 style태그를 지워줍니다. 그리고 웹브라우저에게 style.css라는 별도의 파일에 저장된 css를 다운을 받아서

여기에 그 코드가 있었던 것처럼 동작해 라고 알려주어야 합니다. 그것이 바로 link라는 태그입니다.

link를 통해 웹브라우저에게 어떤 css파일과 연결되어있는지 알려줄수 있습니다.

아래 사진의 link 코드를 각각의 웹페이지에 붙여넣어 줍시다.

만약 누군가가 이제 TEXT에 밑줄을 치라고 하면 하나하나 다 바꿔줄 필요 없이

style.css라는 파일에 들어가서 해당하는 것만 처리를 해주면 모든 웹페이지에 적용이 됩니다.

이렇게 여러 개의 파일을 별도로 바깥에 두고 그것을 다운로드 받는 것과

그냥 웹페이지 안에 CSS 코드를 내장하는 것 중에서 어떤게 더 네트워크적인 측면에서는 효율적일까요?

더 적은 트래픽을 사용하는 것일까요?

웹페이지 안에 내장하는 것이 그 자체로는 효율적입니다

하지만 지금부터 설명드릴 테크닉 때문에 그렇지 않습니다. 바로 캐싱, 즉 저장하다라는 기술때문입니다.

한번 이 style.css라는 파일을 다운을 받으면 웹브라우저는 이 파일이 변경되기 전까지는

컴퓨터에 저장을 해놨다가 계속 사용을 하게 됩니다.