[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.10,0:00:02.34,Default,,0000,0000,0000,,이 웹페이지는 CSS를 사용하고 있어요
Dialogue: 0,0:00:02.34,0:00:04.60,Default,,0000,0000,0000,,태그와 문단에 스타일을\N주기 위해서 말이죠
Dialogue: 0,0:00:04.60,0:00:08.92,Default,,0000,0000,0000,,모든 태그는 초록색이고\N모든 문단은 보라색이죠
Dialogue: 0,0:00:09.54,0:00:13.46,Default,,0000,0000,0000,,만약에 첫번째 태그만\N선택하고 싶다면요?
Dialogue: 0,0:00:13.46,0:00:16.46,Default,,0000,0000,0000,,또는 두번째 문단에만 \N스타일을 주고 싶다면요?
Dialogue: 0,0:00:16.72,0:00:18.95,Default,,0000,0000,0000,,우리는 어떤 방법이 필요해요
Dialogue: 0,0:00:18.95,0:00:21.51,Default,,0000,0000,0000,,브라우저에게 우리가 선택한 요소를\N알려줘야 하니까요
Dialogue: 0,0:00:21.51,0:00:24.93,Default,,0000,0000,0000,,지금처럼 모든 요소에게\N스타일을 주지 않게 말이죠
Dialogue: 0,0:00:25.33,0:00:27.94,Default,,0000,0000,0000,,한 가지 방법은\N'ID로 선택하기' 에요
Dialogue: 0,0:00:28.26,0:00:30.52,Default,,0000,0000,0000,,우리 페이지에 고유한 ID 태그를 줄 수 있어요
Dialogue: 0,0:00:30.52,0:00:32.18,Default,,0000,0000,0000,,그리고 CSS에게 이렇게 얘기하죠
Dialogue: 0,0:00:32.18,0:00:36.30,Default,,0000,0000,0000,,잘 들어, 난 이 ID를 가진 요소에게만\N스타일을 주고 싶어
Dialogue: 0,0:00:36.30,0:00:38.21,Default,,0000,0000,0000,,다른 요소들에게는 주지 말고
Dialogue: 0,0:00:38.46,0:00:41.28,Default,,0000,0000,0000,,이렇게 하기 위한 첫번째 단계는\NHTML페이지를 수정하는 거에요
Dialogue: 0,0:00:41.28,0:00:45.13,Default,,0000,0000,0000,,우리가 선택하고 싶은 태그에\NID 속성을 추가하는거죠
Dialogue: 0,0:00:45.74,0:00:48.37,Default,,0000,0000,0000,,여기 두번째 문단으로 시작해보죠
Dialogue: 0,0:00:48.53,0:00:50.90,Default,,0000,0000,0000,,ID 속성을 추가하려면\N커서를 여기다 놓고
Dialogue: 0,0:00:50.90,0:00:53.16,Default,,0000,0000,0000,,''태그의 첫번째 부분에요
Dialogue: 0,0:00:53.16,0:00:58.36,Default,,0000,0000,0000,,'p' 바로 뒤에 공백을 추가하고\N'id = "'를 쓰세요
Dialogue: 0,0:00:58.98,0:01:02.67,Default,,0000,0000,0000,,이제 이 ID속성에 값을 추가하면 돼요
Dialogue: 0,0:01:02.81,0:01:04.18,Default,,0000,0000,0000,,어떤 ID를 줘볼까요?
Dialogue: 0,0:01:04.18,0:01:06.45,Default,,0000,0000,0000,,값을 잘 나타내야하고 유일해야겠죠
Dialogue: 0,0:01:06.51,0:01:09.23,Default,,0000,0000,0000,,이 페이지에 중복된 ID가\N있으면 절대 안 돼요
Dialogue: 0,0:01:09.48,0:01:15.08,Default,,0000,0000,0000,,이건 토끼 노래니까\NID를 'rabbits-song'이라고 할게요
Dialogue: 0,0:01:15.42,0:01:19.84,Default,,0000,0000,0000,,ID에는 공백이 있으면 안 돼요\N이렇게 여러 단어가 있다면
Dialogue: 0,0:01:19.84,0:01:22.24,Default,,0000,0000,0000,,'-'나 '_'를 사용해야 해요
Dialogue: 0,0:01:22.60,0:01:24.72,Default,,0000,0000,0000,,전 '-'가 정말 좋아요
Dialogue: 0,0:01:25.65,0:01:28.94,Default,,0000,0000,0000,,이제 이 문단을 구별할 수 있게 되었어요
Dialogue: 0,0:01:29.02,0:01:31.65,Default,,0000,0000,0000,,이걸 수정하는 CSS규칙을 추가할 수 있어요
Dialogue: 0,0:01:31.75,0:01:35.48,Default,,0000,0000,0000,,두번째 단계를 위해 태그로\N올라가 볼게요
Dialogue: 0,0:01:35.60,0:01:38.43,Default,,0000,0000,0000,,마지막 규칙 다음에 새 줄을 추가할게요
Dialogue: 0,0:01:39.48,0:01:43.26,Default,,0000,0000,0000,,자 기억해봐요\NCSS 규칙의 첫번째 부분은 선택자에요
Dialogue: 0,0:01:43.26,0:01:45.84,Default,,0000,0000,0000,,브라우저에게 뭘 선택할 지 알려주는 거죠
Dialogue: 0,0:01:46.10,0:01:51.13,Default,,0000,0000,0000,,예전 규칙들을 보면 우린\N''나 ''같은 선택자를 사용했네요
Dialogue: 0,0:01:51.13,0:01:54.03,Default,,0000,0000,0000,,이 페이지의 모든 ''나 ''를\N선택하기 위해서요
Dialogue: 0,0:01:54.55,0:01:57.20,Default,,0000,0000,0000,,이제 특정한 ID를 가진 요소를 선택하는\N선택자를 만들거에요
Dialogue: 0,0:01:58.67,0:02:00.86,Default,,0000,0000,0000,,#로 시작하는 선택자로 시작해야해요
Dialogue: 0,0:02:01.29,0:02:04.55,Default,,0000,0000,0000,,브라우저에게 #다음에 오는건 ID라고\N말해주는 부분이죠
Dialogue: 0,0:02:05.15,0:02:08.80,Default,,0000,0000,0000,,이제 ID를 쓰면 돼요\N'rabbits-song'
Dialogue: 0,0:02:09.60,0:02:11.88,Default,,0000,0000,0000,,다른 부분은 저번과 같아요
Dialogue: 0,0:02:11.93,0:02:13.72,Default,,0000,0000,0000,,중괄호를 열고 닫고요
Dialogue: 0,0:02:13.72,0:02:17.84,Default,,0000,0000,0000,,배경색 같은 속성을 추가하고
Dialogue: 0,0:02:18.36,0:02:20.57,Default,,0000,0000,0000,,그리고 짠!\N되는군요!
Dialogue: 0,0:02:20.87,0:02:23.93,Default,,0000,0000,0000,,이 노래 문단만 노란 배경을 가지게 되었어요
Dialogue: 0,0:02:23.93,0:02:26.09,Default,,0000,0000,0000,,첫번째 문단은 바뀌지 않았고요
Dialogue: 0,0:02:26.57,0:02:30.76,Default,,0000,0000,0000,,첫번째 에 대해서도 해볼게요
Dialogue: 0,0:02:31.13,0:02:32.87,Default,,0000,0000,0000,,첫번째 단계 기억나세요?
Dialogue: 0,0:02:33.52,0:02:36.59,Default,,0000,0000,0000,,맞아요\NHTML을 수정해야하죠
Dialogue: 0,0:02:36.59,0:02:38.14,Default,,0000,0000,0000,,이 'id'속성을 추가해야 하니까요
Dialogue: 0,0:02:38.30,0:02:40.69,Default,,0000,0000,0000,,여기 태그 시작부분에 커서를 두고
Dialogue: 0,0:02:40.69,0:02:43.52,Default,,0000,0000,0000,,공백을 넣고 'id ='를 쓰세요
Dialogue: 0,0:02:43.58,0:02:46.69,Default,,0000,0000,0000,,그리고 유일하고 값을\N잘 표현하는 ID를 쓰세요
Dialogue: 0,0:02:46.79,0:02:49.94,Default,,0000,0000,0000,,"rabbits-info-heading'이라고 하죠
Dialogue: 0,0:02:50.69,0:02:54.04,Default,,0000,0000,0000,,좋아요. 두번째 단계.\N다시 style부분으로 돌아가서
Dialogue: 0,0:02:54.04,0:02:57.43,Default,,0000,0000,0000,,새로운 줄을 추가하고\N#를 쓰고요
Dialogue: 0,0:02:57.43,0:03:01.84,Default,,0000,0000,0000,,그리고 ID를 쓰고요\N'rabbits-info-heading'
Dialogue: 0,0:03:01.84,0:03:04.95,Default,,0000,0000,0000,,여기 중괄호 안에 속성을 적어요
Dialogue: 0,0:03:04.95,0:03:08.62,Default,,0000,0000,0000,,{ background-color: purple; }
Dialogue: 0,0:03:08.94,0:03:13.26,Default,,0000,0000,0000,,앗, 적용되지 않았군요\N뭐가 문제일까요?
Dialogue: 0,0:03:13.42,0:03:15.28,Default,,0000,0000,0000,,제가 철자를 제대로 적었나요?
Dialogue: 0,0:03:15.36,0:03:18.30,Default,,0000,0000,0000,,rabbits-info-Heading,\Nrabbits-info-heading...
Dialogue: 0,0:03:18.48,0:03:21.05,Default,,0000,0000,0000,,거의 같아 보이는거 같은데 말이죠
Dialogue: 0,0:03:21.16,0:03:23.37,Default,,0000,0000,0000,,한 자 한 자 비교해 볼 수도 있어요
Dialogue: 0,0:03:23.37,0:03:25.08,Default,,0000,0000,0000,,뭐가 문제인지 알기 위해서 말이에요
Dialogue: 0,0:03:25.08,0:03:29.63,Default,,0000,0000,0000,,그렇지만 저는 그냥\N다시 HTML로 가서
Dialogue: 0,0:03:29.68,0:03:33.81,Default,,0000,0000,0000,,ID를 복사-붙여넣기 할 거에요\N정확하게 하기 위해서요
Dialogue: 0,0:03:33.89,0:03:35.48,Default,,0000,0000,0000,,그리고.. 되는군요!
Dialogue: 0,0:03:35.56,0:03:39.82,Default,,0000,0000,0000,,이제 도 배경이 생겼어요\N뭐가 문제였는지 알아챘어요?
Dialogue: 0,0:03:40.08,0:03:44.47,Default,,0000,0000,0000,,그렇죠. 바로 여기 h가 문제였어요\Nh를 H라고 쓰면
Dialogue: 0,0:03:44.47,0:03:47.00,Default,,0000,0000,0000,,브라우저는 다르다고 생각해요
Dialogue: 0,0:03:47.10,0:03:50.23,Default,,0000,0000,0000,,HTML과 같아지려면\N소문자 h를 써야했네요
Dialogue: 0,0:03:50.32,0:03:52.85,Default,,0000,0000,0000,,왜냐하면 id는 대소문자를\N구분하기 때문이에요
Dialogue: 0,0:03:52.93,0:03:57.14,Default,,0000,0000,0000,,그래서 어디든 사용할 때\N같게 써야해요
Dialogue: 0,0:03:57.51,0:04:01.75,Default,,0000,0000,0000,,제 생각엔 ID를 쓸 때 항상 소문자로\N쓰는게 최선인거 같아요
Dialogue: 0,0:04:01.75,0:04:04.64,Default,,0000,0000,0000,,그래서 언제 어떤 식으로 썼는지\N생각할 필요가 없게요
Dialogue: 0,0:04:05.16,0:04:08.40,Default,,0000,0000,0000,,좋아요. 이제 마지막 당부할 것은요
Dialogue: 0,0:04:08.40,0:04:10.53,Default,,0000,0000,0000,,ID는 유일해야 한다는 거에요!
Dialogue: 0,0:04:10.65,0:04:13.44,Default,,0000,0000,0000,,만약 페이지에서 두 개의 태그가 같은\NID를 사용한다면
Dialogue: 0,0:04:13.44,0:04:17.84,Default,,0000,0000,0000,,브라우저는 두 개 모두 스타일을 줄 수도 있고\N하나만 줄 수도 있어요
Dialogue: 0,0:04:17.96,0:04:20.34,Default,,0000,0000,0000,,그게 그렇게 되면 안 되겠죠
Dialogue: 0,0:04:20.45,0:04:23.10,Default,,0000,0000,0000,,괜찮고 유일하고\N값을 잘 나타내는 ID를 쓰세요