HTML에 CSS를 적용할 때에는 세가지 방식을 사용할 수 있습니다.
-
인라인 스타일(Inline style)
-
내부 스타일 시트(Internal style sheet)
-
외부 스타일 시트(External style sheet)
1. 인라인 스타일(Inline style)
인라인 스타일은 HTML 단일 요소에 스타일을 적용하는 방식입니다.
HTML 태그 안에 style 속성을 정의해 CSS 스타일을 적용할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
이 방식은 한 번 설정된 스타일을 변경하기가 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 됩니다.
2. 내부 스타일 시트(Internal style sheet)
하나의 HTML 페이지에 고유한 스타일을 적용하는 경우 내부 스타일 시트를 사용할 수 있습니다.
내부 스타일은 헤드 섹션 내부의 <style> 요소 내부에 정의됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>3. 외부 스타일 시트(External style sheet)
외부 스타일 시트를 사용하면 파일 하나만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!
외부에 작성된 스타일 시트 파일은 .css 확장자를 사용하여 저장됩니다.
각 HTML 페이지는 <head> 태그 안에 <link> 태그를 사용하여 외부 스타일 시트에 대한 참조를 포함하면 스타일이 적용됩니다.
다음과 같이 "mystyle.css" 파일이 있으면
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}아래처럼 <head>안에 <link> 태그를 사용해서 부분에 "mystyle.css"를 참조하면 페이지에 스타일 시트가 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>스타일 적용의 우선순위
위에서 설명한 방법들이 혼합되어 사용될 경우, 적용되는 스타일의 우선 순위는
- 인라인 스타일 (HTML 요소 내부에 위치함)
- 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치함)
- 웹 브라우저 기본 스타일
순서로 적용됩니다.
예를 들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용됩니다.
또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용됩니다.
따라서 웹 사이트의 스타일 적용은 외부 스타일 시트를 사용하는 것이 유지 보수도 편하며, 가장 안정적입니다.
