@import 타입:
(장점)
1. 스타일시트를 다른 스타일시트에 포함시키기 쉽습니다.
2. HTML 문서가 로드된 후에 실행되므로 일부 스타일을 지연하여 로드할 수 있습니다.
(단점)
1. 순차적으로 로드되므로, 한 파일이 로딩되기 전까지 다음 파일의 로딩이 시작되지 않습니다. 이로 인해 페이지 로딩 시간이 더 걸릴 수 있습니다.(병렬 로딩 제한)
2. 브라우저가 캐싱하기 어렵습니다. 브라우저는 각각의 @import 문을 별개로 처리하기 때문에 전체 스타일시트를 캐시하기 어려울 수 있습니다.
/* @import 사용법 */
@import url('reset.css');
@import url('layout.css');
@import url('typography.css');
/* 나머지 스타일 규칙들 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}<link> tag 타입:
(장점)
1. 여러 개의 <link> 태그를 사용하여 병렬로 여러 스타일시트를 동시에 로딩할 수 있습니다. 페이지 로딩 속도를 향상시킬 수 있습니다.
2. 브라우저가 전체 스타일시트를 하나로 인식하여 캐싱하기 용이합니다. 로딩 속도가 개선됩니다.
(단점)
1. <link>를 사용하면 별도의 HTML 태그가 필요하므로 코드가 더 길어질 수 있습니다.
2. 스타일시트를 다른 스타일시트에 삽입하는 것이 상대적으로 불편할 수 있습니다. 모든 스타일시트를 한 곳에서 관리하기 어려울 수 있습니다.
결론 :
<link>를 사용하는 것이 권장합니다. 병렬 로딩과 브라우저 캐싱의 이점으로 인해 페이지 성능이 향상되기 때문입니다.
다만, 특별한 경우나 특별한 경우에만 @import를 사용하세요.
/* <link> tag 타입 사용법 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<!-- 외부 CSS 파일을 연결 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 웹 페이지의 내용 -->
</body>
</html>
궁금한게 있으시면 댓글 달아주세요.
답변 해드릴게요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.
반응형
'Front End > HTML' 카테고리의 다른 글
| [HTML] a 태그(tag) 속성 (href, target, title 등) (0) | 2024.01.25 |
|---|---|
| [HTML] 뷰포트(viewport) 사용법 (반응형) (0) | 2024.01.12 |
| [HTML] input [type="file"] 속성(property) 정리 (0) | 2023.06.14 |