HTML5 자습서 CSS

CSS는 Cascading Stylesheet의 약자이며 HTML 같은 마크업 언어로 작성된 문서를 꾸미기 위해 사용합니다.

따라하기

HTML 문서의 head 요소 안에 style 요소를 넣고 CSS 코드를 적으면 해당 문서를 다양하게 꾸밀 수 있습니다:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello</title>
    <style>
    p {
      color: white;
      text-decoration: underline;
      background-color: black;
    }
    </style>
  </head>
  <body>
    <p>Hello HTML5!</p>
  </body>
</html>

위 문서에서 style 요소 안에 들어있는

p {
  color: white;
  text-decoration: underline;
  background-color: black;
  text-align: right;
}

부분이 CSS 입니다.

위 문서는 아래와 같이 표현됩니다:

Hello HTML5!

문법 설명

CSS는 아래 형식으로 작성합니다:

selector {
  property: value;
  property: value;
  ...
}

selector는 문서의 특정 부분을 지정하는 역할을 합니다. property: value;는 어떤 속성에 어떤 스타일 값을 지정할 것인지를 명시하며 선언(declaration)이라고 부릅니다. 예를 들어

모든 단락을 우측 정렬하기

는 CSS로 아래와 같이 표현됩니다:

p {
  text-align: right;
}

위 예시에서 selectorp이므로 문서 내의 모든 p 요소를 뜻합니다. text-align: right;text-align(텍스트 정렬)이라는 속성(property)의 값을 right(우측)로 지정하겠다는 의미입니다.

아래와 같이 하나의 selector에 대하여 여러 개의 선언을 한 번에 적을 수도 있습니다:

p {
  color: white;
  text-decoration: underline;
  background-color: black;
  text-align: right;
}

텍스트 색상(color)은 흰색, 텍스트 꾸미기(text-decoration)는 밑줄, 배경색(background-color)은 검정색, 텍스트 정렬(text-align)은 우측으로 지정하고 있습니다.

관련 문서

가이드

HTML

CSS

자바스크립트