이번엔 CSS 구문에 관해 훨씬 깊게 들어가며 속성과 값이 선언문을 이루고, 여러 선언문이 선언 블록을, 선언 블록과 선택자가 완전한 CSS 규칙을 만드는 과정을 살펴보겠습니다. 주석과 공백 등 다른 구문도 알아보며 마무리 짓겠습니다.

전제 조건: 기본적인 컴퓨터 능력, 기본적인 소프트웨어 설치파일 조작의 기본적인 지식, HTML 기본 (HTML 소개 학습), CSS의 작동 방식.
목표: CSS의 기본적인 구문 구조를 자세하게 배우는 것.

참고: CSS는 선언형 언어로, 구문이 꽤 쉽고 이해하기에도 직관적입니다. 게다가 상당히 훌륭한 오류 복구 시스템을 통해, 실수를 하더라도 모든게 망가지는 일을 방지합니다. 예를 들면 이해할 수 없는 선언은 보통 무시합니다. 단점이라면 오류가 발생했을 때 어디를 봐야 할지 더 어려울 수도 있습니다. 계속 읽으시면 점차 명확해질겁니다.

단어 정리

CSS는 가장 기초적인 두 개의 조각으로 이뤄집니다.

  • 속성: 사람이 읽을 수 있는 식별자로, 어떤 (글꼴, 너비, 배경색 등 스타일 기능을 변경할건지 나타냅니다.
  • : 각 속성에는 값을 부여합니다. 값은 어떻게 (글꼴을 이걸로, 배경색을 저걸로...)스타일 기능을 변경할건지 나타냅니다.

속성과 그 값을 엮어서 CSS 선언문이라고 부르며, 선언문은 CSS 선언 블록 안에 들어갑니다. 마지막으로 CSS 선언 블록은 CSS 선택자와 함께 CSS 규칙세트(CSS 규칙)을 만듭니다.

이론에 너무 심취하기 전에, 눈에 보이는 예제를 살펴보겠습니다. (이전 장에서 거의 똑같은걸 살펴봤었습니다)

<!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>나의 첫 CSS 예제</p>

    <ul>
      <li>이건</li>
      <li>목록</li>
    </ul>
  </body>
</html>

CSS 파일은 다음과 같습니다.

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

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

둘을 합치면 다음 결과를 확인할 수 있습니다.

구문을 더 자세히 살펴보겠습니다.

CSS 선언문

CSS 속성을 특정한 값으로 설정하는 것이야 말로 CSS 언어의 핵심입니다. CSS 엔진은 페이지를 적절히 배치하고 스타일을 입힐 수 있도록 모든 요소 하나하나 어떤 선언문을 사용할지 계산합니다. 주의해서 기억해야 하는 점은 CSS의 속성과 값 둘 다 대소문자를 구분한다는 점입니다. 속성-값 쌍은 콜론(:)으로 구별합니다.

CSS 선언문:
background-color : red
속성
           [콜론으로 분리]

CSS는 300가지 이상의 속성과, 거의 무한한 수의 서로 다른 값을 가지고 있습니다. 모든 속성-값 쌍이 유효한건 아닙니다. 속성은 각자 받을 수 있는 값 종류의 목록을 가지고 있습니다.

중요: 알 수 없는 속성을 사용하거나, 제공한 값이 속성에서 받을 수 없는 값이라면 브라우저의 CSS 엔진이 해당 선언문을 완전히 무시합니다.

중요: CSS와 다른 웹 표준은 불확실성을 배제하기 위해 언제나 미국 영어 철자를 사용합니다. 즉 color는 언제나 color로 써야 하며, colour는 유효하지 않습니다.

실습: 선언문 찾기

위쪽 예제에는 다섯 개의 서로 다른 CSS 선언문이 존재합니다. 유효하지 않은(틀린) 선언문을 찾고, 그 이유를 설명해보세요.

CSS 선언 블록

선언문은 블록으로 묶이며, 블록은 여는 중괄호({)와 닫는 중괄호(})로 표시할 수 있습니다.

선언 블록 안의 각 선언문은 세미콜론(;)으로 구분해야 하며 그렇지 않으면 작동하지 않거나 예상하지 못한 결과를 낳습니다. 마지막 선언문은 세미콜론으로 마무리 지을 필요가 없지만, 나중에 선언문을 추가할 때 세미콜론 추가하는 일을 잊어버리는 일이 없도록 미리 추가해놓는게 좋은 방법으로 꼽히곤 합니다.

CSS 선언 블록:
{
  background-color : red; ← [세미콜론이 두 선언문을 분리]
  background-style : none ← [마지막 세미콜론은 필요하지 않지만 좋은 습관]
}         ↑
        선언문

참고: 어떤 경우엔 중첩 블록을 사용해야 할 수도 있습니다. 이 때 여는 중괄호와 닫는 중괄호는 HTML에서 열고 닫는 태그를 쓰듯 논리적으로 중첩되어야 합니다. 가장 많이 볼 수 있는 예시는 @-규칙으로, @ 기호가 앞에 붙은 식별자로 시작하는 블록입니다. @media@font-face 등이 있습니다. 아래 CSS 문(Statements)을 참고하세요.

참고: 빈 선언 블록도 유효한 구문입니다.

실습: 선언 블록은 어디에?

위쪽 예제에서 세 개의 서로 다른 CSS 선언 블록을 찾을 수 있나요?

CSS 선택자와 규칙

아직 조각 하나가 빠졌습니다. 선언 블록을 적용할 요소를 알려줘야 해요. 각 선언 블록 앞에 선택자, 페이지의 어떤 요소를 찾아내는 패턴을 추가해야 합니다. 그러면 선언 블록은 선택자와 맞는 요소에만 적용됩니다. 선택자와 선언 블록을 묶어 규칙 세트, 또는 그냥 규칙이라고 부릅니다.

CSS 규칙 세트:
div p, #id:first-line {
    ↑                   background-color : red;
선택자 그룹                background-style : none
                      }
                      ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯선언 블록⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

