CSS는 HTML문서에 적용이 되야 스타일 시트가 적용이 됩니다. CSS파일이나 스타일을 HTML문서에 적용하는 방법은 <style>태그 포스트를 참조해주세요.
스타일 시트 적용하기
스타일 시트를 적용하는 방법은 크게 세 가지가 있습니다.
- 인라인 스타일
- 내부 스타일 시트
- 외부 스타일 시트
1. 인라인 스타일
인라인 스타일(inline style)은 스타일 시트 없이 HTML태그에 style속성으로 바로 스타일을 넣는 것을 의미합니다. 간단하게 하나 정도의 스타일을 적용하는데는 문제가 없지만, 적용할 스타일이 많아질수록 HTML문서 구조가 복잡해져 권장되지 않는 방식입니다.
또한 스타일은 스타일끼리 따로 분류해서 모아 놓는 것이 관리하기 더 쉽기 때문에, 당장은 이런 방식이 있구나만 생각하고 넘어가시면 됩니다.
<p style='background-color: #ff0'>인라인 스타일</p>인라인 스타일
2. 내부 스타일 시트
내부 스타일 시트는 html문서 내부에 스타일을 정의하는 방식입니다. <style>태그를 선언하고 그 태그 내부에 스타일 요소를 넣는 것입니다.
<head>
<style>
p {
background-color: #ff0;
}
</style>
</head>
<body>
<p>내부 스타일 시트</p>
</body>
3. 외부 스타일 시트
외부 스타일 시트는 CSS파일을 HTML문서 외부로 부터 가져와서 HTML문서에 적용시키는 방법입니다.
외부 스타일 시트는 위 두 방식과 다르게 <link>태그를 이용해서 외부 스타일 시트의 경로를 지정하고 사용합니다.
<head>
<link href='외부 스타일 시트 경로' rel='stylesheet' type='text/css'>
</head>/*외부 스타일 시트 파일*/
p {
background-color: #ff0;
}
외부 스타일 시트 방식은 문서마다 만든느 내부 스타일 방식에 비해 관리하기도 쉽고, 웹 페이지에서 불러올 때도 효율적입니다. 따라서 세 가지 방식 중 외부 스타일 시트로 분리해서 사용하는 방식을 권장하고 있습니다.
