[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.33,0:00:02.04,Default,,0000,0000,0000,,이 웹페이지를 봅시다
Dialogue: 0,0:00:02.04,0:00:04.54,Default,,0000,0000,0000,,여기 위에 heading이 있고요
Dialogue: 0,0:00:04.54,0:00:07.58,Default,,0000,0000,0000,,토끼에 대한 글이 있는 문단이 있고요
Dialogue: 0,0:00:07.58,0:00:10.59,Default,,0000,0000,0000,,여긴 여러 개의 문단이 있네요
Dialogue: 0,0:00:10.59,0:00:13.42,Default,,0000,0000,0000,,제가 좋아하는 토끼 노래의\N가사가 들어있죠
Dialogue: 0,0:00:13.54,0:00:17.55,Default,,0000,0000,0000,,저번 시간에 id를 이용해서 첫번째\N문단에 스타일을 적용했어요
Dialogue: 0,0:00:17.86,0:00:21.02,Default,,0000,0000,0000,,하지만 이젠 여러 문단이 있으니까
Dialogue: 0,0:00:21.02,0:00:24.08,Default,,0000,0000,0000,,이 문단 모두를 노란\N배경색으로 만들고 싶어요
Dialogue: 0,0:00:24.61,0:00:27.69,Default,,0000,0000,0000,,지금까지 배운 것으로는\N어떻게 할 수 있을까요?
Dialogue: 0,0:00:28.22,0:00:30.37,Default,,0000,0000,0000,,처음 우리가 배운 것은
Dialogue: 0,0:00:30.37,0:00:33.00,Default,,0000,0000,0000,,특정 타입의 모든 태그를\N선택하는 거였죠
Dialogue: 0,0:00:33.00,0:00:34.66,Default,,0000,0000,0000,,'p'같은 태그를 가진 것들 말이에요
Dialogue: 0,0:00:34.89,0:00:39.12,Default,,0000,0000,0000,,하지만 그렇게 하면 모든 문단을 칠하게 돼요\N가사 문단 이외에도 말이죠
Dialogue: 0,0:00:39.23,0:00:41.29,Default,,0000,0000,0000,,우리는 뭔가 조금 더 구체적으로 기술하는 것이 필요해요
Dialogue: 0,0:00:41.51,0:00:44.90,Default,,0000,0000,0000,,그래서 우린 id를 이용해\N태그를 선택하는 것을 배웠어요
Dialogue: 0,0:00:44.90,0:00:48.14,Default,,0000,0000,0000,,'rabbit-song'같은 id를 가진\N문단을 고르는 것 말이죠
Dialogue: 0,0:00:48.37,0:00:50.92,Default,,0000,0000,0000,,하지만 그걸로는 첫번째 문단만\N고를 수 있었어요
Dialogue: 0,0:00:51.12,0:00:53.72,Default,,0000,0000,0000,,우리는 다른 문단을 고를 때\N그 id를 사용하면 안 돼요
Dialogue: 0,0:00:53.72,0:00:57.66,Default,,0000,0000,0000,,왜냐하면 같은 id를 여러 태그에\N사용하면 안 되니까요
Dialogue: 0,0:00:57.87,0:01:00.20,Default,,0000,0000,0000,,만약 다른 문단들도 선택하고 싶다면
Dialogue: 0,0:01:00.20,0:01:02.88,Default,,0000,0000,0000,,각각에게 새로운 ID를 줘야 할거에요
Dialogue: 0,0:01:02.88,0:01:05.72,Default,,0000,0000,0000,,'song-lyrics2', 'song-lyrics3' 처럼요
Dialogue: 0,0:01:05.72,0:01:07.36,Default,,0000,0000,0000,,왜냐하면 모든 ID는 유일해야 하니까요
Dialogue: 0,0:01:07.36,0:01:09.81,Default,,0000,0000,0000,,그리고 우리는 각각에 대한 규칙을\N추가해야 하겠죠
Dialogue: 0,0:01:09.81,0:01:12.40,Default,,0000,0000,0000,,이렇게 할 수도 있지만\N일이 너무 많아지잖아요!
Dialogue: 0,0:01:12.40,0:01:14.69,Default,,0000,0000,0000,,노래에 새로운 절을 더할 때마다
Dialogue: 0,0:01:14.69,0:01:17.28,Default,,0000,0000,0000,,HTML에 새로운 ID를 더해야 하는 걸\N잊으면 안 될거에요
Dialogue: 0,0:01:17.28,0:01:19.02,Default,,0000,0000,0000,,CSS규칙도 추가해야 하고요
Dialogue: 0,0:01:19.02,0:01:22.83,Default,,0000,0000,0000,,만약에 몇 백개의 절을 추가한다면\N정말 피곤한 일이 될 거에요
Dialogue: 0,0:01:22.98,0:01:24.32,Default,,0000,0000,0000,,여기 좋은 소식이 있어요
Dialogue: 0,0:01:24.49,0:01:27.38,Default,,0000,0000,0000,,더 나은 방법이 있죠\N그걸 '클래스'라고 불러요
Dialogue: 0,0:01:27.60,0:01:29.01,Default,,0000,0000,0000,,클래스는 기본적으로
Dialogue: 0,0:01:29.01,0:01:32.07,Default,,0000,0000,0000,,특정 요소를 그룹에 배정시키는 방법이에요
Dialogue: 0,0:01:32.16,0:01:35.15,Default,,0000,0000,0000,,그리고 그룹에는 얼마든지 많은\N요소들을 넣을 수 있어요
Dialogue: 0,0:01:35.35,0:01:39.93,Default,,0000,0000,0000,,클래스를 추가하려면 id에서 했던 것처럼\N클래스 속성을 추가해야해요
Dialogue: 0,0:01:40.36,0:01:44.70,Default,,0000,0000,0000,,이 id는 지울게요\N다른 걸로 바꿀꺼니까요
Dialogue: 0,0:01:44.70,0:01:47.92,Default,,0000,0000,0000,,이제 커서를 태그의 처음에 두고요
Dialogue: 0,0:01:47.92,0:01:51.68,Default,,0000,0000,0000,,공백을 추가하고 쓰세요\N'class = "'
Dialogue: 0,0:01:53.18,0:01:55.33,Default,,0000,0000,0000,,이제 클래스 이름을 정해야죠
Dialogue: 0,0:01:55.33,0:01:56.79,Default,,0000,0000,0000,,괜찮고 값을 잘 나타내는 걸로요
Dialogue: 0,0:01:56.93,0:01:59.29,Default,,0000,0000,0000,,이렇게 부를게요\N"song-lyrics"
Dialogue: 0,0:01:59.66,0:02:01.45,Default,,0000,0000,0000,,여기 썼어요
Dialogue: 0,0:02:01.66,0:02:04.34,Default,,0000,0000,0000,,이 클래스에는 어떤 요소들이 포함될까요?
Dialogue: 0,0:02:04.42,0:02:06.42,Default,,0000,0000,0000,,모든 가사 문단들이죠
Dialogue: 0,0:02:06.51,0:02:09.15,Default,,0000,0000,0000,,페이지 아래로 내려가서
Dialogue: 0,0:02:09.15,0:02:12.78,Default,,0000,0000,0000,,각 문단 클래스에 속성을 추가해주세요
Dialogue: 0,0:02:13.06,0:02:14.54,Default,,0000,0000,0000,,"song-lyrics"
Dialogue: 0,0:02:14.84,0:02:18.00,Default,,0000,0000,0000,,좋아요. 이제 CSS규칙을\N추가할 준비가 되었네요
Dialogue: 0,0:02:18.22,0:02:20.54,Default,,0000,0000,0000,,태그로 돌아가서
Dialogue: 0,0:02:20.54,0:02:24.57,Default,,0000,0000,0000,,전에 썼던 id에 대한 걸 지울게요
Dialogue: 0,0:02:24.57,0:02:25.77,Default,,0000,0000,0000,,이걸 바꿀거니까요
Dialogue: 0,0:02:26.16,0:02:28.59,Default,,0000,0000,0000,,그리고 클래스 선택자를 만들어요
Dialogue: 0,0:02:28.93,0:02:34.04,Default,,0000,0000,0000,,클래스 선택자를 시작할 때는\N마침표(.)를 사용해요
Dialogue: 0,0:02:34.43,0:02:39.03,Default,,0000,0000,0000,,그리고 클래스 이름을 뒤에 적고요\N.song-lyrics
Dialogue: 0,0:02:39.03,0:02:46.42,Default,,0000,0000,0000,,항상 그랬듯이 중괄호, 속성,\N콜론 그리고 값을 쓰세요
Dialogue: 0,0:02:46.63,0:02:47.58,Default,,0000,0000,0000,,짜잔!
Dialogue: 0,0:02:47.82,0:02:51.01,Default,,0000,0000,0000,,이제 모든 가사들은 노란색\N배경을 가지게 되었네요
Dialogue: 0,0:02:51.34,0:02:55.14,Default,,0000,0000,0000,,만약 여기 s를 대문자로\N바꾸면 어떻게 될까요?
Dialogue: 0,0:02:55.24,0:02:56.40,Default,,0000,0000,0000,,적용되지 않네요
Dialogue: 0,0:02:56.49,0:02:58.95,Default,,0000,0000,0000,,왜냐하면 클래스 이름은\N대소문자를 구별하기 때문이죠
Dialogue: 0,0:02:58.97,0:03:01.77,Default,,0000,0000,0000,,소문자인지 대문자인지는 문제가 됩니다
Dialogue: 0,0:03:01.77,0:03:03.56,Default,,0000,0000,0000,,마치 ID처럼 말이죠
Dialogue: 0,0:03:04.32,0:03:08.30,Default,,0000,0000,0000,,만약에 마침표 대신\N#를 쓰면 어떻게 될까요?
Dialogue: 0,0:03:08.54,0:03:09.67,Default,,0000,0000,0000,,적용되지 않아요
Dialogue: 0,0:03:09.77,0:03:13.08,Default,,0000,0000,0000,,왜냐하면 브라우저가 "song-lyrics"가\NID라고 생각하고
Dialogue: 0,0:03:13.08,0:03:16.41,Default,,0000,0000,0000,,song-lyrics라는 id를 찾지 못하면
Dialogue: 0,0:03:16.41,0:03:17.58,Default,,0000,0000,0000,,찾기를 포기해버려요
Dialogue: 0,0:03:18.10,0:03:24.51,Default,,0000,0000,0000,,만약 클래스 이름에 공백문자가\N들어가면 어떻게 될까요?
Dialogue: 0,0:03:25.25,0:03:27.48,Default,,0000,0000,0000,,마찬가지로 적용되지 않아요
Dialogue: 0,0:03:27.48,0:03:29.100,Default,,0000,0000,0000,,왜냐하면 클래스 이름엔 공백이\N들어가면 안되기 때문이죠
Dialogue: 0,0:03:30.19,0:03:31.65,Default,,0000,0000,0000,,나중에 알게 되겠지만
Dialogue: 0,0:03:31.65,0:03:34.97,Default,,0000,0000,0000,,공백은 CSS세상에서 아주\N특정한 것을 의미해요
Dialogue: 0,0:03:35.87,0:03:38.78,Default,,0000,0000,0000,,이건 다시 원래대로 고칠게요
Dialogue: 0,0:03:39.52,0:03:41.11,Default,,0000,0000,0000,,다시 한번 말하자면
Dialogue: 0,0:03:41.11,0:03:43.39,Default,,0000,0000,0000,,클래스를 추가하고 싶다면
Dialogue: 0,0:03:43.39,0:03:45.59,Default,,0000,0000,0000,,클래스 이름을 정하고
Dialogue: 0,0:03:45.59,0:03:49.00,Default,,0000,0000,0000,,HTML의 클래스 속성에 그것을 추가해요
Dialogue: 0,0:03:49.25,0:03:51.32,Default,,0000,0000,0000,,style규칙을 적는데
Dialogue: 0,0:03:51.32,0:03:54.69,Default,,0000,0000,0000,,마침표로 시작하는 클래스 이름을 쓰세요
Dialogue: 0,0:03:55.22,0:03:58.43,Default,,0000,0000,0000,,이제 CSS에 클래스를\N적용할 수 있게 되었네요!