이 웹페이지를 봅시다

여기 위에 heading이 있고요

토끼에 대한 글이 있는 문단이 있고요

여긴 여러 개의 문단이 있네요

제가 좋아하는 토끼 노래의
가사가 들어있죠

저번 시간에 id를 이용해서 첫번째
문단에 스타일을 적용했어요

하지만 이젠 여러 문단이 있으니까

이 문단 모두를 노란
배경색으로 만들고 싶어요

지금까지 배운 것으로는
어떻게 할 수 있을까요?

처음 우리가 배운 것은

특정 타입의 모든 태그를
선택하는 거였죠

'p'같은 태그를 가진 것들 말이에요

하지만 그렇게 하면 모든 문단을 칠하게 돼요
가사 문단 이외에도 말이죠

우리는 뭔가 조금 더 구체적으로 기술하는 것이 필요해요

그래서 우린 id를 이용해
태그를 선택하는 것을 배웠어요

'rabbit-song'같은 id를 가진
문단을 고르는 것 말이죠

하지만 그걸로는 첫번째 문단만
고를 수 있었어요

우리는 다른 문단을 고를 때
그 id를 사용하면 안 돼요

왜냐하면 같은 id를 여러 태그에
사용하면 안 되니까요

만약 다른 문단들도 선택하고 싶다면

각각에게 새로운 ID를 줘야 할거에요

'song-lyrics2', 'song-lyrics3' 처럼요

왜냐하면 모든 ID는 유일해야 하니까요

그리고 우리는 각각에 대한 규칙을
추가해야 하겠죠

이렇게 할 수도 있지만
일이 너무 많아지잖아요!

노래에 새로운 절을 더할 때마다

HTML에 새로운 ID를 더해야 하는 걸
잊으면 안 될거에요

CSS규칙도 추가해야 하고요

만약에 몇 백개의 절을 추가한다면
정말 피곤한 일이 될 거에요

여기 좋은 소식이 있어요

더 나은 방법이 있죠
그걸 '클래스'라고 불러요

클래스는 기본적으로

특정 요소를 그룹에 배정시키는 방법이에요

그리고 그룹에는 얼마든지 많은
요소들을 넣을 수 있어요

클래스를 추가하려면 id에서 했던 것처럼
클래스 속성을 추가해야해요

이 id는 지울게요
다른 걸로 바꿀꺼니까요

이제 커서를 태그의 처음에 두고요

공백을 추가하고 쓰세요
'class = "'

이제 클래스 이름을 정해야죠

괜찮고 값을 잘 나타내는 걸로요

이렇게 부를게요
"song-lyrics"

여기 썼어요

이 클래스에는 어떤 요소들이 포함될까요?

모든 가사 문단들이죠

페이지 아래로 내려가서

각 문단 클래스에 속성을 추가해주세요

"song-lyrics"

좋아요. 이제 CSS규칙을
추가할 준비가 되었네요

태그로 돌아가서

전에 썼던 id에 대한 걸 지울게요

이걸 바꿀거니까요

그리고 클래스 선택자를 만들어요

클래스 선택자를 시작할 때는
마침표(.)를 사용해요

그리고 클래스 이름을 뒤에 적고요
.song-lyrics

항상 그랬듯이 중괄호, 속성,
콜론 그리고 값을 쓰세요

짜잔!

이제 모든 가사들은 노란색
배경을 가지게 되었네요

만약 여기 s를 대문자로
바꾸면 어떻게 될까요?

적용되지 않네요

왜냐하면 클래스 이름은
대소문자를 구별하기 때문이죠

소문자인지 대문자인지는 문제가 됩니다

마치 ID처럼 말이죠

만약에 마침표 대신
#를 쓰면 어떻게 될까요?

적용되지 않아요

왜냐하면 브라우저가 "song-lyrics"가
ID라고 생각하고

song-lyrics라는 id를 찾지 못하면

찾기를 포기해버려요

만약 클래스 이름에 공백문자가
들어가면 어떻게 될까요?

마찬가지로 적용되지 않아요

왜냐하면 클래스 이름엔 공백이
들어가면 안되기 때문이죠

나중에 알게 되겠지만

공백은 CSS세상에서 아주
특정한 것을 의미해요

이건 다시 원래대로 고칠게요

다시 한번 말하자면

클래스를 추가하고 싶다면

클래스 이름을 정하고

HTML의 클래스 속성에 그것을 추가해요

style규칙을 적는데

마침표로 시작하는 클래스 이름을 쓰세요

이제 CSS에 클래스를
적용할 수 있게 되었네요!