CSS는 무엇이고 왜 배워야 할까

2026-04-08Views 19약 7분

웹페이지를 처음 만들면 이런 순간이 옵니다. 화면에는 분명 제목도 있고 문장도 있고 링크도 있는데, 어딘가 조금 밋밋합니다. 마치 가구는 다 들어왔는데 벽지와 조명, 배치가 아직 정리되지 않은 방처럼 보이죠. 바로 이때 등장하는 것이 CSS입니다.

CSS는 Cascading Style Sheets의 줄임말로, HTML로 만든 내용을 어떻게 보이게 할지 정하는 스타일 언어입니다. 색, 글꼴, 크기, 여백, 배치, 반응형 화면, 간단한 애니메이션까지 담당합니다.¹² 이 책에서 앞으로 배울 거의 모든 속성은 결국 한 가지 질문으로 모입니다.

"이 요소를 화면에서 어떻게 보이게 할까?"

이 질문에 답하는 언어가 CSS입니다.

CSS는 무엇이고 왜 배워야 할까

HTML과 CSS는 무엇이 다를까

초보자는 HTML과 CSS를 함께 배우기 때문에 둘의 역할이 섞여 보이기 쉽습니다. 하지만 둘은 하는 일이 분명히 다릅니다.

HTML은 웹페이지의 구조와 내용을 담당합니다. 제목을 넣고, 문단을 만들고, 링크를 걸고, 이미지를 배치하는 식입니다. 반면 CSS는 그 구조를 바탕으로 겉모습과 배치 방식을 다듬습니다. 즉, HTML이 "무엇이 있는가"를 말한다면, CSS는 "그것이 어떻게 보이는가"를 말합니다.³

쉽게 비유하면 HTML은 집의 뼈대이고, CSS는 벽지와 가구 배치, 조명, 문 손잡이의 재질입니다. 뼈대만 있어도 집은 집이지만, 살고 싶은 공간이 되려면 꾸밈과 정리가 필요합니다.

아래 예제를 먼저 보겠습니다.

<h1>오늘의 할 일</h1>
<p>CSS 공부 시작하기</p>

이 코드는 브라우저에 제목과 문단을 보여 줍니다. 내용은 잘 보이지만, 아직은 기본 모양 그대로입니다.

