CSS - 선언 방식
2019. 11. 24. 10:49ㆍ웹/CSS
인라인 선언 방식
-
태그에 직접 스타일 작성
<div style=“color : red;>태그에 직접 작성 </div>
HTML 내장방식
-
<style></style> 안에 포함
-
선택자 필요
<head>
<style>
div {
color : red;
}
</style>
</head>
<body>
<div>HTML에 포함1</div>
<div>HTML에 포함2</div>
</body>
HTML 외부에서 불러오는 방식
-
CSS 코드를 분리하여 관리
-
분리된 하나의 CSS파일을 여러 HTML 파일에 불러와 사용 가능
<!-- HTML1 -->
<head>
<link rel=“stylesheet” href=“/css/main.css”>
</head>
<body>
<div>HTML 외부에서 불러오기1</div>
</body>
<!-- HTML2 -->
<head>
<link rel=“stylesheet” href=“/css/main.css”>
</head>
<body>
<div>HTML 외부에서 불러오기2</div>
</body>
<!-- main.css -->
div {
color : red;
}
@import 방식
- CSS @import 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식(@ ‘엣' 이라고 부름)
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>HELLO</div>
</body>
</html>
<!-- main.css -->
@import url("./main2.css");
<!-- main2.css -->
div {
color : red;
font-size : 20px;
font-weight: bold;
}
※ link 태그와 @import 차이점
-
link 태그는 html에서 외부에 있는 문서를 가지고 오는 것, @import 는 CSS 에서 외부 문서(CSS)를 가지고 오는 것
-
한 HTML에 여러개의 link 태그가 사용된 경우 동시에 link 태그에 연결된 문서를 동시에 가지고 오는(병렬 방식 호출) 반면, 한 CSS 파일에 여러개의 @import 가 사용된 경우 순차적으로 연결된 문서를 가지고 옴(직렬 방식 호출)
출처 : heropy.org
'웹 > CSS' 카테고리의 다른 글
| CSS - 가상클래스 선택자 - first-child, last-child, nth-child (0) | 2019.12.11 |
|---|---|
| CSS - 가상클래스 선택자(Pseudo-Classes Selectors) - hover, active, focus (0) | 2019.12.11 |
| CSS - 복합 선택자(Combinator) (0) | 2019.12.11 |
| CSS - 블럭 / 인라인 (0) | 2019.11.24 |
| CSS - 기본 선택자 (0) | 2019.11.24 |