* External (외부 선언)
<link> 태그를 통해 외부 css 파일을 링크해서 사용합니다.
유지보수, 퍼포먼스 관점에서 우수합니다.
javascript 같은 경우, src 속성을 사용하는데 이는 연결이 아니라 삽입의 개념이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>연습장</title>
<link rel="stylesheet" href="css/style.css" />
<!-- type="text/css"는 link의 기본값이기 때문에 생략될 수 있습니다. -->
</head>
<body>
<div class="box"></div>
</body>
</html>* Embedded / Internal (내부 선언)
<head> 태그 안에서 <style> 요소들을 정의합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>연습장</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>* Inline (엘리먼트에 직접 선언)
HTML 태그 안에서 style 속성을 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>연습장</title>
</style>
</head>
<body>
<div stlye="backgroud-color: #000"></div>
</body>
</html>'CSS' 카테고리의 다른 글
| CSS 파일을 link 대신 import 하는 이유 (0) | 2020.07.14 |
|---|---|
| CSS 우선순위 (0) | 2020.07.14 |
| CSS 네이밍 케이스 (0) | 2020.07.14 |
| CSS3 Design (0) | 2020.07.14 |
| Css Grid 속성 (0) | 2020.06.25 |