CSS(Cascading Style Sheets)를 이용하면 멋진 외견을 가진 웹페이지를 작성할 수 있는데, 그 뒤쪽에선 무슨 일이 일어나는 걸까요? 이 글은 CSS가 무엇인지, 브라우저가 HTML을 Document Object Model (DOM)로 어떻게 전환하는지와 CSS가 DOM에 적용되는 방법, 아주 기본적인 문법 예시 몇 가지, 그리고 실제로 CSS를 홈페이지에 포함하려면 어떤 코드를 써야 하는지 설명합니다.

전제 조건: 기본적인 컴퓨터 능력, 기본적인 소프트웨어 설치, 파일 조작의 기본적인 지식, HTML 기본 (HTML 소개 학습)
목표: CSS란 무엇이고 어떻게 동작하는지 기초를 배우는 것.

CSS가 뭔가요?

앞에 말했듯 CSS는 스타일, 레이아웃 등을 통해 문서가 유저에게 어떻게 표시되는지를 지정하는 언어입니다.

문서란 보통 마크업 언어를 사용한 텍스트 파일입니다. HTML이 가장 일반적인 마크업 언어지만 SVGXML을 마주칠 수도 있습니다.

사용자에게 문서를 표시하는 것은 문서의 텍스트를 방문자가 이용할 수 있는 형식으로 전환하는 것입니다. Firefox, ChromeInternet Explorer 등 브라우저는 문서를 컴퓨터 화면, 프로젝터나 프린터 등 화면에 시각적으로 표시하도록 설계되어 있습니다.

CSS가 HTML에 어떤 영향을 주나요?

웹 브라우저는 CSS 규칙을 문서에 적용하여 어떻게 표시할지 영향을 줍니다. CSS 규칙은 아래의 형식과 같습니다.

  • 속성 한 세트는 HTML 콘텐츠가 표시되는 방법을 바꾸기 위한 값을 가집니다. 예를 들어 내 요소의 너비를 부모의 절반(50%)으로, 배경색은 빨갛게 할 수 있습니다.

  • 하나의 선택자가, 바꾼 속성 값을 적용할 요소를 선택합니다. 예를 들어 내 CSS 규칙을 문서 안의 모든 단락에 적용할 수 있습니다.

CSS 규칙 세트는 스타일 시트 안에 포함되어 웹페이지의 겉모습을 결정합니다. 다음 글에서 CSS 문법이 어떻게 되어 있는지 자세하게 배울 수 있습니다.

간단한 CSS 예제

위 설명을 이해 하셨을 수도, 하지 못하셨을 수도 있으니 간단한 예를 사용하여 좀 더 명확하게 해보겠습니다. 우선 <h1><p>를 포함한 단순한 HTML 문서를 만들겠습니다. 스타일 시트는 <link> 요소를 사용하여 HTML에 적용되었다는 것을 주목하세요.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

이제 두 가지 규칙을 포함한 간단한 CSS 예제를 살펴보겠습니다.

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

첫 번째 규칙은 h1 선택자로 시작하는데, 이는 <h1> 요소에 자신의 속성 값을 적용하겠다는 것을 의미합니다. 첫 번째 규칙 안에는 세 개의 속성과 각각의 값이 있습니다. (속성/쌍 하나를 선언문이라고 부릅니다.)

  1. 처음 속성은 글자 색을 파랑으로 만듭니다.
  2. 두 번째는 배경을 노란색으로 바꿉니다.
  3. 세 번째는 헤더 주위에 1픽셀 굵기의 (점이나 짧은 선의 반복이 아닌)고형 검은 테두리를 칩니다.

두 번째 규칙은 p 선택자로 시작하는데, 이는 <p> 요소에 자신의 속성 값을 적용하겠다는 것을 의미합니다. 글자 색을 빨갛게 만드는 하나의 선언문을 포함합니다.

별로 예쁘진 않지만, 적어도 CSS가 어떻게 적용되는지는 느끼셨을겁니다.

실습: 첫 CSS 작성

그럼 스스로 CSS를 작성해 봅시다. 아래의 입력 영역에서 편집 가능한 예를 사용해보세요. 위쪽 예제에서 본 것과 비슷하게 간단한 HTML과 약간의 CSS를 준비했습니다. 간단한 선언문 몇 가지를 CSS에 추가해 HTML의 스타일을 바꿔주세요.

잘못 입력한 경우 초기화 버튼을 사용하여 언제든지 돌아갈 수 있습니다. 정말 막혔다면 답안 보기 버튼을 사용해 가능한 답안 중 한 가지를 확인하세요.

CSS가 실제로는 어떻게 동작하나요?