여기에 CSS를 더하면 이렇게 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>첫 CSS 예제</title>
  <style>
    body {
      background-color: #f5f7fb;
      font-family: Arial, sans-serif;
      padding: 24px;
    }

    h1 {
      color: #2b59c3;
    }

    p {
      color: #333;
      background-color: white;
      padding: 12px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>오늘의 할 일</h1>
  <p>CSS 공부 시작하기</p>
</body>
</html>

이제 같은 내용이라도 느낌이 완전히 달라집니다. 배경색이 들어가고, 글자 색이 바뀌고, 문단 주변에 여백이 생기고, 박스처럼 보이기 시작합니다. 내용은 HTML이 만들었고, 분위기는 CSS가 만들었습니다.

CSS가 정확히 하는 일

CSS는 단순히 "예쁘게 꾸미는 도구"가 아닙니다. 물론 예쁘게 만드는 것도 맞지만, 실제로는 읽기 쉽고, 쓰기 쉽고, 반응이 자연스러운 화면을 만드는 데 더 가깝습니다.

예를 들어 CSS는 다음과 같은 일을 합니다.

글자의 색, 크기, 글꼴, 줄 간격을 정한다.
요소 사이의 간격과 테두리, 배경을 정한다.
요소를 가로로 놓을지, 세로로 놓을지, 화면 어디에 둘지 정한다.
화면 크기에 따라 모바일용, 태블릿용, 데스크톱용 모양을 다르게 만든다.
버튼에 마우스를 올렸을 때 색이 바뀌는 효과나 부드러운 전환을 줄 수 있다.²⁴

즉, CSS는 단순한 장식이 아니라 사용 경험을 설계하는 도구입니다. 같은 내용이라도 CSS에 따라 "읽고 싶은 페이지"가 되기도 하고, "어디를 눌러야 할지 모르겠는 페이지"가 되기도 합니다.

왜 CSS를 배워야 할까

웹페이지가 동작만 한다고 해서 좋은 페이지는 아닙니다. 초보자일수록 HTML만으로도 꽤 많은 내용을 만들 수 있지만, CSS를 배우는 순간부터 웹페이지가 갑자기 "사이트처럼" 보이기 시작합니다.

CSS를 배우면 좋은 이유는 크게 세 가지입니다.

첫째, 내용과 디자인을 분리할 수 있습니다. HTML은 구조에 집중하고, CSS는 모양에 집중합니다. 이 분리는 코드를 읽기 쉽게 만들고, 나중에 수정할 때도 훨씬 편합니다.³

둘째, 한 번 작성한 스타일을 여러 곳에 재사용할 수 있습니다. 예를 들어 버튼 색을 한 군데에서 정해 두면 사이트 전체 버튼에 같은 규칙을 적용할 수 있습니다. 그래서 유지보수가 쉬워집니다.¹²

셋째, 반응형 웹을 만들 수 있습니다. 요즘 사용자는 휴대폰, 태블릿, 노트북, 큰 모니터까지 아주 다양한 화면에서 웹을 봅니다. CSS는 화면 크기에 맞춰 레이아웃과 크기를 조정하는 데 핵심 역할을 합니다.⁴

조금 더 현실적으로 말하면, CSS를 배우면 다음과 같은 것이 가능해집니다.

블로그 글을 읽기 편하게 꾸미기
상품 목록을 보기 좋게 정렬하기
프로필 카드나 소개 페이지 만들기
버튼, 폼, 메뉴를 자연스럽게 다듬기
모바일 화면에서도 깨지지 않는 페이지 만들기

초보자에게 CSS는 "디자인 감각이 있는 사람만 하는 것"처럼 보일 수 있습니다. 하지만 실제로는 다릅니다. CSS는 감각보다 원리와 반복 연습이 더 중요합니다. 처음에는 배경색 하나 바꾸는 것부터 시작해도 충분합니다.

HTML만 있을 때와 CSS가 있을 때

아주 짧은 예제로 차이를 느껴 봅시다.

먼저 HTML만 있는 버전입니다.

<h2>신입 웹 개발자 모집</h2>
<p>HTML, CSS 기초를 배우며 함께 성장할 분을 찾습니다.</p>
<a href="#">지원하기</a>

브라우저는 이 내용을 보여 주지만, 링크는 그냥 기본 파란색 밑줄 텍스트일 가능성이 큽니다. 제목과 문단, 링크 사이의 간격도 기본값에 의존합니다.

여기에 CSS를 조금 얹어 보겠습니다.

<style>
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
  }

  h2 {
    color: #1f3c88;
    margin-bottom: 8px;
  }

  p {
    color: #444;
    margin-bottom: 16px;
  }

  a {
    background-color: #1f3c88;
    color: white;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 6px;
  }
</style>

<h2>신입 웹 개발자 모집</h2>
<p>HTML, CSS 기초를 배우며 함께 성장할 분을 찾습니다.</p>
<a href="#">지원하기</a>

이제 링크는 버튼처럼 보이고, 제목과 문단 간격도 안정적으로 보입니다. 글 색도 더 읽기 편해집니다. 사용자는 이 페이지에서 무엇이 중요한지 더 쉽게 파악할 수 있습니다.

이 차이가 바로 CSS의 힘입니다. 내용은 그대로인데 전달력은 훨씬 좋아집니다.

CSS의 장점: 초보자에게 특히 좋은 이유

CSS는 처음 접할 때 낯설어 보여도, 바로 눈으로 결과를 확인할 수 있어서 재미가 있습니다. 한 줄 바꾸면 화면이 즉시 달라지기 때문입니다. 이런 즉각적인 피드백은 초보자에게 아주 큰 장점입니다.

