(생활코딩) CSS 코드의 재사용 <link>

우리가 작성한 코드, CSS 코드가 모든 웹페이지에서 중복해서 등장하는 부분이 있으면 수정할 때 일일이 찾아 수정해야 하기 때문에 시간이 많이 걸린다. 코드를 작성할 때, 중복의 제거는 아주 중요하다. 중복을 제거함으로 프로그래밍, 코딩이 얼마나 효율적인지 다시 확인해볼 것이다.

 

모든 웹페이지에서 중복되고 있는 CSS코드를 <style>태그를 제외한 순수한 CSS 코드만을 복사해서 style.css라는 파일에다가 붙여넣기를 한다. 그리고 html파일에 있는 중복되는 <style>태그의 코드들을 다 삭제한다. 

그리고,  <style>태그가 있었던 부분에 style.css라는 별도의 파일에 저장된 CSS를 다운로드 받아서 여기에 원래 그 코드가 있었던 것처럼 동작하게 하는 태그 <link>를 사용한다.

 

 

<link>태그를 통해서 이 웹페이지가 어떤 CSS파일과 연결되어 있는지를 웹브라우저에게 알려줄 수 있다.

즉, 이렇게 표시되면 1.html이라는 웹페이지는 style.css파일과 link(연결)되어있고, 웹브라우저는 style.css파일을 다운로드 받아서 그것을 이 웹페이지에 적용하게 된다.

 

<style>태그가 중복으로 html파일에 있던 것과 style.css파일을 만들어 html파일에 링크건 것과 결과는 다르지 않지만,

내부적으로는 완전히 구현이 달라지면서 훨씬 효율적인 상태가 된다. 만약, 누군가가 웹페이지의 모든 링크에 밑줄을 넣으라고하면 전자의 경우에는 html의 <style>태그마다 선택자a에 대해서 밑줄을 줘야하지만, 후자의 경우에는 style.css파일의 선택자a에 대해서만 밑줄을 주면 되기 때문이다. 

 

또한, style.css라는 코드가 있다면 여기에 위치하는 코드는 style.css 파일 안에 있는 코드라는 것을 확신할 수 있다.

하지만, 1.html / 2.html / 3.html에 CSS 코드가 직접 기술되어 있다면 각각의 html파일 별로 존재하는 CSS가 실제로 같은지 안같은지를 파악하기 어렵다.

 

그리고, 새로운 웹페이지를 만들었을 때, 그 웹페에지에다가 <link>만 추가하면 style.css가 뭔지는 몰라도 CSS의 시각적인 기능성을 사용할 수 있게 된다. 즉 재사용성이 높아지게 되고, 사용하는 입장에서는 내부적인 코딩의 원리를 몰라도 사용할 수 있게 되니깐 사용성이 높아진다. 디자인을 수정해야할 웹페이지가 1억개여도 style.css라는 파일 하나만을 바꾸면 동시에 바뀌는 폭발적 효과를 얻게 된다. (유지보수 용이)

 

그리고, 코드의 양이 줄었기 때문에 이 웹페이지를 다운로드 받을 때 인터넷 사용료를 덜 낼수 있다는 것도 매우 중요한 경제적 효과이다. 물론, style.css파일을 빼놨다고 해서 해당 파일을 다운로드 받지 않는 것은 아니다.

 

화면 오른쪽 클릭- 검사-네트워크탭 에서 1.html 파일을 리로드했을 때 내부적으로 어떤 파일들을 웹서버에서 다운로드를 받는지 볼 수 있다.

 

하나의 웹페이지에서 여러 개의 파일을 별도로 바깥에 두고 그것을 다운로드 받는 것과 그냥 웹페이지 안에 CSS코드를 내장하는 것 중에서 어떤게 더 네트워크적인 측면에서는 효율적(더 적은 트랙픽을 사용)인 걸까?

 

웹페이지 안에 CSS를 직접 놓는 것이 그것 자체로는 더 효율적이지만, 캐싱이라고 하는 것은 저장하다는 뜻인데, 웹페이지가 한번 style.css파일을 다운 받았다면, 저 파일이 바뀌기 전 까지는 style.css란 파일을 이 웹브라우저는 내 컴퓨터에 저장했다가 그 다음에 필요할 때 저장된 결과를 가져와서 속도를 높일 수 있고(네트워크를 안 쓰기 때문에) 사업자들은 돈을 덜 쓸 수 있는 중요한 효과를 얻게 된다.

 

즉, style.css 파일을 캐싱할 수 있게 되면 결국에는 훨씬 더 빠르게 웹페이지를 보여줄 수 있으면서 네트워크 트래픽, 사용료를 훨씬 더 적게 낼 수 있다.  가급적 CSS파일을 만들었다면 별도의 파일로 꺼내서 중복을 제거하는 것을 추천한다.