현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

CSS (Cascading Style Sheets) 를 이용하면 멋진 외견을 가진 웹페이지를 작성할 수 있는데, 그 뒤편에서는 어떠한 동작을 하는 것일까요? 이 글은 CSS란 무엇인지, 웹 브라우저가  HTML 을 Document Object Model (DOM) 로 전환하는 방법, CSS가  DOM에 어떻게 적용되는지, 굉장히 기본적인 문법 예, 실제로 CSS를 웹에 포함하는 방법을 설명합니다.

전제 조건: 기본적인 컴퓨터 능력, 기본적인 소프트웨어 인스톨, 파일 조작의 기본적인 지식, HTML기본 (Introduction to HTML 학습.)
Objective: CSS란 무엇인지, 어떻게 동작하는지 기초적인 레벨을 배우는 것.

CSS란 무엇인가?

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

문서는 보통 마크업 언어를 사용한 테스트 파일입니다. — HTML 이 가장 일반적인 마크업 언어이지만, SVGXML과 같은 다른 마크업 언어를 만날 수도 있을 것입니다.

유저에게 문서를 표시한다는 것은 방문자가 이용할 수 있는 형식으로 교환하는 것을 의미합니다.  Firefox, ChromeInternet Explorer, 와 같은 브라우저는 문서를 컴퓨터의 화면, 프로젝터나 프린터에서 시각적으로 표시하도록 설계되어 있습니다.

CSS는 어떻게 HTML에 작용하는가?

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

  • 프로퍼티 세트는 HTML 콘텐츠가 표시되는 방법을 갱신하기 위한 값을 갖습니다. 예를들어, 부모요소의 50% 폭으로 배경은 빨갛게

  • 셀렉터는 프로퍼티의 값을 변경하여 적용하고 싶은 요소를 선택(셀렉트)합니다. 예를들어 HTML 문서 내의 모든 단락에 CSS를 적용.

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>

2가지 규칙만 포함된 무척이나 간단한 CSS 예를 봐봅시다. :

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

p {
  color: red;
}

첫 번째 규칙은 h1 셀렉터로 시작되고, <h1> 요소에 프로퍼티 값이 적용되는 것을 의미합니다. 규칙 안에는 3개의 프로퍼티와 값이 포함되어 있습니다. (각각의 프로퍼티/값 쌍을 선언이라고 부릅니다.):

  1. 첫 번째에서는 텍스트의 색을 파란색으로 설정합니다.

  2. 두 번째는 배경색을 노란색으로 설정합니다.

  3. 세 번쨰는 1픽셀 폭, 실선(점선이 아닌) 검은색의 테두리를 그립니다.

두 번쨰 규칙은 p 셀렉터로 시작되고, <p> 요소에 프로퍼티의 값이 적용되는 것을 의미합니다. 하나의 프로퍼티와 값을 포함하고, 텍스트 색을 빨강으로 설정합니다.

웹 브라우저에서는 위의 코드를 아래와 같이 출력합니다.

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

이것은 그다지 예쁘지는 않지만, 적어도 CSS가 어떻게 동작하는지는 알 수 있습니다.

실습: 당신의 첫 CSS 작성

그럼 스스로 CSS를 작성해 봅시다. 아래의 「입력」 영역에서 편집 가능한 예를 사용하여서 실시해봅시다. 위의 예에서 본 것과 비슷한 방법으로 간단한 HTML과 CSS프로퍼티를 사용합니다. 간단한 선언을 CSS에 추가하여 HTML에 스타일링 해주세요.

잘못 입력한 경우, 리셋 버튼을 사용하여 언제든지 리셋할 수 있습니다. 막혔을 경우는 답을 보는 버튼을 눌러서 해답을 확인해주세요.

CSS는 실제로 어떻게 작동할까?

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

  1. 브라우저는 HTMLCSSDOM (Document Object Model)으로 변환합니다. DOM은 컴퓨터의 메모리에 있는 문서를 나타내고, 문서의 내용과 스타일을 결합합니다.

  2. 브라우저는 DOM의 내용을 표시합니다.

DOM에 대해서

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

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

DOM 표현

길고 지루한 설명이 아니라 DOM과 CSS가 어떻게 작용하는지 예제를 통해 살펴봅시다.

다음의 HTML code로 예를 들어봅시다:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

DOM에서 <p> 요소에 해당하는 노드는 부모 노드입니다. 그 자식은 텍스트 노드이며 <span>요소에 해당하는 노드입니다. SPAN노드들 또한 텍스트 노드가 자식 인 부모 노드입니다.

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

This is how a browser interprets the previous HTML snippet —it renders the above DOM tree and then outputs it in the browser like so:

DOM에 CSS 적용하기

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

<p>
  Let's use:
  <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를 적용하는 방법에는 세 가지가 있는데, 일반적으로 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를 업데이트하면 되기 때문에 아마 가장 좋은 방법일 것입니다.

내부 스타일 시트

내부 스타일 시트는 외부에 CSS 파일을 가지고 있지 않지만, 대신 HTML 헤드 안에 포함 된 <style> 요소 안에 CSS를 배치합니다. 따라서 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>

이 것은 일부 상황에서는 유용 할 수 있습니다(CSS 파일을 직접 수정할 수없는 콘텐츠 관리 시스템을 사용하는 경우). 하지만 외부 스타일 시트만큼 효율적이지는 않습니다. 웹 사이트에서 CSS는 모든 페이지에서 반복되고 변경이 필요한 경우 여러 위치에서 업데이트됩니다.

인라인 스타일

인라인 스타일은 style속성이 포함된 하나의 요소에만 영향을 미치는 CSS 선언입니다.

<!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>

정말로 필요하지 않은 한, 이것은 사용하지 마세요. 유지 관리 (문서마다 동일한 정보를 여러 번 업데이트해야 할 수도 있음)가 매우 어려울뿐만 아니라 CSS 정보와 HTML 구조 정보가 혼합되어 CSS를 읽고 이해하기가 더 어려워집니다. 서로 다른 유형의 코드를 분리하고 순수하게 유지하면 코드 작업자 모두가 훨씬 쉽게 작업 할 수 있습니다.

인라인 스타일을 사용해야하는 유일한 경우는 작업 환경이 정말로 제한적인 경우입니다 (아마 당신의 CMS가 HTML body만 편집 할 수 있게 허용한 경우)

What's next

여기서 CSS의 작동 원리와 브라우저가 그것을 어떻게 다루는지를 이해해야합니다. 다음은 CSS 문법에 대해서 배워보세요.

문서 태그 및 공헌자

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