웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많습니다. 이런 스타일
규칙들을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것을
'스타일 시트' 라고 합니다.
스타일 시트는 문서 안에서 사용할 스타일 규칙들을 정의한 '내부 스타일 시트'와
별도의 스타일 파일을 만들어 문서에 연결해 사용하는 '외부 스타일 시트'로
나뉩니다.
목차
내부 스타일 시트(Internal Style Sheet)
내부 스타일 시트는 HTML 문서 안에 <style>과
</style> 안에 스타일 코드를 넣는 방법입니다.
<style>
h1 {
color: blue;
}
</style>
HTML 문서의 어디에 넣어도 잘 적용됩니다. 이 방법은 HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있다는 장점이 있으나, 다른 HTML 문서에는 적용할 수 없다는 단점이 있습니다.
외부 스타일 시트(Linking Style Sheet)
외부 스타일 시트는 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. 예를 들어 다음의 내용으로 style.css 파일을 만듭니다. (CSS 파일의 확장자는 css입니다.)
h1 {
color: red;
}
적용을 원하는 HTML 문서에 다음의 코드를 추가합니다.
<link rel="stylesheet" href="style.css">
위 코드는 HTML 파일과 CSS 파일이 같은 폴더에 있다고 가정했을 때의 코드입니다. 경로는 적절히 수정해야 합니다. 예를 들어 HTML 문서가 있는 폴더에 css 폴더가 있고, 그 안에 style.css 파일이 있다면 다음과 같이 합니다.
<link rel="stylesheet" href="css/style.css">
이 방법의 장점은 여러 HTML 문서에 사용할 수 있다는 것입니다.
style.css를 적용시키고 싶은 문서에
<link> 태그로 연결만 해주면 됩니다.
인라인 스타일 시트(Inline Style Sheet)
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 적용할 대상 요소에 직접 표시할 수 있습니다.
인라인 스타일 시트는 HTML 태그의 style 속성 안에 CSS 코드를 직접 넣어 적용시킵니다.
<p style="color:blue;">Lorem ipsum dolor.</p>
해당 태그가 선택자(selector)가 되고, 스타일 코드에는 속성(property)과 값(value)만 들어갑니다.
따라서 꾸미는 데 한계가 있으며, 재사용이 불가능하다는 단점이 있습니다.