📝 CSS
🖥️ CSS 연결
1-1. CSS 연결 방법
- 외부 파일을 빼는 방법에는 크게 두 가지가 있다.
- 방법 :
link,import
1-2. link와 import
- link와 import 모두 head 섹션에 위치해있지만, link 태그는 상단에 작성되고 import는 head 섹션 내부 style 태그 안에 작성된다.
- link 방식이 @import 방식보다 페이지 로딩 속도가 빠르다.
1-3. link 방식
<link rel="stylesheet" href="style.css"/>
- link 태그 사용
- 유지보수에 용이하다.
- 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가
1-4. @import 방식
<style> @import url('style.css') </style>
- CSS파일 내에 @import를 이용하여 CSS를 연결하는 방식
- 하나의 CSS 파일에 여러 개의 CSS 페이지를 로드하여 편리하다.
📝 예제
파일명 : style.css
@charset "UTF-8";
h1{ color: powderblue; }EX) link 방식
<head>
...
<style>
h1{ color: powderblue; }
</style>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>page1</h1>
</body>EX) @import 방식
<head>
...
<style>
@import url('style.css');
</style>
</head>
<body>
<h1>page1</h1>
</body>