WEBVTT

00:00:00.326 --> 00:00:02.044
이 웹페이지를 봅시다

00:00:02.044 --> 00:00:04.540
여기 위에 heading이 있고요

00:00:04.540 --> 00:00:07.581
토끼에 대한 글이 있는 문단이 있고요

00:00:07.581 --> 00:00:10.588
여긴 여러 개의 문단이 있네요

00:00:10.588 --> 00:00:13.416
제가 좋아하는 토끼 노래의
가사가 들어있죠

00:00:13.543 --> 00:00:17.554
저번 시간에 id를 이용해서 첫번째
문단에 스타일을 적용했어요

00:00:17.857 --> 00:00:21.016
하지만 이젠 여러 문단이 있으니까

00:00:21.016 --> 00:00:24.083
이 문단 모두를 노란
배경색으로 만들고 싶어요

00:00:24.613 --> 00:00:27.692
지금까지 배운 것으로는
어떻게 할 수 있을까요?

00:00:28.221 --> 00:00:30.374
처음 우리가 배운 것은

00:00:30.374 --> 00:00:33.002
특정 타입의 모든 태그를
선택하는 거였죠

00:00:33.002 --> 00:00:34.659
'p'같은 태그를 가진 것들 말이에요

00:00:34.886 --> 00:00:39.120
하지만 그렇게 하면 모든 문단을 칠하게 돼요
가사 문단 이외에도 말이죠

00:00:39.226 --> 00:00:41.290
우리는 뭔가 조금 더 구체적으로 기술하는 것이 필요해요

00:00:41.507 --> 00:00:44.898
그래서 우린 id를 이용해
태그를 선택하는 것을 배웠어요

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

00:00:48.368 --> 00:00:50.920
하지만 그걸로는 첫번째 문단만
고를 수 있었어요

00:00:51.120 --> 00:00:53.725
우리는 다른 문단을 고를 때
그 id를 사용하면 안 돼요

00:00:53.725 --> 00:00:57.657
왜냐하면 같은 id를 여러 태그에
사용하면 안 되니까요

00:00:57.867 --> 00:01:00.202
만약 다른 문단들도 선택하고 싶다면

00:01:00.202 --> 00:01:02.881
각각에게 새로운 ID를 줘야 할거에요

00:01:02.881 --> 00:01:05.717
'song-lyrics2', 'song-lyrics3' 처럼요

00:01:05.717 --> 00:01:07.358
왜냐하면 모든 ID는 유일해야 하니까요

00:01:07.358 --> 00:01:09.808
그리고 우리는 각각에 대한 규칙을
추가해야 하겠죠

00:01:09.808 --> 00:01:12.398
이렇게 할 수도 있지만
일이 너무 많아지잖아요!

00:01:12.398 --> 00:01:14.691
노래에 새로운 절을 더할 때마다

00:01:14.691 --> 00:01:17.279
HTML에 새로운 ID를 더해야 하는 걸
잊으면 안 될거에요

00:01:17.279 --> 00:01:19.018
CSS규칙도 추가해야 하고요

00:01:19.018 --> 00:01:22.830
만약에 몇 백개의 절을 추가한다면
정말 피곤한 일이 될 거에요

00:01:22.980 --> 00:01:24.315
여기 좋은 소식이 있어요

00:01:24.492 --> 00:01:27.383
더 나은 방법이 있죠
그걸 '클래스'라고 불러요

00:01:27.599 --> 00:01:29.009
클래스는 기본적으로

00:01:29.009 --> 00:01:32.067
특정 요소를 그룹에 배정시키는 방법이에요

00:01:32.162 --> 00:01:35.150
그리고 그룹에는 얼마든지 많은
요소들을 넣을 수 있어요

00:01:35.352 --> 00:01:39.928
클래스를 추가하려면 id에서 했던 것처럼
클래스 속성을 추가해야해요

00:01:40.362 --> 00:01:44.705
이 id는 지울게요
다른 걸로 바꿀꺼니까요

00:01:44.705 --> 00:01:47.915
이제 커서를 태그의 처음에 두고요

00:01:47.915 --> 00:01:51.675
공백을 추가하고 쓰세요
'class = "'