선택자가 매우 복잡해질 수도 있습니다. 여러 개의 선택자를 쉼표로 구분해서 여러 종류의 요소에 적용할 수도 있고, 선택자를 결합할 수도 있습니다. 예를 들면 클래스 "blah"를 가진 요소 중에서 <article> 안에 있어야 하고, 그 와중에 마우스 포인터가 요소를 가리키고 있어야 선택할 수도 있어요. 걱정 마세요. CSS를 경험하면서 점점 더 명확해질 테고, 게다가 다음 장인 선택자에서 자세하게 설명해드립니다.

여러 선택자가 같은 요소를 선택할 수 있으므로 같은 속성이 여러 번 적용될 수도 있습니다. 이런 경우에 CSS는 어떤 규칙을 다른 규칙보다 우선해서 선택해야 하는지 정의하고 있으며, 이를 종속(cascade) 알고리즘이라고 부릅니다. 종속과 상속에서 자세한 내용을 배우실겁니다.

중요:  선택자 그룹이나 결합 선택자에서 하나의 기본 선택자가 유효하지 않아도, 예를 들어 존재하지 않는 의사요소나 의사선택자를 사용해도, 선택자 그룹의 나머지는 유효합니다.

실습: 선택자 그룹 찾기

위쪽 예제에서 두 개의 서로 다른 요소에 적용될 규칙을 찾을 수 있나요?

CSS 문(statements)

CSS 규칙은 스타일 시트의 주요 블록으로 제일 흔하게 볼 수 있습니다. 하지만 때때론 다른 종류도 눈에 띕니다. CSS 규칙은 CSS 문(statements)의 한 종류이며, 나머지는 다음과 같습니다.

  • @-규칙은 CSS에 메타데이터, 조건 정보, 기타 부연 정보를 전달할 때 사용합니다. @-규칙은 앳 기호(@), 그 뒤에 무슨 규칙인지 알려주는 식별자, 모종의 구문 블록, 마무리 세미콜론으로 구성할 수 있습니다. 식별자로 구분하는 @-규칙은 각자 자신만의 구문과 의미를 가지고 있습니다. 몇 가지 예시를 들어보겠습니다.
    @import 'custom.css';
    위의 의미는 다른 CSS 파일을 현재 CSS 파일로 가져오겠다는 것입니다.
  • 중첩문은 @-규칙의 특정 종류로, 문서의 특정 조건이 맞아야만 안쪽 CSS 규칙을 적용합니다.
    • @media: 브라우저 정보가 주어진 조건과 맞으면 적용합니다.
    • @supports: 브라우저가 주어진 기능을 지원하면 적용합니다.
    • @document: 현재 페이지가 주어진 조건과 맞으면 적용합니다.
    @media (min-width: 801px) {
      body {
        margin: 0 auto;
        width: 800px;
      }
    }
    
    위의 중첩문은 페이지의 너비가 800픽셀을 초과해야 내부의 규칙을 적용합니다.

