1. 인라인 방식
- 태그 자체에
style 속성으로 스타일을 주는 방식입니다.
- 일부 스타일 적용에 제한이 있습니다.( ex. 가상 요소(
:hover, ::before, ::after) 사용불가 )
<p **style="color:yellow; background-color:black;"**>Hello wold</p>
2. 내부 스타일
- head 태그 안
style 태그를 사용하여 스타일을 주는 방식입니다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>내부 스타일</title>
**<style>
p {
color:yellow;
background-color:black;
}
</style>**
</head>
<body>
<p>Hello world</p>
</body>
</html>
- 코드가 길어질수록 HTML 파일 길이가 길어지기 때문에 효율적이지 않습니다.
3. 외부 스타일
link
- 현재 문서와 외부 리소스의 관계를 명시합니다.
- 빈 태그로 속성만을 포함합니다
head 요소 내부에만 위치할 수 있습니다.rel: relations 관계. 대상 파일의 속성을 나타냅니다. css 파일은 stylesheethref: hyper-references 경로. 연결 시 참조할 파일의 위치를 나타냅니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>외부 스타일</title>
**<link rel="stylesheet" href="style.css">**
</head>
<body>
<p>Hello world</p>
</body>
</html>
/* style.css */
p {
color:yellow;
background-color:black;
}