0:00:00.095,0:00:02.336
이 웹페이지는 CSS를 사용하고 있어요

0:00:02.336,0:00:04.600
태그와 문단에 스타일을[br]주기 위해서 말이죠

0:00:04.600,0:00:08.920
모든 태그는 초록색이고[br]모든 문단은 보라색이죠

0:00:09.537,0:00:13.460
만약에 첫번째 태그만[br]선택하고 싶다면요?

0:00:13.460,0:00:16.462
또는 두번째 문단에만 [br]스타일을 주고 싶다면요?

0:00:16.716,0:00:18.947
우리는 어떤 방법이 필요해요

0:00:18.947,0:00:21.513
브라우저에게 우리가 선택한 요소를[br]알려줘야 하니까요

0:00:21.513,0:00:24.931
지금처럼 모든 요소에게[br]스타일을 주지 않게 말이죠

0:00:25.333,0:00:27.945
한 가지 방법은[br]'ID로 선택하기' 에요

0:00:28.265,0:00:30.525
우리 페이지에 고유한 ID 태그를 줄 수 있어요

0:00:30.525,0:00:32.176
그리고 CSS에게 이렇게 얘기하죠

0:00:32.176,0:00:36.297
잘 들어, 난 이 ID를 가진 요소에게만[br]스타일을 주고 싶어

0:00:36.297,0:00:38.208
다른 요소들에게는 주지 말고

0:00:38.455,0:00:41.281
이렇게 하기 위한 첫번째 단계는[br]HTML페이지를 수정하는 거에요

0:00:41.281,0:00:45.132
우리가 선택하고 싶은 태그에[br]ID 속성을 추가하는거죠

0:00:45.741,0:00:48.371
여기 두번째 문단으로 시작해보죠

0:00:48.529,0:00:50.896
ID 속성을 추가하려면[br]커서를 여기다 놓고

0:00:50.896,0:00:53.155
''태그의 첫번째 부분에요

0:00:53.155,0:00:58.357
'p' 바로 뒤에 공백을 추가하고[br]'id = "'를 쓰세요

0:00:58.982,0:01:02.667
이제 이 ID속성에 값을 추가하면 돼요

0:01:02.812,0:01:04.180
어떤 ID를 줘볼까요?

0:01:04.180,0:01:06.452
값을 잘 나타내야하고 유일해야겠죠

0:01:06.508,0:01:09.229
이 페이지에 중복된 ID가[br]있으면 절대 안 돼요

0:01:09.479,0:01:15.080
이건 토끼 노래니까[br]ID를 'rabbits-song'이라고 할게요

0:01:15.422,0:01:19.837
ID에는 공백이 있으면 안 돼요[br]이렇게 여러 단어가 있다면

0:01:19.837,0:01:22.237
'-'나 '_'를 사용해야 해요

0:01:22.596,0:01:24.717
전 '-'가 정말 좋아요

0:01:25.650,0:01:28.941
이제 이 문단을 구별할 수 있게 되었어요

0:01:29.016,0:01:31.646
이걸 수정하는 CSS규칙을 추가할 수 있어요

0:01:31.746,0:01:35.479
두번째 단계를 위해 태그로[br]올라가 볼게요

0:01:35.598,0:01:38.428
마지막 규칙 다음에 새 줄을 추가할게요

0:01:39.478,0:01:43.255
자 기억해봐요[br]CSS 규칙의 첫번째 부분은 선택자에요

0:01:43.255,0:01:45.840
브라우저에게 뭘 선택할 지 알려주는 거죠

0:01:46.098,0:01:51.130
예전 규칙들을 보면 우린[br]''나 ''같은 선택자를 사용했네요

0:01:51.130,0:01:54.031
이 페이지의 모든 ''나 ''를[br]선택하기 위해서요

0:01:54.554,0:01:57.203
이제 특정한 ID를 가진 요소를 선택하는[br]선택자를 만들거에요

0:01:58.671,0:02:00.862
#로 시작하는 선택자로 시작해야해요

0:02:01.293,0:02:04.547
브라우저에게 #다음에 오는건 ID라고[br]말해주는 부분이죠

0:02:05.147,0:02:08.798
이제 ID를 쓰면 돼요[br]'rabbits-song'

