1. 스타일 시트의 역할: 스타일 시트는 HTML 요소를 선택하여 요소의 레이아웃(배치)와 스타일(Style)을 변경할 때 사용한다.
2. 스타일 시트의 적용: 스타일 시트 적용 방법에는 세가지가 있다.
2-1. 인라인 스타일시트 적용: 시작태그에 style 속성을 사용하여 스타일시트를 적용한다.(스타일시트 적용 우선순위가 가장 높다)
2-2. 내부 스타일시트 적용:<head> 내부에 <style>를 작성하고 스타일시트를 적용한다.
2-3. 외부 스타일시트 적용: 별도의 *.css 파일을 외부에 저장한 후 이 파일을 HTML 문서에 포함시켜 스타일시트를 적용한다.(스타일시트 적용 우선순위가 가장 낮다.)
3. 스타일시트 적용 우선순위: 인라인 스타일시트 > 내부 스타일시트 > 외부 스타일시트
4. HTML 요소를 선택할 때는 '선택자(Selector)'를 사용한다.
<!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>스타일 시트 기본 문법</title>
<link rel="stylesheet" href="css/style.css">
<!-- link 태그로 외부 스타일시트 파일을 HTM 문서에 포함시킨다. -->
<style>
.inner {font-size:24px; color:brown;}
</style>
</head>
<body>
<h2>Stylesheet</h2>
<p style="font-size:24px; color:blue;">인라인 스타일시트 적용</p>
<p class="inner">내부 스타일시트 적용</p>
<p class="outer">외부 스타일시트 적용</p>
</body>
</html>