CSS는 HTML에서 다양한 방식으로 적용할 수 있습니다. 그중 하나가 바로 내부 CSS(Internal CSS), 즉 <style> 태그를 활용하는 방법입니다. 내부 CSS는 <head>...</head> 태그 안에 <style> 태그를 작성하여 사용하며, 해당 HTML 문서 한 페이지에만 적용되는 스타일을 정의합니다.
외부 스타일시트 파일을 따로 만들 필요 없이 하나의 문서 안에서 스타일을 관리할 수 있어, 간단한 웹 페이지나 테스트 환경에서 특히 유용합니다.
예제
아래 코드를 실행하면 HTML에서 내부 CSS를 사용하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: red;}
p {font-size: 12px;}
</style>
</head>
<body>
<h1>Tutorials</h1>
<p>We provide free tutorials for engineers and professional.</p>
</body>
</html>위 예제에서는 <style> 태그 내에 두 가지 규칙을 정의했습니다. 첫 번째 규칙은 모든 <h1> 요소의 글자 색을 빨간색으로 지정하고, 두 번째 규칙은 <p> 요소의 글자 크기를 12px로 설정합니다. 페이지를 열면 제목은 빨간색으로, 본문 텍스트는 12px 크기로 표시되는 것을 확인할 수 있습니다.