HTML & CSS

Chapter 2-2 CSS 문서 사용하기(CSS)

Chansman 2025. 3. 31. 10:15

📌 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 스타일시트 적용 방법을 확실히 익히고 자신만의 웹 페이지 스타일을 멋지게 구성해 보세요! 🎨😊