CSS 강좌 / CSS란 무엇이고 HTML과 어떻게 다를까?

CSS(Cascading Style Sheets)는 HTML 문서의 색상, 글자, 여백과 배치처럼 화면에 보이는 모양을 정하는 언어입니다. HTML은 제목·문단·링크 등 콘텐츠의 의미와 구조를 만들고, CSS는 그 구조를 어떻게 보여 줄지 정합니다. 같은 HTML을 유지하면서 CSS만 바꾸면 내용은 그대로 두고 디자인을 바꿀 수 있습니다.

HTML과 CSS는 어떤 일을 나누어 할까요?

정원 안내 페이지를 만든다고 생각해 보세요. “작은 정원”이 페이지의 가장 중요한 제목이라는 사실은 HTML의 h1으로 표현합니다. 제목을 초록색으로 표시할지, 글자 크기를 얼마로 할지는 CSS에서 정합니다. 색이 초록색이라는 이유만으로 일반 문단이 제목의 의미를 갖게 되는 것은 아닙니다.

JavaScript는 웹페이지에 동작을 추가하는 프로그래밍 언어입니다. CSS도 마우스를 올렸을 때 모양을 바꾸거나 애니메이션을 보여 줄 수 있으므로, 화면이 변한다고 해서 반드시 JavaScript를 쓴 것은 아닙니다. 여기서는 먼저 내용과 모양을 분리하는 데 집중합니다.

CSS를 적용하지 않아도 글자가 보이는 이유

브라우저에는 기본 스타일이 있습니다. CSS를 직접 작성하지 않아도 제목이 크게 보이고, 문단 사이에 여백이 있으며, 링크에 밑줄이 나타나는 이유입니다. 기본 글꼴과 여백은 브라우저와 사용자 설정에 따라 달라질 수 있습니다. CSS를 추가하면 필요한 모양을 직접 지정할 수 있습니다.

다음 HTML을 텍스트 편집기에 붙여 넣고 UTF-8 형식의 index.html로 저장한 뒤 브라우저에서 열어 보세요. 파일 이름이 index.html.txt가 되지 않았는지 확인합니다. 파일 확장자가 숨겨져 있다면 편집기의 저장 형식과 파일 속성에서 확장자를 확인하세요.

<main>
    <h1>작은 정원</h1>
    <p>식물을 기르고 쉬어 갈 수 있는 공간입니다.</p>
    <p class="notice">매일 오전 9시에 문을 엽니다.</p>
    <a href="#visit">방문 안내</a>
    <h2 id="visit">방문할 때 준비할 것</h2>
    <p>물병과 편한 신발을 준비하세요.</p>
  </main>

이 조각은 본문의 구조를 보여 주는 예입니다. 바로 실행하려면 아래 전체 예제를 사용합니다. 제목과 안내 문장의 문구를 먼저 읽어 두면, CSS를 바꿀 때 실제 콘텐츠가 바뀌었는지 모양만 바뀌었는지 구분하기 쉽습니다.

선택자, 속성과 값으로 스타일 정하기

h1 {
  color: #087f5b;
}

h1은 꾸밀 대상을 고르는 선택자입니다. color는 글자색이라는 특성을 나타내는 속성이며, #087f5b는 그 속성에 넣을 값입니다. color: #087f5b;처럼 속성과 값을 묶어 쓴 한 항목을 선언이라고 합니다. 여섯 자리 색상 표기는 빨강·초록·파랑 성분을 나타내는 16진수 색상값입니다.

이 규칙은 HTML에 있는 h1 요소의 글자색을 초록색으로 바꿉니다. 문장을 번역하거나 문단을 추가하지는 않습니다. 안내 문장만 구별해서 꾸미려면 HTML에 class="notice"를 붙이고 CSS에서 .notice를 선택합니다. 점은 CSS의 클래스 선택자 표기이며 HTML의 클래스 이름에는 넣지 않습니다.

CSS가 웹 문서의 표현을 담당한다는 설명은 MDN의 CSS 소개에서도 확인할 수 있습니다.

작은 정원 전체 예제 실행하기

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>작은 정원</title>
  <style>
body {
      margin: 24px;
      color: #333;
      background-color: #f4f7f5;
      font-family: sans-serif;
      line-height: 1.7;
    }
    main { max-width: 640px; }
    h1 { color: #087f5b; }
    .notice {
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<main>
    <h1>작은 정원</h1>
    <p>식물을 기르고 쉬어 갈 수 있는 공간입니다.</p>
    <p class="notice">매일 오전 9시에 문을 엽니다.</p>
    <a href="#visit">방문 안내</a>
    <h2 id="visit">방문할 때 준비할 것</h2>
    <p>물병과 편한 신발을 준비하세요.</p>
  </main>
</body>
</html>

저장한 파일을 열면 연한 배경 위에 초록색 제목이 보이고, 운영 시간 안내에는 테두리와 여백이 생깁니다. style 요소 안에 있는 내용이 CSS입니다. 다음 표는 예제에서 사용한 속성을 읽기 위한 최소한의 설명입니다.

모든 속성을 지금 외울 필요는 없습니다. “어떤 요소를 선택했고, 그 요소의 어떤 모양을 바꾸는가?”를 짚어 보는 것이 우선입니다. 적용 위치를 파일로 분리하는 방법은 CSS를 HTML에 적용시키는 방법에서 같은 안내 페이지로 이어서 확인할 수 있습니다.

세 가지를 바꾸며 결과 비교하기

1. h1의 color를 #1d4ed8로 바꿉니다. 저장 후 새로고침하면 큰 제목만 파란색이 됩니다. 방문 안내의 h2와 일반 문단의 색은 이 규칙의 대상이 아닙니다.
2. body의 line-height를 1.7에서 2로 바꿉니다. 본문 줄 높이가 더 커집니다. 두 줄 이상인 문단을 넣거나 창을 좁히면 차이를 더 쉽게 확인할 수 있습니다.
3. .notice의 background-color를 #fff4cc로 바꿉니다. 운영 시간 안내의 배경만 노란빛으로 변합니다. 페이지 전체 배경은 body에 따로 지정되어 있으므로 그대로입니다.

한꺼번에 세 값을 바꾸지 말고 한 항목을 수정할 때마다 저장하고 확인하세요. 결과가 다르면 바꾼 파일과 브라우저에서 연 파일이 같은지, 중괄호와 콜론이 남아 있는지부터 살펴봅니다. 실습을 마치면 값 세 개를 원래대로 되돌리고 새로고침해 처음 화면과 비교하세요. 이 과정에서 HTML의 제목·문단·링크 구조가 그대로 유지되는 것이 핵심입니다.