HTML, CSS

다른 CSS 파일 불러오기 – @import로 CSS를 나눠서 관리해보자!

jonbeo 2025. 5. 24. 10:25
반응형

 

 

 

웹사이트를 만들다 보면 CSS가 점점 길어지고 복잡해지는 경우가 많아요.
이럴 땐 스타일 파일을 기능별로 나눠서 관리하면 훨씬 편해요.

이번 글에서는 CSS 파일을 분리해서 @import로 불러오는 방법을 설명할게요.
어디서 어떻게 불러오는 게 좋은지, 어떤 점에 주의해야 하는지도 함께 살펴보자구요!

✅ 왜 CSS 파일을 나눠서 관리해야 할까?

처음엔 하나의 style.css 파일로 시작하지만,

  • 헤더
  • 푸터
  • 버튼
  • 폼 스타일
    등이 점점 많아지다 보면 수십, 수백 줄이 되죠.

이때 CSS를 역할별로 나누고,
메인 파일에서 @import로 불러오면

  • 유지보수가 쉬워지고
  • 협업도 편해지고
  • 필요할 땐 개별 파일만 수정하면 됩니다!

🛠 기본 문법: @import "파일경로";

CSS에서 다른 파일을 불러올 때는 @import를 사용해요.

@import "reset.css";
@import "components/header.css";
@import "components/footer.css";

 

@import는 항상 CSS의 가장 위쪽에 작성해야 해요!
다른 스타일보다 먼저 불러와야 하니까요.

📁 폴더 구조 예시

project/
├── index.html
├── css/
│   ├── style.css  ← 메인 CSS
│   ├── reset.css
│   ├── header.css
│   └── footer.css

 

style.css 안에서 다른 파일들을 아래처럼 불러올 수 있어요.

@import "reset.css";
@import "header.css";
@import "footer.css";

 

style.css 하나만 <link>로 HTML에 연결해두면
나머지 파일들도 함께 불러와지게 되는 거죠!

🚨 주의할 점

  • @import는 항상 맨 위에 있어야 해요.
    스타일 코드보다 먼저 써야 적용됩니다.
  • import할 때 **확장자(css)**는 꼭 써야 돼요.
    (@import "header"; ❌ → @import "header.css"; ✅)
  • 너무 많은 파일을 import하면 로딩 속도에 영향을 줄 수 있어요.
    꼭 필요한 범위에서 분리해서 쓰는 걸 추천해요.

🧠 팁! SCSS를 쓰면 더 강력하게 나눌 수 있어요

만약 SCSS 같은 전처리기를 쓰고 있다면,
@import보다 더 강력한 모듈화가 가능해요.

@import "variables";
@import "mixins";
@import "layout/header";
@import "layout/footer";

 

하지만 순수 CSS 기준이라면 오늘 배운 방식이 가장 깔끔하고 쉬운 구조예요!

반응형