CSS 코드의 재사용

지금까지 우리는 박스모델과 그리드를 통해 CSS 페이지를 보다 직관성있게 만들었습니다. 1.HTML 3.JavaScript 페이지 역시 같은 형태로 만드려면 CSS 페이지의 <style> 내의 코드들을 복사해주면 됩니다.

만일 적용해야하는 페이지가 수천개라면 어떨까요? 수천번 직접 복사하는건 비효율적이고 이를 간단하게 하기위해 다음과 같이 <link> 태그를 이용합니다.

1. style.css 라는 파일을 새로 만들고, <style> 태그 내의 내용들을 전부 복사해 넣습니다. (태그 자체는 복사x)
2. html 페이지 내의 <style> 태그를 이제 지워버리고, <link> 태그를 이용해 <link rel="stylesheet" href="style.css">를 대신 삽입합니다.

이 과정을 통해코 드의 양이 줄어 훨씬 직관적이 되며, 웹페이지를 수정해야 할때도 Style.css 파일만 수정하면 되기때문에 효율성이 폭발적으로 늘어납니다.

이렇게 코딩에서 중요한 중복의 제거를 통해 훨씬 효율적이고 수정이 파격적으로 쉬운 웹페이지를 만들수있습니다. CSS 수업 초기에 언급했던 '정보로써의 html' 의 가치또한 퇴색되지 않습니다.

캐시(Cache)
한번 페이지를 방문해서 Style.css 파일을 다운받았다면, 다음부터 방문할때 웹브라우저는 컴퓨터 내에 저장된 Style.css 파일을 불러와서 빠르게 훨씬 페이지를 읽고 네트워크 트래픽 또한 다시 사용하지 않습니다.