728x90
반응형
웹 페이지에 스타일시트를 적용하는 3가지 방법
1. inline css (줄 내부 css)
- HTML style attribute를 사용하는 방식
- 적용 우선 순위가 가장 높다.
- style 속성의 값은 css 문법이다.
2. internal css (내부 css)
- 페이지 내부의 style 태그를 사용하는 방식
- 더 나중에 나온 스타일이 우선 순위를 갖는다.
3. external css (외부 css)
- 외부의 css 파일을 사용하는 방식
- <link> 태그를 사용해 외부의 css를 불러와서 사용한다.
- 더 나중에 나온 스타일이 우선 순위를 갖는다.
< 실행시키면 설명이 나오는 브라우저 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_CSS 적용하기.html</title>
<style>
/* internal css */
dl {
color: tomato;
}
dt {
color: deeppink;
}
dd {
color: goldenrod;
}
/* 나중에 나온 스타일이 최종적으로 반영된다. */
dt {
color: fuchsia;
}
</style>
<style>
dt {
color: indigo;
}
</style>
<link rel="stylesheet" href="./assets/css03.css">
</head>
<body>
<h3># 웹 페이지에 스타일시트를 적용하는 3가지 방법</h3>
<dl>
<dt style="/* CSS Comment */color: green;">1. inline css (줄 내부 css)</dt>
<dd>
- HTML style attribute를 사용하는 방식 <br>
- 적용 우선 순위가 가장 높다. <br>
- style 속성의 값은 css 문법이다. <br>
</dd>
<dt>2. internal css (내부 css)</dt>
<dd>
- 페이지 내부의 style 태그를 사용하는 방식 <br>
- 더 나중에 나온 스타일이 우선 순위를 갖는다. <br>
</dd>
<dt>3. external css (외부 css)</dt>
<dd>
- 외부의 css 파일을 사용하는 방식 <br>
- <link> 태그를 사용해 외부의 css를 불러와서 사용한다. <br>
- 더 나중에 나온 스타일이 우선 순위를 갖는다.
</dd>
</dl>
</body>
</html>728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] 여백(margin, padding) (0) | 2023.06.04 |
|---|---|
| [CSS] 테두리(border) (0) | 2023.06.04 |
| [CSS] 배경(background) (0) | 2023.06.04 |
| [CSS] 선택자 (0) | 2023.06.04 |
| [CSS] CSS (0) | 2023.06.02 |
