0:00:00.326,0:00:02.044
이 웹페이지를 봅시다

0:00:02.044,0:00:04.540
여기 위에 heading이 있고요

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

0:00:07.581,0:00:10.588
여긴 여러 개의 문단이 있네요

0:00:10.588,0:00:13.416
제가 좋아하는 토끼 노래의[br]가사가 들어있죠

0:00:13.543,0:00:17.554
저번 시간에 id를 이용해서 첫번째[br]문단에 스타일을 적용했어요

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

0:00:21.016,0:00:24.083
이 문단 모두를 노란[br]배경색으로 만들고 싶어요

0:00:24.613,0:00:27.692
지금까지 배운 것으로는[br]어떻게 할 수 있을까요?

0:00:28.221,0:00:30.374
처음 우리가 배운 것은

0:00:30.374,0:00:33.002
특정 타입의 모든 태그를[br]선택하는 거였죠

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

0:00:34.886,0:00:39.120
하지만 그렇게 하면 모든 문단을 칠하게 돼요[br]가사 문단 이외에도 말이죠

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

0:00:41.507,0:00:44.898
그래서 우린 id를 이용해[br]태그를 선택하는 것을 배웠어요

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

0:00:48.368,0:00:50.920
하지만 그걸로는 첫번째 문단만[br]고를 수 있었어요

0:00:51.120,0:00:53.725
우리는 다른 문단을 고를 때[br]그 id를 사용하면 안 돼요

0:00:53.725,0:00:57.657
왜냐하면 같은 id를 여러 태그에[br]사용하면 안 되니까요

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

0:01:00.202,0:01:02.881
각각에게 새로운 ID를 줘야 할거에요

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

0:01:05.717,0:01:07.358
왜냐하면 모든 ID는 유일해야 하니까요

0:01:07.358,0:01:09.808
그리고 우리는 각각에 대한 규칙을[br]추가해야 하겠죠

0:01:09.808,0:01:12.398
이렇게 할 수도 있지만[br]일이 너무 많아지잖아요!

0:01:12.398,0:01:14.691
노래에 새로운 절을 더할 때마다

0:01:14.691,0:01:17.279
HTML에 새로운 ID를 더해야 하는 걸[br]잊으면 안 될거에요

0:01:17.279,0:01:19.018
CSS규칙도 추가해야 하고요

0:01:19.018,0:01:22.830
만약에 몇 백개의 절을 추가한다면[br]정말 피곤한 일이 될 거에요

0:01:22.980,0:01:24.315
여기 좋은 소식이 있어요

0:01:24.492,0:01:27.383
더 나은 방법이 있죠[br]그걸 '클래스'라고 불러요

0:01:27.599,0:01:29.009
클래스는 기본적으로

0:01:29.009,0:01:32.067
특정 요소를 그룹에 배정시키는 방법이에요

0:01:32.162,0:01:35.150
그리고 그룹에는 얼마든지 많은[br]요소들을 넣을 수 있어요

0:01:35.352,0:01:39.928
클래스를 추가하려면 id에서 했던 것처럼[br]클래스 속성을 추가해야해요

0:01:40.362,0:01:44.705
이 id는 지울게요[br]다른 걸로 바꿀꺼니까요

0:01:44.705,0:01:47.915
이제 커서를 태그의 처음에 두고요

0:01:47.915,0:01:51.675
공백을 추가하고 쓰세요[br]'class = "'

0:01:53.183,0:01:55.333
이제 클래스 이름을 정해야죠

0:01:55.333,0:01:56.792
괜찮고 값을 잘 나타내는 걸로요

0:01:56.927,0:01:59.294
이렇게 부를게요[br]"song-lyrics"

0:01:59.658,0:02:01.449
여기 썼어요

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

0:02:04.416,0:02:06.420
모든 가사 문단들이죠

0:02:06.510,0:02:09.154
페이지 아래로 내려가서

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

0:02:13.061,0:02:14.540
"song-lyrics"

0:02:14.836,0:02:18.003
좋아요. 이제 CSS규칙을[br]추가할 준비가 되었네요

0:02:18.217,0:02:20.539
태그로 돌아가서

0:02:20.539,0:02:24.574
전에 썼던 id에 대한 걸 지울게요

0:02:24.574,0:02:25.772
이걸 바꿀거니까요

0:02:26.157,0:02:28.594
그리고 클래스 선택자를 만들어요

0:02:28.931,0:02:34.039
클래스 선택자를 시작할 때는[br]마침표(.)를 사용해요

0:02:34.426,0:02:39.027
그리고 클래스 이름을 뒤에 적고요[br].song-lyrics

0:02:39.027,0:02:46.415
항상 그랬듯이 중괄호, 속성,[br]콜론 그리고 값을 쓰세요

0:02:46.633,0:02:47.575
짜잔!

0:02:47.821,0:02:51.007
이제 모든 가사들은 노란색[br]배경을 가지게 되었네요

0:02:51.343,0:02:55.143
만약 여기 s를 대문자로[br]바꾸면 어떻게 될까요?

0:02:55.240,0:02:56.398
적용되지 않네요

0:02:56.491,0:02:58.950
왜냐하면 클래스 이름은[br]대소문자를 구별하기 때문이죠

0:02:58.966,0:03:01.771
소문자인지 대문자인지는 문제가 됩니다

0:03:01.771,0:03:03.558
마치 ID처럼 말이죠

0:03:04.323,0:03:08.295
만약에 마침표 대신[br]#를 쓰면 어떻게 될까요?

0:03:08.542,0:03:09.666
적용되지 않아요

0:03:09.774,0:03:13.085
왜냐하면 브라우저가 "song-lyrics"가[br]ID라고 생각하고

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

0:03:16.411,0:03:17.584
찾기를 포기해버려요

0:03:18.102,0:03:24.512
만약 클래스 이름에 공백문자가[br]들어가면 어떻게 될까요?

0:03:25.248,0:03:27.477
마찬가지로 적용되지 않아요

0:03:27.477,0:03:29.997
왜냐하면 클래스 이름엔 공백이[br]들어가면 안되기 때문이죠

0:03:30.192,0:03:31.649
나중에 알게 되겠지만

0:03:31.649,0:03:34.972
공백은 CSS세상에서 아주[br]특정한 것을 의미해요

0:03:35.868,0:03:38.776
이건 다시 원래대로 고칠게요

0:03:39.523,0:03:41.110
다시 한번 말하자면

0:03:41.110,0:03:43.387
클래스를 추가하고 싶다면

0:03:43.387,0:03:45.589
클래스 이름을 정하고

0:03:45.589,0:03:49.000
HTML의 클래스 속성에 그것을 추가해요

0:03:49.248,0:03:51.317
style규칙을 적는데

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

0:03:55.216,0:03:58.428
이제 CSS에 클래스를[br]적용할 수 있게 되었네요!