CSS) css 외부 참조

HTML CSS JS

Programmers 2021. 7. 28. 07:18

1. css 외부참조 (가능하면 이 방식을 추천)

html

<head>
	<link rel="stylesheet" href="css/common.css">
</head>
<body>
	<div> Hello </div>
</body>

link 태그 내의 rel="관계를 명시" href="파일 위치"

css

/* common.css */
div {
	color: red;
    font-size: 20px;
    font-weight: bold;
}

2. @import 방식

Css @import를 이용하여 외부문서로 css를 불러와 적용하는 방식

html

<head>
	<link rel="stylesheet" href="css/common1.css">
</head>
<body>
	<div> Hello </div>
</body>

css

/* common1.css */
@import url("./common2.css");

아래의 common2.css파일을 import한다.
css에서 다른 css를 @import가 가능하다.

css

/* common2.css */
div {
	color: red;
    font-size: 20px;
    font-weight: bold;
}

css는 한번에 호출하는 병렬방식으로 사용된다.

-> css1
-> css2
-> css3

css의 @import는 직렬방식으로 사용된다.
css1를 호출하면 css2를 import하고 완료된 후에 css3을 import한다.
css1 @import css2 -> css2 @import css3 -> css3