14. css 코드의 재사용

 

코드를 여러개의 페이지에 적용 할 때 조금 까다롭진 않나요 ? 만약 웹페이지 수가 4개가 아니라 1억개 라면 어떻게 될까요 ? 그래서 이 웹페이지의 링크에 밑줄을 쳐야 한다면 1억 번을 작업해야 합니다.

 

우리가 작성한 css 코드가 모든 파일에 중복해서 등장하기 때문입니다. 중복 제거가 필요합니다.

 

먼저 모든 웹페이지에 중복돼 있는 CSS 코드에서 <style> 태그를 제외한 순수한 css 코드만 복사해서 style.css 라는 파일에 붙여 넣어 봅시다. 그리고 <style>태그의 내용을 다 지우고 웹 브라우저에게 이렇게 이야기 합니다.

 

" 웹 브라우저야 , 마우스 커서에 있는 위치에는 style.css라는 별도의 파일에 저장된 css 를 내려받아서 원래 그 코드가 있었던 것처럼 동작해"

--> 이런 역할을 하는 것이 바로 <link> 라는 태그 입니다. <link> 태그를 통해 이 웹페이지가 어떤 css 파일과 연결돼 있는지 웹 브라우저에게 알려줄 수 있다는 것입니다.

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

 

이제 새로운 웹 페이지를 만들었을때 그 웹페이지에 <link> 라는 한 줄을 추가하면 style.css 파일의 내용이 무엇인지 몰라도 style.css 에 담긴 시각적인 기능성을 사용할 수 있게 됩니다. 즉, 재사용성이 높아지고 사용하는 입장에서 내부적인 코딩의 원리를 몰라도 사용할 수 있게 되니 사용성이 높아집니다.

 

이처럼 하나의 웹 페이지를 구성하는 여러 개의 파일을 별도로 분리해 두고 내려받는 것과 그냥 웹페이지 안에 css 코드를 내장하는것 중에서 어떤 것이 더 네트워크 적인 측면에서 더 효율적 일까요 ? 웹페이지 안에 css 를 직접 작성하는 것이 그 자체로는 더 효율적입니다. 하지만 캐싱 이라는것을 알면 반드시 그렇지만은 않습니다.

 

캐싱 이라는 것은 저장한다는 뜻인데 , 우리가 한번 style.css파일을 다운로드 했다면 이 style.css의 내용이 바뀌기 전 까지는 style.css파일을 웹브라우저가 우리의 컴퓨터에 저장해 뒀다가 다음에 style.css 파일에 요청하면 저장된 결과를 가져와 속도를 높일수 있고, 사업자들은 돈을 덜 쓸 수 있는 굉장히 중요한 효과를 얻게 됩니다.

 

바로 이 캐시를 통해 style.css 파일을 캐싱 할 수 있게 되면 결국에는 훨씬 더 빠르게 웹페이지를 보여 줄 수 있으면서 네트워크 트래픽을 훨씬 더 적게 쓸 수 있다는 굉장히 신기하면서 중요한 효과를 얻을 수 있어서 가급적 css 파일을 별도로 만들어 중복을 제거하는 것을 추천 합니다.