00:01:53.183 --> 00:01:55.333
이제 클래스 이름을 정해야죠

00:01:55.333 --> 00:01:56.792
괜찮고 값을 잘 나타내는 걸로요

00:01:56.927 --> 00:01:59.294
이렇게 부를게요
"song-lyrics"

00:01:59.658 --> 00:02:01.449
여기 썼어요

00:02:01.665 --> 00:02:04.335
이 클래스에는 어떤 요소들이 포함될까요?

00:02:04.416 --> 00:02:06.420
모든 가사 문단들이죠

00:02:06.510 --> 00:02:09.154
페이지 아래로 내려가서

00:02:09.154 --> 00:02:12.777
각 문단 클래스에 속성을 추가해주세요

00:02:13.061 --> 00:02:14.540
"song-lyrics"

00:02:14.836 --> 00:02:18.003
좋아요. 이제 CSS규칙을
추가할 준비가 되었네요

00:02:18.217 --> 00:02:20.539
태그로 돌아가서

00:02:20.539 --> 00:02:24.574
전에 썼던 id에 대한 걸 지울게요

00:02:24.574 --> 00:02:25.772
이걸 바꿀거니까요

00:02:26.157 --> 00:02:28.594
그리고 클래스 선택자를 만들어요

00:02:28.931 --> 00:02:34.039
클래스 선택자를 시작할 때는
마침표(.)를 사용해요

00:02:34.426 --> 00:02:39.027
그리고 클래스 이름을 뒤에 적고요
.song-lyrics

00:02:39.027 --> 00:02:46.415
항상 그랬듯이 중괄호, 속성,
콜론 그리고 값을 쓰세요

00:02:46.633 --> 00:02:47.575
짜잔!

00:02:47.821 --> 00:02:51.007
이제 모든 가사들은 노란색
배경을 가지게 되었네요

00:02:51.343 --> 00:02:55.143
만약 여기 s를 대문자로
바꾸면 어떻게 될까요?

00:02:55.240 --> 00:02:56.398
적용되지 않네요

00:02:56.491 --> 00:02:58.950
왜냐하면 클래스 이름은
대소문자를 구별하기 때문이죠

00:02:58.966 --> 00:03:01.771
소문자인지 대문자인지는 문제가 됩니다

00:03:01.771 --> 00:03:03.558
마치 ID처럼 말이죠

00:03:04.323 --> 00:03:08.295
만약에 마침표 대신
#를 쓰면 어떻게 될까요?

00:03:08.542 --> 00:03:09.666
적용되지 않아요

00:03:09.774 --> 00:03:13.085
왜냐하면 브라우저가 "song-lyrics"가
ID라고 생각하고

00:03:13.085 --> 00:03:16.411
song-lyrics라는 id를 찾지 못하면

00:03:16.411 --> 00:03:17.584
찾기를 포기해버려요

00:03:18.102 --> 00:03:24.512
만약 클래스 이름에 공백문자가
들어가면 어떻게 될까요?

00:03:25.248 --> 00:03:27.477
마찬가지로 적용되지 않아요

00:03:27.477 --> 00:03:29.997
왜냐하면 클래스 이름엔 공백이
들어가면 안되기 때문이죠

00:03:30.192 --> 00:03:31.649
나중에 알게 되겠지만

00:03:31.649 --> 00:03:34.972
공백은 CSS세상에서 아주
특정한 것을 의미해요

00:03:35.868 --> 00:03:38.776
이건 다시 원래대로 고칠게요

00:03:39.523 --> 00:03:41.110
다시 한번 말하자면

00:03:41.110 --> 00:03:43.387
클래스를 추가하고 싶다면

00:03:43.387 --> 00:03:45.589
클래스 이름을 정하고

00:03:45.589 --> 00:03:49.000
HTML의 클래스 속성에 그것을 추가해요

00:03:49.248 --> 00:03:51.317
style규칙을 적는데

00:03:51.317 --> 00:03:54.691
마침표로 시작하는 클래스 이름을 쓰세요

00:03:55.216 --> 00:03:58.428
이제 CSS에 클래스를
적용할 수 있게 되었네요!