📌 CSS 스타일시트의 개념 및 중요성
CSS 문서는 독립적으로 존재할 수 있지만, HTML과 연결되지 않으면 단순한 텍스트 문서에 불과합니다. 즉, CSS는 HTML과 함께 사용할 때 웹 브라우저 화면에서 시각적으로 표현될 수 있습니다.
✅ CSS 스타일시트를 HTML에 적용하는 3가지 방법
CSS 스타일을 HTML 문서에 적용하는 방법은 다음 세 가지가 있습니다:
1️⃣ 인라인 스타일(Inline Style)
- 태그 내에 직접 style 속성을 추가하여 사용합니다.
- 별도의 선택자는 필요하지 않습니다.
- 빠르게 적용할 수 있지만, 유지보수가 어렵고 재사용이 불편합니다.
🔸 예시 코드:
<p style="color: red; font-size: 16px;">이 텍스트는 빨간색이고, 크기는 16px입니다.</p>
2️⃣ 내부 스타일 시트(Internal Style Sheet)
- HTML 문서 내부에 <style> 태그를 추가하여 CSS 코드를 작성하는 방식입니다.
- HTML 파일 내에서 손쉽게 스타일을 관리할 수 있습니다.
🔸 예시 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내부 스타일 시트 예시</title>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>이 텍스트는 파란색이고, 크기는 18px입니다.</p>
</body>
</html>
3️⃣ 외부 스타일 시트(External Style Sheet)
- 별도의 .css 파일을 만들어 CSS를 작성한 후, HTML 문서에서 <link> 태그로 연결합니다.
- 가장 효율적이고 재사용 가능한 방법입니다.
🔸 외부 스타일 시트 연결 방법:
<link rel="stylesheet" href="style.css">
- href 속성: 연결할 CSS 파일의 경로를 지정합니다.
- rel 속성: HTML 문서와의 관계를 나타내는 속성으로, 반드시 "stylesheet"로 지정해야 합니다.
※ 참고
- 인라인 스타일은 우선적으로 적용된다
- 인라인 스타일이 아닌경우, 너중에 쓰여진 선언문이 적용된다.
✅ CSS 적용 방식 비교 표
방식 사용법 관리 용이성 재사용성
| 인라인 스타일 | 태그 내 style 속성 | ❌ 어려움 | ❌ 낮음 |
| 내부 스타일 시트 | HTML 문서 내 <style> 태그 | 🔶 중간 | 🔶 중간 |
| 외부 스타일 시트 | 별도 .css 파일 및 <link> 연결 | ✅ 쉬움 | ✅ 높음 |
🧠 고급 팁 및 자주 하는 실수
- <link> 태그는 항상 HTML 문서의 <head> 내에 작성해야 합니다.
- 인라인 스타일 사용은 간단한 예제나 긴급 수정 시에만 권장하며, 대부분 외부 스타일 시트를 사용하는 것이 유지보수에 좋습니다.
- 스타일 시트를 외부 파일로 분리하면 웹페이지 로딩 성능 개선 및 관리 효율성을 높일 수 있습니다.
✅ 마무리 요약 및 복습 포인트
- CSS는 HTML과 반드시 함께 사용됩니다.
- HTML 문서에 CSS를 적용하는 방법은 총 3가지(인라인, 내부 스타일시트, 외부 스타일시트)입니다.
- 효율적 관리를 위해 외부 스타일 시트를 권장합니다.
- <link> 태그를 활용해 외부 CSS 파일을 HTML과 연결할 때, 반드시 <head> 내에 작성합니다.
이 글을 통해 CSS 스타일시트 적용 방법을 확실히 익히고 자신만의 웹 페이지 스타일을 멋지게 구성해 보세요! 🎨😊
'HTML & CSS' 카테고리의 다른 글
| Chapter 2-4 박스모델이란?(CSS) (0) | 2025.03.31 |
|---|---|
| Chapter 2-3 선택자 기본편(CSS) (0) | 2025.03.31 |
| Chapter 1-18. 문서정보관리하기 - 메타데이터(HTML) (0) | 2025.03.28 |
| Chapter 1-17. 의미론적인 코드-시맨틱 태그(HTML) (0) | 2025.03.28 |
| Chapter 1-16. 양식을 만들고 값 전송하기(HTML) (0) | 2025.03.28 |