스타일을 페이지 안에 직접 쓴다고? <style> 태그로 내부 CSS 다루기
1. <style> 태그가 뭐예요?
<style> 태그는 HTML 문서 안에 CSS를 직접 작성할 수 있는 태그입니다. 보통 <head> 영역에 위치해서, 브라우저가 문서를 불러올 때 함께 스타일 정보를 읽어들이죠. 즉, HTML과 CSS가 한 파일 안에서 만나는 방식이에요.
처음 CSS를 배울 때는 한눈에 구조와 스타일을 확인하기 좋아서 많이 사용되며, 외부 파일을 따로 만들지 않아도 되기 때문에 빠르게 테스트하거나 작은 프로젝트에 적합합니다. 단, 규모가 커지면 유지보수가 어렵고, 외부 스타일시트보다 우선순위가 낮을 수 있다는 점도 알아둬야 해요.
2. 기본 구조와 작성 예시
내부 스타일을 작성할 땐 <style> 태그 안에 CSS 문법을 넣습니다. 선택자(selector)와 속성(property)을 지정하는 방식은 외부 CSS와 동일하지만, HTML 문서 내에 직접 들어간다는 점만 달라요.
예를 들어 아래처럼 작성하면, 문서 전체에 배경색과 글자 색을 지정할 수 있어요. 반드시 <head> 태그 내부에 넣는 것이 표준입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내부 스타일 예시</title>
<style>
body {
background-color: #f0f8ff;
color: #333;
}
</style>
</head>
<body>
<p>안녕하세요, 내부 스타일이 적용된 문서입니다!</p>
</body>
</html>Tip 💡
<style>태그는 반드시<head>안에 넣는 것이 좋으며,<body>안에 넣으면 일부 브라우저에서 스타일 적용이 제대로 안될 수 있어요.
3. 디자인을 빠르게 적용하고 싶다면
내부 CSS는 HTML과 CSS를 동시에 확인해야 하는 상황에서 특히 유용해요. 예를 들어 코드 예제나 문서 편집기, 강의 자료처럼 즉각적으로 스타일을 적용하고 싶은 경우, <style> 태그를 사용하면 아주 간단하고 직관적입니다.
<style>
h1 {
font-size: 24px;
color: #0066cc;
}
p {
line-height: 1.6;
}
</style>Tip 💡
강의 중 실습이나 샘플 코드 작성 시, 외부 파일 없이 빠르게 결과를 확인할 수 있어요.
4. HTML 문서에만 적용된다는 점 주의!
내부 CSS는 오직 해당 HTML 문서에서만 적용됩니다. 즉, 같은 사이트의 다른 페이지에는 영향을 주지 않아요. 장점이자 단점인데, 빠르게 원하는 스타일을 적용할 수 있지만 재사용이 어렵다는 걸 의미해요.
<style>
.alert {
background-color: yellow;
padding: 10px;
}
</style>
<div class="alert">주의가 필요한 메시지입니다!</div>Tip 💡
팝업, 임시 이벤트 페이지처럼 “한 번만” 보여주는 경우엔 내부 스타일로 빠르게 해결하는 게 효율적입니다.
5. 정리표 – <style> 태그 핵심 요약
내부 스타일을 작성할 때 꼭 기억해야 할 주요 특징을 표로 정리했어요. 외부 CSS와 비교하며 어떤 상황에서 쓰면 좋을지도 함께 참고해보세요.
| 항목 | 내용 |
|---|---|
| 작성 위치 | <head> 태그 내부 |
| 적용 범위 | 해당 HTML 문서에만 적용 |
| 작성 목적 | 빠른 테스트, 단일 페이지 스타일 적용 |
| 유지보수 | 규모가 커지면 관리가 어려움 |
| 우선순위 | 외부 CSS보다 낮을 수 있음 (같은 선택자 기준) |
| 장단점 | 간편하지만 재사용성은 낮음 |
6. 마무리하며
<style> 태그는 웹페이지를 꾸미기 위한 CSS를 빠르게 적용하고자 할 때 훌륭한 선택이 될 수 있어요. 특히 학습용, 실습용, 단일 페이지 구성엔 더할 나위 없죠.
하지만 한계도 분명합니다. 프로젝트 규모가 커질수록 외부 CSS로의 분리가 필요하고, 코드의 일관성과 유지보수성을 생각해야 하죠. 상황에 맞게 적절한 방식을 선택해보세요.