브라우저가 문서를 표시할 때는 문서 내용과 스타일 정보를 결합해야 합니다. 이는 두 단계로 나눠 처리합니다.

  1. 브라우저가 HTMLCSSDOM으로 변환합니다. DOM은 컴퓨터 메모리에서 표현한 문서입니다. 이제 문서의 내용과 스타일을 결합합니다.
  2. 브라우저가 DOM의 내용을 표시합니다.

DOM에 관해서

DOM은 트리 구조를 가집니다. 마크업 언어의 각 요소, 속성 및 텍스트는 트리 구조의 DOM 노드가 됩니다. 노드는 다른 DOM 노드와의 관계로 정의합니다. 일부 요소는 자식 노드의 부모이고, 자식 노드는 형제가 있습니다.

DOM은 CSS와 문서의 컨텐츠가 만나는 곳이기 때문에, DOM을 이해하는건 CSS 디자인, 디버그, 유지관리에 도움이 됩니다.

DOM 표현

길고 지루한 설명 대신 예제를 통해 DOM과 CSS가 어떻게 작용하는지 살펴보겠습니다.

다음의 HTML 코드가 존재한다고 가정해봅시다.

<p>
  써보자!
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

DOM에서 <p> 요소에 해당하는 노드는 부모 노드입니다. 자식으로는 텍스트 노드와 <span> 요소에 해당하는 노드들이 있습니다. SPAN 노드 또한 부모 노드로, 텍스트 노드를 자식으로 둡니다.

P
├─ "써보자!"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

브라우저는 이전의 HTML을 분석해 위의 DOM 트리로 만든 후, 렌더링해 아래와 같이 출력합니다.

DOM에 CSS 적용하기

스타일을 적용하기 위해 문서에 CSS를 추가했다고 가정해보겠습니다. 이번에도 HTML은 아래와 같습니다.

<p>
  써보자!
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

다음 CSS를 적용해보겠습니다.

span {
  border: 1px solid black;
  background-color: lime;
}

브라우저는 HTML을 분석하고 DOM 트리를 생성한 후, CSS를 분석합니다. CSS에 정의된 규칙이 span 선택자 하나이므로 세 <span>에 속성과 값을 적용합니다. 스타일을 업데이트 한 후의 출력은 아래와 같습니다.

CSS를 HTML에 적용하는 방법

HTML 문서에 CSS를 적용하는 보통 방법은 세 가지가 있는데, 어떤 방법은 다른 방법보다 유용하곤 합니다. 여기서는 각각 간단히 살펴보겠습니다.

외부 스타일 시트

알지 못하셨라도 이미 이 글에서 외부 스타일 시트를 보셨습니다. 외부 스타일 시트는 CSS를 .css 확장자의 별도 파일로 작성한 후 <link> 요소로 참조합니다. HTML 파일은 아래와 비슷하게 생겼을 것입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

그리고 CSS 파일입니다.

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

하나의 스타일 시트를 여러 문서에서 사용할 수 있고, 바꿔야 하는 부분이 있을 때도 한 곳에서만 수정하면 끝이기에 틀림없이 최선의 방법입니다.

내부 스타일 시트

내부 스타일 시트는 외부에 CSS 파일을 두는 대신 HTML 헤드 안의 <style> 요소에 작성합니다. HTML 파일은 아래처럼 구성할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

CMS 등 CSS 파일을 직접 수정할 수 없는 환경에서는 유용할 수 있지만, 외부 스타일 시트만큼 효율적이진 않습니다. 웹사이트에선 모든 페이지에 반복적으로 내용을 포함해야 하고, 수정사항이 생기면 여러 곳을 바꿔야 합니다.

인라인 스타일

인라인 스타일은 하나의 요소에만 영향을 주는 CSS 선언문 목록으로, style 속성 내부에 위치합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

정말 이래야 되는 상황이 아니면 하지 말아주세요! 유지보수에도 정말 안좋고(같은 내용을 문서별로 여러 번 수정해야 할 수도 있음), HTML의 구조적 정보가 CSS의 표현형 정보와 섞여서 읽고 이해하기도 힘듭니다. 서로 다른 형태의 코드를 분리하고 순수하게 유지해야 관련된 사람들의 일이 쉬워집니다.

작업 환경이 정말 제한적(CMS가 HTML 본문만 수정을 허용하는 등)이라면 인라인 스타일에 의존해야 할 수도 있습니다.

다음으로

여기까지 오셨으면 CSS의 작동 원리와 브라우저가 다루는 방식의 기본은 이해하셨을겁니다. 다음으로는 CSS 구문을 배워보세요.

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656, dasebee
최종 변경자: urty5656,