dev_or_alive

[CSS] CSS 개요 및 기초 이해하기 본문

Web Programming/CSS

[CSS] CSS 개요 및 기초 이해하기

개발로 먹고살자 2025. 5. 1. 18:22

✅ CSS 개요와 필요성

CSS(Cascading Style Sheets)는 HTML 문서의 시각적 영역을 담당하는 스타일 시트 언어입니다.

HTML이 구조를 정의한다면 CSS는 색상·여백·폰트·레이아웃 등 디자인 요소를 지정해 화면을 완성하는 역할을 합니다.

  • 콘텐츠와 스타일 분리: HTML 구조와 스타일 규칙을 분리해 유지보수성을 높인다.
  • 재사용성과 일관성: 하나의 스타일시트가 여러 페이지에 적용될수 있기 때문에 사이트 전반의 디자인을 통일할 수 있다.
  • 접근성 향상: 미디어쿼리를 통해 다양한 기기와 사용자 요구에 대응할 수 있다.

✅ CSS 작성법 및 HTML과 연결 방법

CSS를 적용하는 방법은 세 가지이며, 각 방법은 적용 범위와 우선순위에 차이가 있습니다.

🔥 1. 인라인 스타일

HTML 요소 내부에서 style 속성에 CSS를 직접 작성하는 방법입니다.

<p style="color: red; font-weight: bold;">경고 메시지다.</p>
  • 장점: 특정 요소 하나만 빠르게 수정하기에 편리하다.
  • 단점: HTML과 스타일이 뒤섞여 가독성이 떨어지고, 동일 스타일을 여러 요소에 반복 작성하게 된다.

🔥 2. 내부 스타일시트 (<style> 태그)

이 방법은 HTML 문서의 <head> 영역에 <style>태그를 작성하여 내부에 CSS 코드를 작성하는 방법입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .alert {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p class="alert">경고 메시지다.</p>
  </body>
</html>
  • 장점: 단일 HTML 파일 안에서 스타일을 정의하기 때문에 외부 파일 없이 관리할 수 있다.
  • 단점: 다른 HTML 파일에서 재사용할 수 없으며, 페이지 규모가 커지면 코드 길이 자체가 너무 길어진다.

🔥 3. 외부 스타일시트 (.css 파일)

이 방법은 {filename}.css 형식의 파일을 만들고 HTML 문서에서 link 태그를 이용하여 연결하는 방법입니다.

  1. 먼저 CSS 파일을 생성해줍니다.
  2. 생성한 CSS파일을 HTML 파일에서 불러줍니다.
/* styles.css */
.alert {
  color: blue;
  font-weight: bold;
}

<!DOCTYPE html>
<html>
  <!-- index.html -->
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p class="alert">경고 메시지다.</p>
  </body>
</html>
  • 장점
    • 하나의 파일을 만들어서 여러 HTML에서 사용하여 일관성을 유지할 수 있습니다.
    • 브라우저 캐시를 활용하여 로딩 속도를 개선할 수 있습니다.
  • 단점
    • 초기 파일 구조를 설계할 필요가 있습니다.
    • 경로를 관리하는데 번거로움이 있을 수 있습니다.

✅ 우선순위와 특이성

위 세가지 방법을 혼용해서도 사용이 가능합니다.

다만 위 세가지 방법을 같이 사용한다해도 적용되는 우선 순위가 있기 때문에 주의가 필요합니다.

만약 아래와 같이 코드를 적용했을 경우에 “인라인” 스타일이 최우선적으로 적용을 받습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Specificity Demo</title>

    <!-- 1) 외부 스타일시트: 가장 낮은 우선순위 -->
    <link rel="stylesheet" href="styles.css" />

    <!-- 2) 내부 스타일시트: 외부보다 우선 -->
    <style>
      .btn {
        background-color: steelblue; /* 외부의 회색을 덮어쓴다 */
        color: white;
      }
    </style>
  </head>

  <body>
    <section id="main" class="wrapper">
      <!-- 3) 인라인 스타일: 가장 높은 우선순위 -->
      <button class="btn" style="background-color: purple">
        인라인이 최종 승자다
      </button>
    </section>
  </body>
</html>

/* styles.css  ── 외부 스타일시트 */
.btn {
  background-color: lightgray;
  color: black;
}

우선순위는 아래와 같은 특이성을 갖습니다.

  • 인라인 > 내부 > 외부 순으로 우선순위가 높다 (인라인이 최우선)
  • 동일한 우선순위라면 특이성 값(Specificity)이 높은 선택자가 적용된다.
  • “!important”는 특이성을 무시하고 최우선으로 적용된다.
    • 남발하면 어떤 스타일 코드가 적용되는지 알기 어려우므로 남발하면 안된다.

✅ 마무리

CSS에 대한 개요와 필요성, HTML과의 연결방법에 대해 알아보았습니다.

프로젝트를 진행하다보면 원치않는 디자인이 적용되는 경우가 있는데,

이런 경우를 방지하기 위하여 CSS 적용 우선순위는 필수로 알아두는게 좋습니다.

반응형

'Web Programming > CSS' 카테고리의 다른 글

[CSS][길이 단위] %, vw, vh  (0) 2025.05.19
[CSS][길이단위] px, em, rem  (0) 2025.05.08
[CSS][color] color, background-color  (0) 2025.05.04
[CSS][선택자] 개요 및 기본 문법  (1) 2025.05.03
SVG(Scalable Vector Graphics)에 대해 알아보자  (2) 2024.04.07
'Web Programming/CSS' Related Articles more