id와 class

id와 class는 요소에 붙이는 이름표입니다. class는 여러 요소에 같은 이름을 붙일 수 있고 한 요소에 빈칸으로 여럿을 붙이며, id는 한 페이지에서 요소 하나에만 붙입니다. CSS는 .이름으로 그 class가 붙은 요소를, #이름으로 그 id가 붙은 요소를 골라 규칙을 줍니다.

목록 페이지에는 레시피 카드가 여섯 장 생깁니다. 여섯 장에 같은 색을 주고 싶은데, 태그 이름 li로 고르면 레시피 페이지 재료 목록의 li까지 함께 골라집니다. 태그 이름은 요소의 종류일 뿐이라, '이 li들이 레시피 카드'라는 표시가 따로 있어야 그것만 골라낼 수 있습니다. 이 레슨에서는 class와 id를 붙이는 법, CSS가 그것으로 고르는 법, 같은 id를 둘에 붙이면 생기는 일을 봅니다.

<h1 id="title">레시피 목록</h1><ul>  <li class="recipe-card">    김치볶음밥  </li>  <li class="recipe-card">    계란말이  </li></ul>

1class — 여러 요소에 붙이는 이름표

<ul>
  <li class="recipe-card">
    김치볶음밥
  </li>
  <li class="recipe-card">
    계란말이
  </li>
</ul>
<ul>
  <li>밥 2공기</li>
</ul>

.recipe-card {
  color: #005bb5;
}

class="recipe-card"는 '이 요소는 레시피 카드 무리'라는 이름표입니다. CSS의 .recipe-card는 점(.) 뒤의 이름과 같은 class가 붙은 요소를 모두 고릅니다. 잰 값의 고른 글에 카드 둘만 있습니다. 카드 둘만 파랗게 칠해지고, 아래 재료 목록의 '밥 2공기'는 기본 글자색 그대로입니다. 규칙은 선택자가 고른 요소에만 닿기 때문입니다(브라우저 규칙 4).

한 요소에 이름표를 여럿 붙일 때는 빈칸으로 나눕니다. class="recipe-card new"⁠는 이름표 recipe-card와 new 둘이라, .recipe-card도 .new도 이 요소를 고릅니다. 이름표는 모양이 아니라 '무엇인지'를 말하게 짓습니다. 영문 소문자로 쓰고 낱말 사이는 하이픈(-)으로 잇습니다 — recipe-card. 이름표는 대소문자도 가려, Recipe-card는 recipe-card와 다른 이름표입니다.

2id — 한 페이지에 하나뿐인 이름표

<h1>레시피 목록</h1>
<p id="count">레시피 6개</p>

#count {
  color: #6e6e73;
}

id="count"는 이 페이지에서 그 요소 하나만 가리키는 이름표이고, CSS는 #count로 고릅니다. 같은 페이지 안에서 옮겨 가기에서 링크가 찾아갈 곳에 붙인 id도 이 이름표입니다. 같은 id를 두 요소에 붙이면 어떻게 될까요? 재료 제목을 복사하다 id="steps"가 두 제목에 붙었습니다.

<h1>김치볶음밥</h1>
<a href="#steps">조리 순서</a>
<h2 id="steps">재료</h2>
<h2 id="steps">조리 순서</h2>

#steps {
  color: #005bb5;
}

CSS는 경고 없이 두 제목을 다 칠합니다. 하지만 '조리 순서' 링크를 누르면 앞쪽 '재료' 제목으로 갑니다 — 링크는 나무에서 그 id가 붙은 첫 요소를 찾기 때문입니다. 자바스크립트 과목에서 id로 요소를 찾을 때도 앞쪽 하나만 나옵니다. 검사기는 Error를 냅니다 — 'id steps가 겹친다'는 뜻이고, Warning은 처음 붙은 줄을 알려 줍니다. 여러 요소에 붙일 이름표라면 class를 씁니다.

3이름표 말고 요소에 적어 두는 것 — data-* · hidden

<ul>
  <li data-id="1">우유 사기</li>
  <li data-id="2">산책하기</li>
</ul>
<p hidden>할 일이 없습니다.</p>

data-로 시작하는 속성(data-id)은 화면에 아무 영향이 없고, JavaScript가 읽으려고 요소에 적어 두는 메모입니다. 값 없이 이름만 쓰는 hidden은 붙어 있으면 켜지는 스위치처럼, 그 요소를 화면에서도 화면 읽기 프로그램에서도 감춥니다. 보이는 글에 '할 일이 없습니다.'가 없는 까닭입니다. 17단원의 할 일 화면은 id 여덟(todo-form · todo-list · count 등)과 class(app · done · delete 등), data-filter를 붙입니다. 자바스크립트 과목이 이 이름표로 요소를 찾아 바꾸므로, 그 글자 그대로 씁니다.

예제

레시피 카드의 머리 부분에 이름표를 붙이고, 배지만 골라 색을 줍니다.

<!-- 3. 이름표 붙이기 -->
<div class="recipe-card-head">
  <h2>계란말이</h2>
  <span class="badge">한식</span>
</div>

.badge {
  color: #005bb5;
}

이름 묶음에는 recipe-card-head, 배지에는 badge를 붙였습니다. 규칙 .badge는 배지만 골라, 요리 이름은 기본 글자색 그대로입니다. 이름표는 시맨틱 요소의 세 걸음 가운데 마지막 걸음입니다.

