반응형
CSS link와 import 차이
작성 위치
- link와 import 모두 head 섹션에 있지만,
link 태그는 상단에 작성되고,
import는 head 섹션 내부의 style 태그 안에 작성된다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
@import url("main.css");
</style>
</head>
<body>
</body>
</html>
비교
사용은 비슷하나, link 방식을 사용하는 것이 @import 방식을 사용하는 것보다
페이지의 로딩 속도 측면에서 뛰어나다.
link 방식
- HTML의 link 태그 사용
- 유지보수 용이
: CSS 연결 방식으로 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가
- 직렬방식이 아닌 병렬방식으로 다운로드 하기떄문에, 로딩속도 빠르다.
@import 방식
- CSS파일 내에 @import를 이용하여 CSS를 연결하는 방식
: 하나의 CSS파일에 여러개의 페이지 CSS를 로드하여 편리하다.
반응형
'IT > Etc.' 카테고리의 다른 글
| 501 command helo requires an argument Syntax error (0) | 2023.03.02 |
|---|---|
| 리눅스(Linux) su / su - / sudo 명령어, 차이 (2) | 2021.05.02 |
| Chrome 브라우저에서 Ajax 테스트 (0) | 2018.11.22 |
| 이클립스 (Eclipse) 메모리 설정 Heap 영역 늘리기&사용량 확인 (0) | 2018.01.15 |
| 정규식 예제 정리 (0) | 2017.12.27 |