HTML 파일에서 <head> 안에 <link>를 통해 css를 선언할 수 있습니다. 그런데 공부를 하다가 아래와 같은 코드를 만났습니다.
<index.html>
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<title>웹카페-고정형 레이아웃</title>
<link rel="stylesheet" href="css/style.css" /> <!-- 공부: type="tet/css" 는 기본값이여서 생략 -->
</head>
<body>
<div class="container">
<header class="header">header</header>
<div class="visual">visual</div>
<main class="main">
<div class="group group1">group1</div>
<div class="group group2">group2</div>
<div class="group group3">group3</div>
</main>
<article class="slogan">slogan</article>
<div class="footer-bg">
<footer class="footer">footer</footer>
</div>
</div>
</body>
</html>
<style.css>
@charset "utf-8";
@import url(./normalize.css);
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
color: #181818;
background-color: #fff;
font-family: 'Spoqa Han Sans';
font-weight: 400;
}
<style.css> 파일을 보면 import로 <normalize.css>를 불러옵니다.
HTML 파일에서 <link>를 통해 가져올 수 있는데, 왜 css 파일에서 import로 불러왔을까요?
사용자가 웹에 접속했을 때 브라우저는 html과 css를 요청할 것이고 서버의 응답을 받은 후 html 문서를 렌더링 해줄 것입니다. 이때 html 파일에 css 파일이 5개 link 되어 있다고 가정하면, 5개의 css파일을 불어와야 할 것입니다. 한 사람이라면 괜찮지만, 사용자가 많아지면 서버는 더욱 커져야 될 것입니다.
이때 css 파일에 import를 하면 배포 단계 전에 번들링을 하면, 해당 css 파일과 import 된 파일이 하나의 파일로 압축되어 메모리 소모를 줄일 수 있어서 import를 사용한 것으로 생각됩니다.
'CSS' 카테고리의 다른 글
| float 속성 중 하나 : 텍스트 밀림 (0) | 2020.07.15 |
|---|---|
| 박스 가운데 정렬에 다양한 방법이 있는 이유 (0) | 2020.07.15 |
| CSS 우선순위 (0) | 2020.07.14 |
| CSS 선언 방법 (0) | 2020.07.14 |
| CSS 네이밍 케이스 (0) | 2020.07.14 |