CSS 편 - 5일차

개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 8. 09:00

14. CSS 코드의 재사용

지금까지 2.html에서 작업한 내용을 1.html, 3.html, index.html에 적용하려면 붙혀넣어야 한다.
번거롭지 않은가? 지금은 파일이 4개이지만 1억개라면 다른 일을 알아봐야 하지 않을까?
또한 CSS 코드 내에 수정할 사항이 있다면 1억번 수정해야 할 것이다.
이 문제의 원인은 작성한 CSS 코드가 모든 파일에 중복해서 등장하기 때문이다.
그래서 이 문제를 해결하기 위하여 <style>내의 CSS 코드만 복사하여 style.css를 생성하여 붙혀넣은 다음에 아래와 같은 코드를 <style> 코드가 있던 곳에 붙혀넣는다.

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

결과는 같지만 내부적으로는 완전히 구현이 달라지며 훨씬 더 효율적인 상태가 된다.
이 코드를 다른 3개의 파일에도 붙혀 넣어주면 매우 간단하기 적용이 가능하며, 만약 수정을 하더라도 1분안에 모든 웹 페이지(가령 1억개라 하더라도)를 수정 가능하다.
즉, 재사용성이 높아지고 사용하는 입장에서도 내부적인 코딩의 원리를 몰라도 사용할 수 있게 되니 사용성이 높아진다.
그리고 코드의 양이 줄었기 때문에 이 웹 페이지를 내려받을 때 인터넷 트래픽을 덜 쓸 수 있다는 것도 매우 중요한 경제적 효과이다.
물론 style.css 파일을 HTML 파일과 분리해 뒀다고 해서 style.css 파일을 다운로드 하지 않는 것은 아니다.
한번 확인해 보자. 크롬 개발자 도구를 열고 Network 탭으로 가면 현재 보고 있는 html 파일을 새로고침했을 때 내부적으로 어떤 파일을 웹 서버에서 다운로드하는지 확인할 수 있다.

이처럼 하나의 웹 페이지를 구성하는 여러 개의 파일을 별도로 분리해 두고 내려받는 것과 그냥 웹 페이지 안에 CSS 코드를 내장하는 것 중에서 어떤 것이 더 네트워크적인 측면에서 더 효율적일까?

웹 페이지 안에 CSS를 직접 작성하는 것이 그 자체로는 더 효율적이다.
하지만 캐싱(cache)이라는 기법때문에 반드시 그렇지만은 않다.
캐싱이라는 것은 저장한다는 뜻인데, 한번 style.css 파일을 다운로드했다면 이 style.css의 내용이 바뀌기 전에는 style.css 파일을 웹 브라우저가 컴퓨터에 저장해 뒀다가 다음에 style.css 파일을 요청하면 저장된 결과를 가져와 속도를 높일 수 있고 사업자들은 돈을 덜 쓸 수 있는 굉장히 중요한 효과를 얻게 된다.
또한 이 캐시를 통해 style.css 파일을 캐싱할 수 있게 되면 훨씬 더 빠르게 웹 페이지를 보여줄 수 있으며, 네트워크 트래픽도 훨씬 더 적게 쓸 수 있다는 중요한 효과를 얻을 수 있으므로 가급적 CSS 파일을 별도로 만들어 중복을 제거하는 것을 추천한다.

지금까지 CSS를 지배하는 정말 중요한 규칙을 배웠다.
그중에서 가장 중요한 것은 선택자와 속성이다. 속성을 많이 알수록 표현력은 풍부해지고, 선택자를 많이 알수록 알고 있는 속성들을 좀 더 정확하게 표현할 수 있게 된다.

해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.