CSS @import 규칙이란?
@import 규칙은 외부 스타일시트 파일을 현재 문서로 가져올 때 사용하는 CSS 문법입니다. 기능적으로는 HTML의 <link> 요소와 매우 유사하게 동작하며, 별도의 CSS 파일에 정의된 스타일을 재사용할 수 있게 해줍니다.
@import 규칙의 기본 문법
@import 규칙은 다음과 같은 형식으로 작성합니다:
<head>
<style>
@import url("스타일시트-URL");
</style>
</head>또는 문자열 형태로 URL을 직접 지정할 수도 있습니다:
@import "new.css";
사용 예제
다음 예제는 HTML 문서에 외부 스타일시트 파일을 가져오는 방법을 보여줍니다:
<head> <style> @import "new.css"; </style> </head>
이렇게 하면 new.css 파일에 정의된 모든 스타일 규칙이 현재 문서에 적용됩니다.
@import 사용 시 주의사항
- 선언 위치: @import 규칙은 스타일시트 내 다른 모든 규칙보다 앞에 선언해야 합니다. 단,
@charset규칙은 예외입니다. - <link>와의 차이:
<link>요소는 병렬로 리소스를 불러오는 반면, @import는 순차적으로 처리되어 페이지 로딩 속도가 느려질 수 있습니다. - 성능 고려: 여러 개의 @import를 중첩해서 사용하면 네트워크 요청이 연쇄적으로 발생하므로, 성능이 중요한 프로젝트에서는
<link>방식을 권장합니다.
@import vs <link> 비교
| 구분 | @import | <link> |
|---|---|---|
| 선언 위치 | CSS 파일 또는 <style> 태그 내부 | HTML <head> 영역 |
| 로딩 방식 | 순차적 로딩 | 병렬 로딩 |
| 성능 | 상대적으로 느림 | 빠름 |
결론적으로 @import는 CSS 파일 간 의존성을 관리하거나 조건부로 스타일을 가져올 때 유용하지만, 일반적인 웹 페이지 최적화 관점에서는 <link> 요소 사용이 더 효율적입니다.