자주 틀리는 곳

틀린 생각: class="red"를 붙이면 그 요소가 빨갛게 된다.

이름이 '빨강'이니, 이름표만 붙여도 색이 바뀔 것 같습니다.

<p class="red">맵기 3단계</p>

글자는 기본 색 그대로입니다. 이름표 이름은 브라우저에는 아무 뜻도 없는 글자입니다. .red 규칙이 그 요소를 골라 색을 줄 때만 모양이 바뀝니다.

맞는 규칙: 모양은 이름표가 아니라 그것을 고른 CSS 규칙이 줍니다(브라우저 규칙 4). 그래서 이름표는 모양이 아니라 역할로 짓습니다 — red로 지었다가 색을 파랑으로 바꾸면 이름이 거짓말이 됩니다(8단원에서 더).

틀린 생각: 이름표를 더하려면 class를 한 번 더 쓴다.

속성을 하나 더 쓰면 이름표도 하나 더 붙을 것 같습니다.

<p class="a" class="b">가</p>

브라우저는 오류 없이 앞의 class만 남기고 뒤의 것을 버렸습니다. 나무에 b가 없어 .b는 이 문단을 고르지 못합니다. 검사기는 'class 속성이 겹친다'는 Error를 냅니다.

맞는 규칙: class 속성은 하나만 쓰고, 이름표 여럿은 그 안에 빈칸으로 나눠 씁니다 — class="a b".

틀린 생각: 두 낱말 이름은 빈칸으로 띄어 쓴다.

'recipe card'처럼 띄어 쓰면 읽기 쉬워 보입니다.

<ul>
  <li class="recipe card">
    김치
  </li>
</ul>

.recipe-card {
  color: #005bb5;
}

.recipe-card 규칙이 닿지 않아 글자는 기본 색입니다. 빈칸은 이름표를 나누는 표시라, 이 li에는 이름표 recipe와 card 둘이 붙었습니다.

맞는 규칙: 한 이름표 안의 낱말은 하이픈으로 잇습니다 — recipe-card. 빈칸을 넣으면 이름표가 나뉩니다.

틀린 생각: hidden을 붙이면 무엇이 있어도 감춰진다.

hidden은 감추라는 표시이니, CSS가 무엇을 정하든 감춰질 것 같습니다.

<p class="empty" hidden>
  할 일이 없습니다.
</p>

.empty {
  display: block;
}

글이 보입니다. display는 놓는 방식을 정하는 CSS 속성입니다(10단원). hidden도 기본 스타일의 display 선언으로 감추는 것이라, 우리 CSS가 display를 정하면 우리 규칙이 이깁니다.

맞는 규칙: hidden으로 감출 요소에는 display를 정하는 규칙이 닿지 않게 합니다. 할 일 화면을 꾸미는 17단원에서 이 자리를 다시 봅니다.

확인 문제

1. 카드 둘에 같은 이름표를 붙였습니다. 둘째 카드의 이름표를 recipe-cart로 한 글자 잘못 쓰면, 결과 화면에서 두 카드의 글자색은 어떻게 될까요?

<ul>
  <li class="recipe-card">
    김치볶음밥
  </li>
  <li class="recipe-cart">
    계란말이
  </li>
</ul>

.recipe-card {
  color: #005bb5;
}

• ① 둘 다 파랑 — 거의 같은 이름이라 골라진다
• ② 첫째만 파랑, 둘째는 기본 글자색
• ③ 둘 다 기본 글자색 — 한 카드가 틀리면 규칙이 버려진다

<ul>
  <li class="recipe-card">
    김치볶음밥
  </li>
  <li class="">
    계란말이
  </li>
</ul>

.recipe-card {
  color: #005bb5;
}

2. 떡볶이 카드에 이름표를 붙이는 중입니다. ____ 자리에, 배지 '한식'에 이름표 badge를 붙인 여는 태그를 쓰세요.

<!-- 3. 이름표 붙이기 -->
<div class="recipe-card-head">
  <h2>떡볶이</h2>
  ____한식</span>
</div>

3. 여행 일정에서 오늘 갈 곳을 빨갛게 보이려 합니다. 결과 화면에서 빨갛게 그려지는 요소를 모두 고르세요. 기호를 다 쓰세요.

<h2 class="day">2일: 전주</h2>
<p class="day today">한옥마을</p>
<p class="today">경기전</p>
<p class="Today">전동성당</p>
<p id="today">남부시장</p>

.today {
  color: #d70015;
}

• ㉠ h2 2일: 전주
• ㉡ p 한옥마을
• ㉢ p 경기전
• ㉣ p 전동성당
• ㉤ p 남부시장

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. hello.html의 body 안을 2절의 같은 id 둘 예제(제목 · 링크 · h2 둘)로 바꿉니다. 제목들이 한 화면에 다 들어 링크를 눌러도 굴러가지 않으니, 두 h2 사이와 둘째 h2 아래에 글이 든 문단(<p>문단</p>)을 스무 줄씩 넣고 저장 · 새로고침합니다. '조리 순서' 링크를 누르면 창 맨 위로 굴러오는 것은 '재료' 제목입니다. W3C 검사기의 칸의 글을 모두 지우고(전체 선택 → 지우기) 파일 전체를 붙여 넣으면 Error 'Duplicate ID'가 뜹니다. 파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.