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

CSS는 Cascading Style Sheets의 약자로, HTML 문서의 색, 글꼴, 간격, 배치 같은 표현을 지정하는 스타일시트 언어입니다. HTML이 제목·문단·링크처럼 콘텐츠의 구조와 의미를 맡는다면, CSS는 그 내용을 화면에 어떻게 보여 줄지 정합니다. 같은 HTML에도 다른 CSS를 적용해 모양을 바꿀 수 있습니다.

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

다음 문장은 HTML의 제목 요소와 문단 요소로 작성합니다. 브라우저는 CSS가 없어도 제목과 문단을 구별해 표시합니다. 그 위에 CSS를 추가하면 제목의 색과 문단의 줄 간격을 조절할 수 있습니다.

<h1>작은 정원</h1>
<p>처음 식물을 키우는 사람을 위한 안내입니다.</p>

h1 {
  color: #176b54;
}

p {
  line-height: 1.7;
}

HTML에서 h1을 문서의 주 제목으로 선택한 이유는 ‘크게 보이게 하려는 것’만이 아닙니다. 제목이라는 의미가 있기 때문입니다. CSS의 color는 글자색을, line-height는 줄 높이를 바꿉니다. 의미를 표현하는 요소와 시각적 표현을 분리하면 모양을 수정할 때 콘텐츠의 구조를 다시 만들 필요가 없습니다.

CSS만으로도 화면의 순서를 바꾸거나 문구를 덧붙일 수는 있습니다. 그렇다고 HTML의 의미와 읽기 순서를 CSS에 맡겨서는 안 됩니다. 스타일이 적용되지 않거나 보조 기술로 읽는 상황에서도 중요한 콘텐츠와 순서가 이해되도록 HTML을 먼저 작성하세요.

완성된 문서로 차이를 확인하기

아래 코드를 일반 텍스트 편집기에 붙여 넣고 UTF-8 인코딩의 index.html로 저장하세요. 브라우저에서 열면 연한 배경 위에 초록색 제목과 여백이 있는 안내 상자가 보입니다. style 안의 규칙은 CSS이고, 나머지는 HTML 문서입니다.

<!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: 0;
      padding: 32px;
      background: #eef5f0;
      font-family: sans-serif;
    }

    main {
      max-width: 640px;
      padding: 24px;
      background: #fff;
      border: 1px solid #cbdccf;
    }

    h1 {
      margin-top: 0;
      color: #176b54;
    }

    p {
      line-height: 1.7;
    }
  </style>
</head>
<body>
  <main>
    <h1>작은 정원</h1>
    <p>처음 식물을 키우는 사람을 위한 안내입니다.</p>
  </main>
</body>
</html>

이제 <style>부터 </style>까지를 잠시 삭제하거나 주석 처리한 뒤 파일을 저장하고 새로고침해 보세요. 제목과 문단은 남지만 배경색·간격·테두리 등은 브라우저의 기본 모양으로 돌아갑니다. 이것이 구조와 스타일의 차이입니다. 다시 원래 CSS를 넣으면 이전 모양을 되돌릴 수 있습니다.

CSS는 어떻게 적용될까요?

브라우저는 HTML 문서를 읽고 요소를 만든 다음, 각 요소에 맞는 CSS 규칙을 찾아 계산해 화면에 그립니다. 예제의 h1은 선택자이고, 중괄호 안의 color: #176b54;는 속성과 값으로 이루어진 선언입니다. 같은 요소에 여러 규칙이 적용되면 출처, 중요도, 우선순위와 작성 순서 등을 고려하는 캐스케이드(cascade)에 따라 최종 값이 결정됩니다. 처음에는 ‘어떤 요소를 선택해 어떤 속성을 바꾸는가’를 익히고, 규칙이 겹칠 때 이 원리를 자세히 살펴보면 됩니다.

이 예제는 HTML의 style 요소 안에 CSS를 넣었지만, 여러 페이지가 같은 디자인을 쓰는 실제 사이트에서는 별도의 .css 파일로 분리하는 편이 관리하기 쉽습니다. 인라인 스타일과 외부 스타일시트 등 적용 방법은 기존 CSS를 HTML에 적용하는 방법에서 비교할 수 있습니다.

모양이 바뀌지 않는다면

• 편집한 파일을 저장한 뒤 브라우저를 새로고침했는지 확인합니다.
• 선택자가 실제 HTML 요소와 일치하는지 확인합니다. 예제의 h1 규칙은 h2에 적용되지 않습니다.
• 중괄호와 콜론·세미콜론이 빠지지 않았는지 살펴봅니다. 잘못된 선언은 브라우저가 무시할 수 있습니다.
• 브라우저 개발자 도구의 요소 검사에서 규칙이 적용됐는지, 다른 규칙에 덮였는지 확인합니다.

CSS는 장식뿐 아니라 작은 화면에서 배치를 바꾸고, 읽기 쉬운 간격과 초점 표시를 제공하는 데에도 쓰입니다. 다만 CSS가 의미 있는 HTML을 대신하지는 않습니다. CSS의 기본 역할과 문법은 MDN의 CSS 소개에서도 확인할 수 있습니다.