CSS

CSS 파일 분리와 최적화: 외부 스타일 시트와 Minify 가이드

by mystee
포스트 썸네일 이미지

이번 포스트에서는 HTML 내부에 CSS 코드를 쌓아두지 않고 외부 파일로 분리하여 성능과 유지보수성을 동시에 잡는 방법과, 배포 전 필수 단계인 코드 경량화Minify에 대해 알아보겠다.




이전 포스트

CSS transition 속성: 부드러운 애니메이션을 만드는 효과

CSS transition 속성을 활용해 웹 요소에 생동감을 불어넣는 방법을 알아봅니다. property, duration, delay는 물론, 애니메이션의 리듬을 결정하는 타이밍 함수 활용법까지 상세히 정리했습니다. 최신 브라우저 환경에 맞춘 코드를 확인해 보세요.




생활코딩 CSS 수업 영상: link & import


color를 colore라고 오타를 내서 집중하기 힘들지만, 영상 중반 이후에 수정할 거니까 신경 쓰지 말고 집중하자.


영상의 내용처럼 HTML 파일 밖으로 CSS를 분리하여 관리하는 이 방식은 다음과 같은 장점이 있다.


  • 재사용성: 하나의 CSS 파일만 잘 만들어두면 수십, 수백 개의 HTML 페이지에 동시에 적용할 수 있다.
  • 유지보수 용이: 디자인을 수정하고 싶을 때 CSS 파일 하나만 고치면 연결된 모든 페이지가 한꺼번에 바뀐다.
  • 성능 향상: 브라우저가 CSS 파일을 한 번 다운로드하면 캐시Cache에 저장해두기 때문에, 다른 페이지로 이동할 때 다시 다운로드하지 않아 로딩 속도가 빨라진다.
  • 코드의 분리: HTML은 '구조'만, CSS는 '디자인'만 담당하게 되어 코드가 훨씬 깔끔해진다.





<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>page1</h1>
</body>
</html>

CSS 코드만 넣은 style.css라는 파일을 따로 만들어두고, 위의 코드처럼 <head> 태그 안에 <link rel="stylesheet" href="style.css">라는 코드를 넣으면 된다.

이 방식을 외부 스타일 시트라고 부른다.

별도의 .css 파일을 만들고 HTML에서 연결만 하는 방식이다.




<!DOCTYPE html>
<html>
<head>
    <style>
        @import url("style.css");
    </style>
</head>
<body>
    <h1>page2</h1>
</body>
</html>

이렇게 <style> 태그 안이나 다른 CSS 파일 안에서 @import url("style.css");를 사용하는 것을 임포트Import 방식이라고 한다.




구분 link 방식 @import 방식
명칭 외부 스타일 시트 연결 CSS 임포트
로딩 방식 HTML 로딩과 동시에 병렬로 다운로드 HTML을 먼저 읽고, CSS 파일을 해석하다가 발견하면 그제서야 다운로드 (직렬)
속도 매우 빠름 (추천 방식) 상대적으로 느림 (로딩 지연 발생 가능)
용도 메인 스타일 시트를 연결할 때 특정 CSS 안에서 또 다른 CSS 조각을 가져올 때

외부 스타일 시트와 임포트 방식, 이 두 방법의 차이는 '불러오는 시점'과 '성능'에 있다.


요약하자면, 브라우저는 <link>를 만나면 HTML을 읽으면서 동시에 CSS를 미리 가져오지만, @import는 HTML을 다 읽고 CSS 스타일을 뒤늦게 다시 가져오는 과정을 거친다.

그래서 실제 서비스에서는 대부분 <link> 방식을 권장한다.





생활코딩 CSS 수업 영상: 코드 경량화 (Minify)


코드 경량화Minify란 코드의 공백, 줄 바꿈, 주석을 제거하여 파일 용량을 최소화하는 작업이다.

<link>를 쓰는 이유 중 하나가 성능인데, Minify는 그 성능을 극대화하는 직접적인 방법이다.




clean-css online

설명 없음
adamburgess.github.io

영상에서 나오는 Minify를 해주는 웹페이지의 링크다.


VSCode에도 당연히 'MinifyAll'과 같은 코드 경량화를 해주는 확장 기능이 있다.

본인에게 편한 방법을 사용하도록 하자.




웹사이트를 실제로 배포할 계획이라면, 코드 경량화는 선택이 아닌 필수다.

작은 공백 하나를 지우는 사소한 노력이 모여 사용자에게 쾌적한 로딩 속도를 선사하는 법이니까.

깔끔하게 분리된 코드와 가벼워진 파일로 더 완성도 높은 웹사이트를 만들어보자.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
Tags

작성자: mystee

이전

댓글 쓰기

0 Comments

댓글 쓰기

🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩

문의하기 양식