CSS를 적용할 때 <link> 태그를 이용해서 CSS를 불러온다
예로 보통 여러 개의 CSS파일을 연결하는 경우 아래와 같이 사용한다
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/style1.css"/>
<link rel="stylesheet" href="css/style2.css"/>
다른 방식으로는 @import를 통해서 하나의 CSS 파일 안에 여러 개의 CSS파일을 쓸 수 있다
@import를 이용해서 하나의 CSS 파일안에 여러 개의 CSS 파일을 넣어서 관리하는 경우 아래와 같이 사용한다
@import "css/style.css"; /*String 방식*/
@import "css/style1.css"; /*String 방식*/
@import url("css/style2.css"); /*url 방식*/
@import url("css/style3.css"); /*url 방식*/
@import를 이용해서 css를 여러 개 연결하는 경우 위와 같이 사용했을 때 안 될 때가 있다
아래와 같이 @import "style.css";를 맨 위로 선언한 경우는 문제없이 CSS가 실행된다
/*실행 예제*/
@import "style.css";
:root {
--color-black: black;
--color-gray: gray;
--color-white: white;
}
단, @import "style.css";를 아래에 맨 위가 아닌 아래에 적용하는 경우 실행되지 않는다
/*잘못된 예제*/
:root {
--color-black: black;
--color-gray: gray;
--color-white: white;
}
@import "style.css";