본문으로 건너뛰기

규칙의 모양

HTML·CSS 목차CSS 첫걸음레슨 19 / 93

목차

CSS 규칙(rule)은 '어느 요소의 무엇을 어떻게 바꿀지'를 적은 한 덩어리입니다. 선택자(selector)로 요소를 고르고, 중괄호 안의 선언(declaration)으로 그 요소의 속성에 값을 냅니다.

지금까지 만든 페이지의 모양은 모두 브라우저가 처음부터 입히는 CSS, 곧 기본 스타일이 정한 것이었습니다. 제목이 큰 것도 기본 스타일의 2em(보통 글자의 두 배) 때문입니다. 이 모양을 바꾸는 것이 CSS의 일입니다. 이 레슨은 style 요소에 규칙 하나를 써서 제목 색을 바꿔 보고, 규칙의 부분 이름과 틀렸을 때 브라우저가 하는 일을 봅니다.

이 단원(CSS 첫걸음)은 태그 이름으로 고르는 규칙만 씁니다. 단원 끝 레시피 한 페이지 만들기에서 1~4단원으로 김치볶음밥 페이지를 꾸밉니다. 과목 끝 할 일 목록 화면의 CSS도 이 규칙 꼴만 씁니다. 이 단원을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.

12단계 중 1단계. 이 그림 읽는 법: 한 속성에 닿은 선언을 모읍니다. 취소선을 그은 선언은 쓰이지 않습니다.

1style 요소에 규칙 하나 쓰기

CSS는 HTML 파일 안 style 요소에 바로 적을 수 있습니다. 아래 규칙은 제목(h1)의 글자색을 진한 파랑으로 바꿉니다.

<style>
  h1 {
    color: #005bb5;
  }
</style>
<h1>김치볶음밥</h1>
결과 화면
잰 값개발자 도구에서 본 값
  • h1의 글자색rgb(0, 91, 181)

예제는 줄을 아끼려고 head와 body를 뺐습니다. 파일에서는 화면에 그리지 않는 style 요소를 head 안 title 아래에, h1은 body 안에 둡니다.

파일 전체 보기
<!-- hello.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>CSS 연습</title>
  <style>
    h1 {
      color: #005bb5;
    }
  </style>
</head>
<body>
  <h1>김치볶음밥</h1>
</body>
</html>
결과 화면탭: CSS 연습

style 요소에 쓴 규칙은 그 페이지 하나에만 닿습니다. 여러 페이지가 함께 쓰는 길은 다음 레슨에서 봅니다.

2규칙의 부분 — 선택자 · 선언 · 속성 · 값

1절 규칙의 부분마다 이름이 있습니다.

부분이 규칙에서하는 일
선택자h1규칙이 닿을 요소를 고른다
중괄호{ · }선언이 들어가는 자리의 처음과 끝
선언color: #005bb5;바꿀 것 하나
속성color무엇을 바꿀지 — 여기서는 글자색
콜론:속성과 값 사이
값#005bb5어떻게 바꿀지 — 여기서는 진한 파랑
세미콜론;선언 하나가 끝난 곳

규칙은 선택자 + { 선언 }이고, 선언은 속성 + : + 값 + ;입니다. 여기서 속성은 CSS 속성으로, lang="ko"처럼 태그 안에 쓰는 HTML 속성과 이름만 같습니다.

h1처럼 태그 이름을 그대로 쓴 선택자를 태그 선택자라고 부릅니다. 태그 선택자는 그 태그로 된 요소를 모두 고르고(h1이 셋이면 셋 모두), 다른 요소에는 닿지 않습니다.

<style>
  h1 {
    color: #005bb5;
    font-size: 40px;
  }
</style>
<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>
결과 화면
잰 값개발자 도구에서 본 값
  • h1의 font-size40px
  • p의 font-size16px
  • p의 글자색rgb(0, 0, 0)

선언 둘이 h1에 닿았고, 고르지 않은 p는 크기도 색도 그대로입니다. 제목에서는 우리 선언 40px이 기본 스타일의 2em(32px)을 덮었습니다. 32px은 브라우저 글자 크기 설정이 처음 그대로일 때 값입니다.

브라우저 규칙 4. CSS 규칙은 선택자가 고른 요소에만 닿습니다. 선언 하나는 그 요소의 CSS 속성에 값을 냅니다. 알아듣지 못한 선언 · 규칙은 오류 없이 그 부분만 버립니다.

이 레슨의 선언은 속성 이름 하나가 속성 하나를 정합니다. 여럿을 한 줄로 정하는 짧게 적기는 여백 짧게 적기에서 다룹니다.

CSS는 줄바꿈과 들여쓰기를 따지지 않아 한 줄에 써도 같지만, 이 과목은 선언을 한 줄에 하나씩 두 칸 들여 씁니다.

3알아듣지 못한 선언은 버린다

