반응형
이전 포스팅에서 CSS를 사용하기 위해서는 html에 연결해야 된다고 설명했었다.
이번 포스팅에서는 CSS 연결 방법에 대해 설명한다.
link
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
</body>
</html>
CSS 연결은 보통 <head> 안에 지정한다. link는 html 태그로, 연결할 css 파일을 지정하여 이를 연결시킬 수 있다.
rel = "stylesheet" 는 해당 파일이 스타일시트(css)이며,
type="text/css"는 해당 파일이 text형식의 css파일이라는 것을,
href= "main.css"는 해당 파일의 경로를 나타내는 것이다.
사실, rel, type을 지정하지 않고 href만 지정해도 연결은 되지만,
해당 방법이 정석임으로 이대로 하는 것을 추천한다.
import
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
@import url("main.css");
</style>
</head>
<body>
</body>
</html>
import 방법은 <style> 안에 css 파일을 연동시킨다고 생각하면 된다.
css 파일 안에도 import를 통해 다른 css파일을 연동시킬 수 있다. (font css 파일을 가져올 때 이 방법을 많이 쓴다.)
먼저 @import로 선언을 해주고, url()을 통해 해당 명령어가 주소라는 것을 인식시킨 이후, url()안에 css파일의 경로를 입력해 주면 된다.
@import url(" css 파일 경로 " );
마지막으로, 기본이지만 다시 한번 상기시키는 의미에서..
모든 style 속성 이후 세미콜론(;)을 반드시 붙여야 한다!
반응형
'Develop > Web' 카테고리의 다른 글
| [HTML / CSS] CSS :not - 부정문 (0) | 2018.12.18 |
|---|---|
| [HTML / CSS] CSS calc() - 수치 연산 (0) | 2018.12.15 |
| [HTML / CSS] CSS기초 2. style 선언자 (tag, id, class) (0) | 2018.11.22 |
| [HTML / CSS] CSS 기초 1. Style과 CSS (0) | 2018.11.22 |
| [WEB / JQuery] Click 이벤트가 작동하지 않을 때 대처 (0) | 2018.11.10 |