CSS 파일을 HTML에서 로드하기 위해서는 1) link 태그와 2) @import 사용하는 방법 두 가지가 있습니다.
1) link 태그
<!-- index.html -->
<head>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>Hello</div>
</body>2) @import
<style type="text/css">
@import url("css/main.css");
</style>
**주의해야 할 점
common1.css 파일부터 common4.css 파일까지 총 4개의 파일이 있다고 가정해보겠습니다. 첫번째 사례로 주어진 index.html은 독립적인 common*.css 파일들을 불러옵니다. 이것은 병렬방식으로 common1.css 파일부터 common4.css 파일까지 거의 동시에 읽어옵니다. 따라서 한 파일을 읽는데 1초가 걸린다고 가정하더라도 1초정도면 4개의 모든 파일을 불러올 수 있습니다.
<!-- index.html -->
<head>
<link rel="stylesheet" href="css/common1.css">
<link rel="stylesheet" href="css/common2.css">
<link rel="stylesheet" href="css/common3.css">
<link rel="stylesheet" href="css/common4.css">
</head>
<body>
<div>Hello</div>
</body>반면 아래와 같이 common1.css 는 common2.css를 import하고, common2.css는 common3.css를 import 하는 등의 형태를 가진 경우 차례대로 import 하는 순서를 거치게 됩니다. 이를 직렬방식이라고 합니다. 한 개의 파일을 import 하고 난 후에 다른 한개의 파일을 import 하는 형식으로 위와 같이 파일을 읽는데 1초가 걸린다고 가정하면 총 4초가 걸리게 됩니다. 한 개의 파일을 다운받은 후 다른 한 개의 파일을 다운받기 때문입니다.
이러한 방식은 상위 파일이 세팅이 되어있어야 하위 파일이 제대로 된 모습을 나타낼 수 있는 형태라면 import 규칙을 활용해야 합니다. 만약 common1.css가 정의되어 있어야 common2.css가 제대로 나타나게 된다면, 위의 사례 같은 경우 동시에 다운되기 때문에 common2.css가 먼저 다운받아 정의되어 common1.css에서 입력한 값이 common2.css에 적용되지 않을 가능성이 있기 때문입니다.
<style type="text/css">
@import url("css/common1.css");
</style>/* common1.css */
@import url("./common2.css");/* common2.css */
@import url("./common3.css");/* common3.css */
@import url("./common4.css");/* common4.css */
div {
color: red;
font-size: 20px;
font-weight: bold;
}'FrontEnd > CSS' 카테고리의 다른 글
| #9. CSS 선택자(Selector) - 가상 요소 선택자 (0) | 2021.11.05 |
|---|---|
| #8. CSS 선택자(Selector) - 복합선택자 / 가상 클래스 선택자 (0) | 2021.11.05 |
| #6. CSS Reset 사용방법 (0) | 2021.11.02 |
| #5. CSS에서 색깔을 변수로 사용하는 방법 (0) | 2021.07.27 |
| #4. CSS FlexBox(Flexible Box module) 사용법 (0) | 2021.07.23 |