CSS는 틀린 곳이 있어도 오류를 알리지 않아, 기호 하나를 빠뜨리면 모양이 조용히 어긋납니다. 2절 규칙에서 3번 줄 끝 세미콜론을 지우면 이렇습니다.

<style>
  h1 {
    color: #005bb5
    font-size: 40px;
  }
</style>
<h1>김치볶음밥</h1>
결과 화면
잰 값개발자 도구에서 본 값
  • h1의 글자색rgb(0, 0, 0)
  • h1의 font-size32px

선언은 세미콜론에서 끝나고 줄바꿈은 따지지 않습니다. 그래서 브라우저는 3번 줄부터 다음 세미콜론까지를 선언 하나로 읽어, color의 값이 #005bb5 font-size: 40px⁠이 됩니다. 그런 색은 없으니 이 선언을 통째로 버립니다(브라우저 규칙 4). 빠진 기호는 하나인데 선언 둘이 사라져, 글자색도 크기도 기본 그대로입니다.

규칙의 마지막 선언은 닫는 중괄호가 끝을 알려 세미콜론이 없어도 먹습니다. 그래도 이 과목은 마지막 선언에도 세미콜론을 붙입니다. 아래에 선언을 더하는 순간 위와 같은 일이 생기기 때문입니다.

버린 선언은 개발자 도구 Styles 창에서 경고 표시와 취소선으로 보입니다(크롬 기준).

예제

규칙 쓰기 세 걸음

규칙 하나를 쓸 때는 늘 같은 세 걸음입니다. 하위 목표를 주석으로 달면 이렇습니다.

<style>
  /* 1. 고를 요소 */
  h1 {
    /* 2. 바꿀 속성과 값 */
    color: #005bb5;
    font-size: 48px;
  }
</style>
<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>
결과 화면
잰 값개발자 도구에서 본 값
  • h1의 글자색rgb(0, 91, 181)
  • h1의 font-size48px
  • p의 font-size16px
  • 1. 고를 요소: 바꿀 것은 제목이라 선택자는 h1입니다. 고르지 않은 p는 그대로입니다.
  • 2. 바꿀 속성과 값: 글자색은 color, 글자 크기는 font-size이고, 값은 진한 파랑 #005bb5와 48px입니다.
  • 3. 개발자 도구로 확인: 저장하고 새로고침한 뒤 Elements 패널에서 h1을 고릅니다. Styles 창에 이 규칙이 보이면 규칙이 닿은 것입니다(읽는 법은 브라우저 기본 스타일과 Styles 창).

CSS 주석은 /*로 열고 */로 닫으며, 그 사이는 브라우저가 읽지 않습니다. HTML 주석 <!-- -->는 CSS 안에서 주석이 아닙니다.

자주 틀리는 곳

틀린 생각: CSS에 틀린 줄이 있으면 오류가 나거나, 그 CSS가 하나도 안 먹는다.

HTML이 틀려도 화면이 그려졌듯이 CSS도 멈추지 않습니다. 아래 h1 규칙의 첫 선언은 속성 이름을 영국식 철자 colour로 썼습니다.

<style>
  h1 {
    colour: #d70015;
    font-size: 40px;
  }

  p {
    color: #005bb5;
  }
</style>
<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>
결과 화면
잰 값개발자 도구에서 본 값
  • h1의 글자색rgb(0, 0, 0)
  • h1의 font-size40px
  • p의 글자색rgb(0, 91, 181)

colour는 CSS가 아는 속성 이름이 아니라서 그 선언만 버려졌습니다. 같은 규칙의 font-size와 다음 p 규칙은 그대로 먹었습니다.

맞는 규칙: 알아듣지 못한 선언은 오류 없이 그 선언 하나만 버려집니다. 나머지 선언과 규칙은 그대로 먹습니다(브라우저 규칙 4).

틀린 생각: 길이에 숫자만 적어도 브라우저가 px로 알아듣는다.

padding은 글자 둘레의 안쪽 여백입니다(박스 모델 단원에서 다룹니다). 단위 없이 16만 적으면 이렇습니다.

<style>
  p {
    color: #005bb5;
    padding: 16;
  }
</style>
<p>오늘의 메뉴</p>
결과 화면
잰 값개발자 도구에서 본 값
  • p의 padding-top0px
  • p의 글자색rgb(0, 91, 181)

단위가 없는 16은 길이로 알아듣지 못해 그 선언만 버려졌습니다. 안쪽 여백은 0이고, 같은 규칙의 색은 먹었습니다.

맞는 규칙: 0이 아닌 길이에는 px 같은 단위를 붙입니다. 단위가 빠진 선언은 버려집니다(브라우저 규칙 4).

틀린 생각: 닫는 중괄호 하나쯤 빠져도 그 규칙만 망가진다.

닫는 중괄호 }가 빠지면 그 아래 규칙들이 이상하게 먹습니다. 어떻게 이상해지는지는 하위·자식·형제 선택자에서 봅니다.

맞는 규칙: 아래 규칙이 이상하게 먹으면 그 위 규칙의 중괄호부터 봅니다. 여는 {마다 닫는 }가 짝을 이루는지 셉니다.

