Definition
HTML문서에 body에 적용된 element에 Style을 적용하는 방법은 총 3가지가 존재합니다.
- 인라인 스타일
- 내부 스타일 시트
- 외부 스타일 시트
인라인 스타일
HTML tag에 속성 정보를 넣어서, 직접 Style을 변경하는 것이 가능합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Style 적용 test</title>
</head>
<body>
<h1>heading 1</h1>
<p style="color:green;">단락 정보</p>
</body>
</html>
내부 스타일 시트
HTML 문서의 <head> tag내에 style을 정의하여, <body> tag에 있는 element에 style을 적용하는 것이 가능합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Style 적용 test</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>heading 1</h1>
<p>단락 정보</p>
</body>
</html>
외부 스타일 시트
HTML문서가 아닌 CSS파일을 HTML문서로 Loading 하여 Style을 적용하는 것이 가능합니다.
/* style.css */
h1 {
background-color:#456;
color:#afe;
}<!-- html 문서 -->
<!DOCTYPE html>
<html lang="ko">
<link>
<meta charset="UTF-8">
<title>Style 적용 test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>heading 1</h1>
<p>단락 정보</p>
</body>
</html>