개발이 취미인 사람

[CSS] CSS란 무엇인가 — 웹에서 스타일이 입혀지는 원리 본문

프론트 앤드(Front-End)/CSS

[CSS] CSS란 무엇인가 — 웹에서 스타일이 입혀지는 원리

RyanSin 2026. 3. 23. 10:45
반응형

개요

CSS(Cascading Style Sheets)는 HTML로 작성된 웹 문서의 시각적 표현을 담당하는 언어입니다. 이 글에서는 CSS가 왜 존재하는지, HTML과 어떤 관계인지, 브라우저가 CSS를 어떻게 처리하는지를 다룹니다.


1. CSS가 없는 웹

CSS를 이해하려면, 먼저 CSS가 없는 상태를 봐야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 없는 페이지</title>
</head>
<body>
  <h1>안녕하세요</h1>
  <p>이것은 CSS가 없는 HTML 문서입니다.</p>
  <a href="#">링크입니다</a>
  <ul>
    <li>항목 1</li>
    <li>항목 2</li>
  </ul>
  <button>버튼</button>
</body>
</html>

이 HTML을 브라우저에서 열면 아무 스타일도 작성하지 않았는데 다음과 같이 보입니다:

  • <h1>은 크고 굵은 글씨
  • <p>는 위아래 여백이 있는 문단
  • <a>는 파란색 밑줄
  • <ul>은 점 마커가 있는 리스트
  • <button>은 회색 테두리 버튼

왜? 브라우저가 자체적으로 가지고 있는 기본 스타일(User Agent Stylesheet) 때문입니다. CSS를 하나도 작성하지 않아도 브라우저가 HTML 태그마다 기본 CSS를 적용합니다.

다음 편(01편)에서 태그별 기본 스타일을 상세히 다룹니다.


2. CSS란 무엇인가

한 문장 정의

CSS는 HTML 요소의 "어떻게 보일지"를 정의하는 스타일 언어입니다.

역할 분리

웹은 세 가지 언어가 역할을 나눠 맡습니다.

언어 역할 비유
HTML 구조 (Structure) 건물의 뼈대 (기둥, 벽, 방)
CSS 표현 (Presentation) 인테리어 (페인트, 가구 배치, 조명)
JavaScript 동작 (Behavior) 전기/배관 시스템 (스위치, 엘리베이터)

백엔드로 비유하면:

웹 백엔드 비유
HTML 데이터 스키마 (테이블 구조)
CSS 포맷터/시리얼라이저 (응답을 어떻게 보여줄지)
JavaScript 비즈니스 로직

핵심: HTML은 "무엇이 있는지", CSS는 "어떻게 보이는지"를 담당합니다. 이 분리가 웹의 기본 설계 원칙입니다.


3. CSS의 기본 문법

CSS는 선택자(Selector)와 선언(Declaration)으로 구성됩니다.

/* 선택자 { 속성: 값; } */

h1 {
  color: #2563eb;
  font-size: 32px;
  margin-bottom: 16px;
}
구성 요소 예시 설명
선택자 (Selector) h1 어떤 요소에 스타일을 적용할지
속성 (Property) color 무엇을 바꿀지
값 (Value) #2563eb 어떻게 바꿀지
선언 (Declaration) color: #2563eb; 속성 + 값 한 쌍
선언 블록 { ... } 선언들의 묶음

백엔드 개발자에게 익숙한 형태로 비유하면:

CSS                         JSON
─────────────────           ─────────────────
h1 {                        {
  color: #2563eb;             "color": "#2563eb",
  font-size: 32px;            "fontSize": "32px",
  margin-bottom: 16px;        "marginBottom": "16px"
}                           }

4. CSS를 적용하는 3가지 방법

방법 1: 인라인 스타일 (Inline)

<h1 style="color: #2563eb; font-size: 32px;">제목</h1>
  • HTML 태그에 직접 작성
  • 우선순위가 가장 높음
  • 재사용 불가, 유지보수 어려움
  • 실무에서는 거의 사용하지 않음 (JS 프레임워크에서 동적 스타일 외)

방법 2: 내부 스타일시트 (Internal)

<head>
  <style>
    h1 {
      color: #2563eb;
      font-size: 32px;
    }
  </style>
</head>
  • <style> 태그 안에 작성
  • 해당 HTML 파일에서만 적용
  • 소규모 페이지나 프로토타입에서 사용

방법 3: 외부 스타일시트 (External) — 권장

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>
/* style.css */
h1 {
  color: #2563eb;
  font-size: 32px;
}
  • 별도 .css 파일로 분리
  • 여러 HTML 파일에서 재사용 가능
  • 브라우저 캐싱 가능 (성능 이점)
  • 실무에서 표준 방식

비교 정리

방법 재사용 유지보수 캐싱 실무 사용
인라인 ❌ ❌ ❌ 거의 안 함
내부 ❌ △ ❌ 프로토타입
외부 ✅ ✅ ✅ 표준

5. 브라우저가 CSS를 처리하는 과정

백엔드의 요청 처리 파이프라인처럼, 브라우저에도 렌더링 파이프라인이 있습니다.

1. HTML 파싱  →  DOM 트리 생성
2. CSS 파싱   →  CSSOM 트리 생성
3. DOM + CSSOM →  Render Tree 생성
4. Layout      →  각 요소의 위치/크기 계산
5. Paint       →  픽셀로 그리기
6. Composite   →  레이어 합성 → 화면 출력

단계별 설명

① HTML 파싱 → DOM 트리