0:02:09.603,0:02:11.882
다른 부분은 저번과 같아요

0:02:11.934,0:02:13.722
중괄호를 열고 닫고요

0:02:13.722,0:02:17.844
배경색 같은 속성을 추가하고

0:02:18.364,0:02:20.574
그리고 짠![br]되는군요!

0:02:20.873,0:02:23.934
이 노래 문단만 노란 배경을 가지게 되었어요

0:02:23.934,0:02:26.093
첫번째 문단은 바뀌지 않았고요

0:02:26.574,0:02:30.764
첫번째 에 대해서도 해볼게요

0:02:31.133,0:02:32.866
첫번째 단계 기억나세요?

0:02:33.515,0:02:36.586
맞아요[br]HTML을 수정해야하죠

0:02:36.586,0:02:38.145
이 'id'속성을 추가해야 하니까요

0:02:38.300,0:02:40.693
여기 태그 시작부분에 커서를 두고

0:02:40.693,0:02:43.520
공백을 넣고 'id ='를 쓰세요

0:02:43.580,0:02:46.691
그리고 유일하고 값을[br]잘 표현하는 ID를 쓰세요

0:02:46.791,0:02:49.944
"rabbits-info-heading'이라고 하죠

0:02:50.690,0:02:54.043
좋아요. 두번째 단계.[br]다시 style부분으로 돌아가서

0:02:54.043,0:02:57.429
새로운 줄을 추가하고[br]#를 쓰고요

0:02:57.429,0:03:01.840
그리고 ID를 쓰고요[br]'rabbits-info-heading'

0:03:01.840,0:03:04.947
여기 중괄호 안에 속성을 적어요

0:03:04.947,0:03:08.625
{ background-color: purple; }

0:03:08.945,0:03:13.260
앗, 적용되지 않았군요[br]뭐가 문제일까요?

0:03:13.420,0:03:15.279
제가 철자를 제대로 적었나요?

0:03:15.359,0:03:18.305
rabbits-info-Heading,[br]rabbits-info-heading...

0:03:18.485,0:03:21.049
거의 같아 보이는거 같은데 말이죠

0:03:21.160,0:03:23.374
한 자 한 자 비교해 볼 수도 있어요

0:03:23.374,0:03:25.079
뭐가 문제인지 알기 위해서 말이에요

0:03:25.079,0:03:29.633
그렇지만 저는 그냥[br]다시 HTML로 가서

0:03:29.679,0:03:33.810
ID를 복사-붙여넣기 할 거에요[br]정확하게 하기 위해서요

0:03:33.887,0:03:35.481
그리고.. 되는군요!

0:03:35.561,0:03:39.825
이제 도 배경이 생겼어요[br]뭐가 문제였는지 알아챘어요?

0:03:40.085,0:03:44.474
그렇죠. 바로 여기 h가 문제였어요[br]h를 H라고 쓰면

0:03:44.474,0:03:47.003
브라우저는 다르다고 생각해요

0:03:47.103,0:03:50.231
HTML과 같아지려면[br]소문자 h를 써야했네요

0:03:50.315,0:03:52.850
왜냐하면 id는 대소문자를[br]구분하기 때문이에요

0:03:52.930,0:03:57.143
그래서 어디든 사용할 때[br]같게 써야해요

0:03:57.513,0:04:01.753
제 생각엔 ID를 쓸 때 항상 소문자로[br]쓰는게 최선인거 같아요

0:04:01.753,0:04:04.645
그래서 언제 어떤 식으로 썼는지[br]생각할 필요가 없게요

0:04:05.158,0:04:08.404
좋아요. 이제 마지막 당부할 것은요

0:04:08.404,0:04:10.530
ID는 유일해야 한다는 거에요!

0:04:10.648,0:04:13.444
만약 페이지에서 두 개의 태그가 같은[br]ID를 사용한다면

0:04:13.444,0:04:17.835
브라우저는 두 개 모두 스타일을 줄 수도 있고[br]하나만 줄 수도 있어요

0:04:17.962,0:04:20.341
그게 그렇게 되면 안 되겠죠

0:04:20.451,0:04:23.096
괜찮고 유일하고[br]값을 잘 나타내는 ID를 쓰세요