또한 CSS는 작은 성공 경험을 쌓기 좋습니다. 처음에는 글자 색을 바꾸고, 다음에는 배경을 넣고, 그다음에는 여백을 조절하고, 나중에는 카드 레이아웃이나 메뉴까지 만들게 됩니다. 계단처럼 차근차근 올라갈 수 있는 언어인 셈입니다.

실용적인 관점에서도 장점이 큽니다. CSS를 잘 다루면 다음이 쉬워집니다.

같은 내용을 더 깔끔하게 보여 줄 수 있다.
사이트 전체 스타일을 한 번에 바꾸기 좋다.
코드가 덜 지저분해지고 역할이 분리된다.
다양한 화면 크기에 대응하기 좋다.
JavaScript 없이도 간단한 시각 효과를 줄 수 있다.⁴

특히 "사이트가 뭔가 허전하다"는 느낌의 대부분은 CSS로 해결됩니다. 초보자에게 CSS는 옵션이 아니라, 웹페이지를 완성 단계로 끌고 가는 필수 도구입니다.

CSS는 혼자서 존재할 수 있을까

이 질문은 아주 중요합니다. 답은 간단합니다.

HTML은 CSS 없이도 존재할 수 있지만, CSS는 HTML 없이 의미 있게 동작할 수 없습니다. CSS는 결국 어떤 HTML 요소를 선택해서 스타일을 적용하는 언어이기 때문입니다.³

예를 들어 아래와 같은 CSS가 있다고 해 봅시다.

h1 {
  color: tomato;
}

이 규칙은 "h1 요소를 토마토색으로 보여 줘"라는 뜻입니다. 그런데 페이지에 <h1>이 없다면 이 규칙은 적용될 대상이 없습니다.

그래서 학습 순서도 보통 HTML 먼저, CSS 다음이 자연스럽습니다.³ HTML로 구조를 이해한 뒤 CSS로 외형을 다듬는 흐름이 가장 헷갈리지 않습니다.

CSS를 배우기 전에 준비할 것

좋은 소식이 있습니다. CSS를 시작하는 데 거창한 개발 환경은 필요 없습니다. 아주 기본적인 도구만 있으면 됩니다.

가장 기본 준비물은 텍스트 편집기와 웹 브라우저입니다. 텍스트 편집기로는 Visual Studio Code를 많이 사용하고, 브라우저는 Chrome이나 Edge, Firefox 중 편한 것을 쓰면 됩니다. HTML 파일과 CSS 파일을 저장한 뒤 브라우저에서 열어 보면 바로 결과를 확인할 수 있습니다.¹⁵

처음에는 아래 정도만 준비하면 충분합니다.

코드 편집기: VS Code 같은 편집기
웹 브라우저: Chrome, Edge, Firefox 중 하나
실습 폴더: index.html, 나중에는 style.css

설치를 최소화하고 싶다면 CodePen 같은 온라인 편집기를 써도 좋습니다. 다만 책을 따라 차근차근 익히기에는 로컬 파일로 연습하는 방식이 더 도움이 됩니다. 파일이 어떻게 연결되는지 자연스럽게 익힐 수 있기 때문입니다.

가장 간단한 실습 환경 만들기

아직 CSS 연결 방식 전체를 자세히 배울 단계는 아니므로, 여기서는 가장 쉬운 방법으로 시작해 보겠습니다. 하나의 HTML 파일 안에 <style> 태그를 넣는 방식입니다.

먼저 index.html 파일을 하나 만들고 다음 내용을 넣어 보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 시작</title>
  <style>
    body {
      background-color: #faf3e0;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #d35400;
    }

    p {
      color: #5d4037;
    }
  </style>
</head>
<body>
  <h1>안녕하세요, CSS!</h1>
  <p>이 문장은 CSS로 색이 적용되었습니다.</p>
</body>
</html>