확인 문제

1. 아래 코드에서 4번 줄 font-size: 48px;의 px을 지우면 제목의 색과 크기는 어떻게 될까요?

<style>
  h1 {
    color: #005bb5;
    font-size: 48px;
  }
</style>
<h1>김치볶음밥</h1>
결과 화면
  • ① 색은 파랑, 크기는 48px 그대로
  • ② 색은 파랑, 크기는 기본 32px
  • ③ 색도 크기도 기본(검정 · 32px)
힌트

바뀐 것은 4번 줄의 값 하나입니다. 그 값을 길이로 읽을 수 있는지 보세요.

정답

② — 색은 파랑 그대로이고, 크기만 기본 32px로 돌아갑니다.

<style>
  h1 {
    color: #005bb5;
    font-size: 48;
  }
</style>
<h1>김치볶음밥</h1>
결과 화면
잰 값개발자 도구에서 본 값
  • h1의 글자색rgb(0, 91, 181)
  • h1의 font-size32px
  • 4번 줄의 48은 단위가 없어 길이로 알아듣지 못합니다. 브라우저는 오류 없이 이 선언만 버립니다(브라우저 규칙 4).
  • 크기 선언이 없으니 기본 스타일의 32px이 그대로이고, 3번 줄 색 선언은 따로 먹습니다.
  • ①은 숫자만 있어도 px로 읽는다고 본 것입니다. 0이 아닌 길이에는 단위가 있어야 합니다.
  • ③은 알아듣지 못한 선언이 있으면 규칙 전체가 버려진다고 본 것입니다(CSS도 멈춘다는 생각). 버려지는 것은 알아듣지 못한 선언 하나입니다(브라우저 규칙 4).

font-size: 48px;에서 px을 지워 보세요. 제목의 색과 크기는 어떻게 될까요?

2. 문단(p) 글자를 20px로 키우는 선언을 ____ 자리에 쓰세요.

<style>
  p {
    ____
  }
</style>
<p>한식 · 조리 15분 · 2인분</p>
힌트

예제에서 글자 크기를 바꾼 줄을 보세요. 하위 목표 2 '바꿀 속성과 값'입니다.

정답

font-size: 20px;

<style>
  p {
    font-size: 20px;
  }
</style>
<p>한식 · 조리 15분 · 2인분</p>
결과 화면
잰 값개발자 도구에서 본 값
  • p의 font-size20px

다르게 써도 되는 곳: 이 규칙의 마지막 선언이라 끝 세미콜론을 빼도 먹습니다. 그래도 선언을 더할 때를 생각해 붙입니다.

  • 흔한 오답은 font-size: 20;입니다. 단위가 없어 버려지고 16px 그대로입니다.
  • font-size = 20px;처럼 콜론 대신 =를 쓰면 알아듣지 못해 버려집니다. 속성과 값 사이는 늘 콜론입니다.

3. 플로우 카페 메뉴판입니다. 세미콜론이 빠진 줄이 둘 있습니다. h2와 li 가운데 글자 크기가 규칙대로 바뀌는 것은 어느 것일까요?

<style>
  h2 {
    color: #6e6e73
    font-size: 28px;
  }

  li {
    font-size: 20px
  }
</style>
<h2>플로우 카페</h2>
<ul>
  <li>커피 4000</li>
  <li>라테 4500</li>
</ul>
  • ① h2와 li 둘 다
  • ② li만
  • ③ 둘 다 아니다
힌트

두 규칙에서 세미콜론이 빠진 줄 바로 다음에 무엇이 오는지 보세요.

정답

② — li만 20px로 바뀝니다.

결과 화면
잰 값개발자 도구에서 본 값
  • h2의 font-size24px
  • h2의 글자색rgb(0, 0, 0)
  • li의 font-size20px
  • h2 규칙은 3번 줄 끝에 세미콜론이 없어 3~4번 줄이 color 선언 하나로 읽힙니다. 그런 색은 없어 버려지고, 크기는 기본 스타일의 24px입니다(브라우저 규칙 4).
  • li 규칙의 8번 줄은 마지막 선언이라 닫는 중괄호가 끝을 알려 줍니다. 20px로 먹습니다.
  • ①은 줄을 바꾸면 선언이 끝난다고 본 것입니다. 선언은 세미콜론에서 끝납니다.
  • ③은 세미콜론이 빠진 선언은 늘 버려진다고 본 것입니다. 버려지는 것은 두 선언이 합쳐져 알아듣지 못하게 된 때입니다.

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절의 파일 전체를 hello.html로 저장해 브라우저로 열면 제목이 진한 파랑입니다. color 줄 아래에 font-size: 40px;을 더해 저장하고 새로고침합니다. 그다음 color 줄 끝 세미콜론을 지우면 어떻게 될지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다.

끝까지 내려오면 저절로 표시됩니다. 이 기기에만 저장합니다.

HTML·CSS 목차로