CSS 기초 개념 - CSS 코드의 재사용 #07

이전의 우리는 웹페이지 1개에 css를 입혔고, 미디어 쿼리도 사용했다. 나머지 페이지에도 똑같은 작업을 해보자.

그런데 1억개의 페이지를 쉽게 바꿔야 한다면? 만약에 링크의 줄을 모두 다시 생성해야 한다면?

간단한 코드를 작성하더라도 1억개의 페이지를 모두 바꿔야 한다.

css 코드가 모든 페이지에 중복되기 떄문에 문제가 발생한다.

이 중복을 제거해보자.

지금까지 작성한 <style> css코드를 복사해서 보내버리자. 새로 생성한 style.css 파일에 넣어두자. 그리고 <head>에 다음과 같은 코드를 집어넣는다.

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

이 웹페이지에 공통된 스타일을 복붙한다. 그러면 중복된 코드는 삭제되고 코드가 가벼워진다. 이를통해 유지보수도 매우 간편해진다.

이렇게 하나의 style.css를 공유하면 이를 링크한 웹페이지가 가지고 있는 css가 공통된다는 것을 확신할 수 있다.

만약, 일일이 코드를 작성했다면 그들이 가지고 있는 css 코드가 공통됐다고 확신은 할 수 없다.

또한 코드가 길어지면 공통된 css를 파악하기가 어려워진다.

또한 해당 style.css를 복붙하면 어떤 코드인지 확인을 안해도 시각적으로 확인할 수 있다.

공유하는 css파일이 있으면 1개의 수정으로 모든 웹페이지의 수정이 가능하다.

코드의 양이 줄었기 때문에 웹페이지를 다운로드 받을 때 인터넷료를 덜 낼 수 있다.

개발자도구 -> Network -> 새로고침 -> 어떤 파일을 다운로드 받고 실행을 할 수 있는지 어느 순서인지 적용 가능.

사실은

사실 웹 페이지 안에 css를 넣는 것이 css파일을 따로 저장하는 것보다 네트워크적으로 더 효율적인 서버 활동이다.

하지만 캐싱(cashing, 저장하다)이라는 것이 있어서 효율적인 활동이 있다. 예를 들어 우리가 작성한 css를 미리 다운로드 시켜놓으면 그 css파일이 적용된 페이지를 들어갈 때, 다시 다운로드 받지 않아도 되기 때문이다.

정보 기술에 있어서 중복을 제거하고 재사용성을 높이고 가독성을 높이는 것이 얼마나 중요한 것인지 공감해야한다.

끝!

비전공 출신의 개발자 일기