<body>
  <h1>제목</h1>
  <p>본문</p>
</body>
DOM 트리:
body
├── h1
│   └── "제목"
└── p
    └── "본문"

② CSS 파싱 → CSSOM 트리

h1 { color: blue; font-size: 32px; }
p  { color: gray; }
CSSOM 트리:
h1 → { color: blue, font-size: 32px }
p  → { color: gray }

③ DOM + CSSOM → Render Tree

DOM의 각 노드에 CSSOM의 스타일 정보가 결합됩니다. display: none인 요소는 Render Tree에서 제외됩니다.

④ Layout → Paint → Composite

Render Tree를 기반으로 각 요소의 정확한 위치와 크기를 계산(Layout)하고, 픽셀로 그린 뒤(Paint), 레이어를 합성(Composite)하여 화면에 출력합니다.

렌더링 파이프라인의 성능 최적화는 37편에서 자세히 다룹니다.


6. CSS가 필요한 진짜 이유

"HTML만으로 충분하지 않나?" 라는 질문에 대한 답입니다.

이유 1: 관심사의 분리 (Separation of Concerns)

<!-- ❌ HTML에 스타일이 섞인 경우 (1990년대 방식) -->
<font size="5" color="blue"><b>제목</b></font>
<table width="800" bgcolor="#f0f0f0">
  <tr><td>내용</td></tr>
</table>

<!-- ✅ HTML은 구조만, CSS는 스타일만 -->
<h1 class="title">제목</h1>
<div class="content">내용</div>

구조와 표현이 분리되면:

  • HTML 변경 없이 디자인 변경 가능
  • 같은 CSS를 여러 페이지에 재사용
  • 디자이너와 개발자의 협업이 쉬워짐

백엔드에서 비즈니스 로직과 프레젠테이션을 분리하는 것과 같은 원칙입니다.

이유 2: 일괄 변경

/* 이 한 줄로 사이트 전체의 primary 색상이 바뀜 */
:root {
  --color-primary: #2563eb;
}

CSS 변수(Custom Properties)를 사용하면, 값 하나만 바꿔도 사이트 전체에 반영됩니다. HTML에 인라인으로 색상을 넣었다면? 모든 파일을 열어서 하나하나 바꿔야 합니다.

이유 3: 반응형 디자인

/* 하나의 HTML로 모바일/태블릿/데스크탑 대응 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}

CSS 없이는 화면 크기에 따라 레이아웃을 바꾸는 것이 불가능합니다.

이유 4: 접근성과 사용자 경험

/* 다크모드 대응 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a2e;
    --text-color: #e0e0e0;
  }
}

/* 모션 민감 사용자 대응 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

CSS는 사용자의 시스템 설정에 따라 자동으로 스타일을 전환할 수 있습니다.


7. CSS로 어디까지 가능한가? (미리보기)

CSS는 단순한 색상/크기 지정을 넘어서 상당히 많은 것을 할 수 있습니다.

가능한 것 설명 관련 챕터
레이아웃 배치 Flexbox, Grid로 자유로운 2차원 배치 13~18편
애니메이션 @keyframes로 로딩 스피너, 페이드 효과 23~25편
반응형 디자인 하나의 코드로 모바일~데스크탑 대응 20~22편
다크모드 CSS 변수만으로 테마 전환 35편
글래스모피즘 backdrop-filter로 유리 효과 30편
CSS만의 인터랙션 :checked, :target으로 토글/아코디언 31편

CSS의 한계

할 수 없는 것 이유 대안
서버 통신 CSS는 표현 언어 JavaScript (fetch)
복잡한 상태 관리 조건문/반복문 없음 JavaScript
DOM 조작 요소 생성/삭제 불가 JavaScript
사용자 입력 처리 이벤트 리스너 없음 JavaScript

결론: CSS는 "보이는 것"에 대해서는 매우 강력하지만, "동작하는 것"은 JavaScript의 영역입니다.


8. CSS의 역사 (간략)

연도 사건 의미
1996 CSS1 발표 폰트, 색상, 정렬 등 기본 스타일링
1998 CSS2 발표 position, z-index, media type 추가
2011~ CSS3 모듈화 Flexbox, Grid, Animation, 변수 등 개별 모듈로 발전
2020~ 모던 CSS container query, @layer, nesting, color-mix() 등

CSS3부터는 하나의 버전이 아니라 모듈별로 독립 발전합니다. "CSS4"는 없고, 각 모듈(Flexbox, Grid, Selectors 등)이 자체 레벨을 가집니다.

CSS의 발전사와 Sass→PostCSS→Tailwind 흐름은 38편에서 상세히 다룹니다.


핵심 정리

개념 설명
CSS의 역할 HTML의 시각적 표현을 담당하는 스타일 언어
핵심 원칙 구조(HTML)와 표현(CSS)의 분리
기본 문법 선택자 { 속성: 값; }
적용 방법 인라인 / 내부 / 외부(권장)
브라우저 처리 HTML→DOM, CSS→CSSOM → Render Tree → Layout → Paint
CSS의 강점 레이아웃, 반응형, 애니메이션, 테마
CSS의 한계 서버 통신, 상태 관리, DOM 조작 → JavaScript 영역

다음 글 예고

[CSS] HTML 태그의 숨겨진 CSS — User Agent Stylesheet 파헤치기

브라우저가 기본으로 적용하는 스타일은 무엇인지, 왜 <div>와 <span>이 다르게 보이는지, reset CSS가 왜 필요한지를 다룹니다.

저작자표시 비영리 변경금지 (새창열림)