4.2.1 내부 스타일 시트 사용하기
내부 스타일 시트(internal style sheet)는 HTML 파일 내부에 CSS 코드를 작성하는 방법입니다. HTML에서 제공하는 태그 중에 style 태그가 있는데, style 태그의 콘텐츠로 CSS 코드를 작성하면 됩니다.
형식
<style> /* CSS 코드 */ </style>
실제 코드에서 내부 스타일 시트 방법으로 CSS를 적용할 때는 다음과 같이 작성합니다.
04/02/internal.html
<head>
<title>내부 스타일 시트(Internal Style Sheet)</title>
<style>
h1{
color:blue;
}
</style>
</head>
<body>
<h1>내부 스타일 시트</h1>
</body>
style 태그를 사용하는 위치는 정해진 기준이 없지만, 보통 앞의 코드처럼 head 태그 안에 사용합니다. 웹 브라우저는 HTML 문서를 해석할 때 HTML 문서에 작성된 코드를 첫 번째 줄부터 순차적으로 해석합니다. 그리고 웹 브라우저에 표시되는 내용은 body 태그 안에 작성합니다. 따라서 head 태그에 CSS를 작성하면 body 태그에 작성된 내용이 사용자에게 노출되기 전에 CSS를 불러와 빠르게 디자인을 적용할 수 있는 장점이 있습니다. 그러나 웹 브라우저에서 HTML 문서를 해석할 때마다 CSS 코드를 매번 다시 읽기 때문에 성능상으로는 좋지 못하다는 단점도 있습니다.