@-규칙이나 중첩문에 관한 내용은 이후에 더 배울 수 있습니다.

중요: 규칙 세트, @-규칙, 중첩문에 속하지 않는 다른 문은 모두 유효하지 않으며 무시합니다.

구문 그 너머: 읽기 편한 CSS

보시다시피 CSS 구문은 작성하기에 그렇게 어렵지 않습니다. 규칙을 쓰는데 잘못 쓰더라도 그냥 무시하고 끝이니까요. 그러나 여러분의 읽기 쉽고 유지보수에 용이한 코드를 작성하는 최선의 방법이 몇 가지 있습니다.

공백

공백이란 스페이스, 탭, 엔터를 말합니다. 공백을 추가하면 스타일시트를 좀 더 읽기 편하게 쓸 수 있습니다.

HTML과 마찬가지로 브라우저는 CSS의 공백을 대부분 무시합니다. 사실 많은 양의 공백이 읽기 편하라는 이유 하나로 존재하는겁니다. 바로 아래 예제를 보시면, 하나의 선언문(과 규칙의 시작/종료)이 각자 한 줄씩 차지하고 있습니다. 이 편이 최고의 방법일겁니다. 이해도 쉽고 유지도 편하니까요.

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

똑같은 내용이지만 공백 대부분을 생략하면 아래와 같습니다. 기능적으로는 위와 똑같지만, 여러분도 이 쪽이 읽기 더 힘든 편이라는 것에 동의하시리라고 생각합니다.

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

코드 레이아웃은 보통 개인적인 취향의 영역입니다. 그러나 팀 단위에서는 보통 팀원 전체가 동의한 코드 스타일 가이드가 존재합니다.

CSS에서 주의를 기울여야 하는 공백은 속성과 값 주위에 있습니다. 아래의 유효한 CSS 조각을 봐주세요.

margin: 0 auto;
padding-left: 10px;

반면 아래는 유효하지 않습니다.

margin: 0auto;
padding- left: 10px;

0auto를 유효한 margin의 값으로 인식하지 못하고(0auto는 두 개의 다른 값입니다), 브라우저가 padding-을 유효한 속성으로 읽기 못하기 때문입니다. 그러니 언제나 두 개의 값을 공백으로 구분하되, 속성/값 하나는 분리하지 않은 온전한 문자열로 지정해야 합니다.

주석

HTML처럼 CSS도 주석을 작성하는게 좋습니다. 몇 달 뒤에 다시 돌아와도 파악하기에 한결 수월하고, 다른 사람이 이해할 때에도 도움을 주니까요. 오류나는 부분을 찾는 등 테스트 용도로 잠시 일부를 제외할 때도 유용합니다.

CSS 주석은 /* 표시로 열고 */ 표시로 닫습니다.

/* 기본 요소 스타일 */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* 가독성을 위해 큰 화면이나 창에서 확대 */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* DOM에 중첩된 요소 스타일 */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

단축 속성

font, background, padding, border, margin 등 어떤 속성은 단축 속성이라고 부릅니다. 여러 속성 값을 한 줄에 쓸 수 있기 때문으로, 적절히 사용하면 시간도 줄이고 코드도 더 깔끔하게 작성할 수 있습니다.

아래의 padding 속성은,

/* padding, margin 등의 단축 속성은 값을
   위, 오른쪽, 아래, 왼쪽(시계방향)으로 적용합니다.
   다른 단축 속성도 있는데, padding으로 예를 들면
   값을 두 개 사용할 경우 각각 위아래, 좌우를 설정합니다. */
padding: 10px 15px 15px 5px;

다음 네 개를 모두 조합한 것과 같은 효과입니다.

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

이번 background 속성은,

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

이 속성을 한 번에 설정하는 것과 같죠.

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

더 깊게 살펴보진 않겠습니다. 어차피 계속 진행하면서 많은 예제를 만나실테니까요. 저희의 CSS 참고서에서 더 많은 단축 속성도 찾아보시면 좋습니다.

다음으로

여기까지 오셨으면 잘 적용되고 유지보수하기 쉬운 스타일시트를 작성하는 CSS 구문 기초를 알게 되셨을겁니다. 다음 장에서는 CSS 선택자의 여러 유형과 작동 방식을 자세히 알아보겠습니다.

문서 태그 및 공헌자

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