WEBVTT

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

00:00:02.336 --> 00:00:04.600
태그와 문단에 스타일을
주기 위해서 말이죠

00:00:04.600 --> 00:00:08.920
모든 태그는 초록색이고
모든 문단은 보라색이죠

00:00:09.537 --> 00:00:13.460
만약에 첫번째 태그만
선택하고 싶다면요?

00:00:13.460 --> 00:00:16.462
또는 두번째 문단에만 
스타일을 주고 싶다면요?

00:00:16.716 --> 00:00:18.947
우리는 어떤 방법이 필요해요

00:00:18.947 --> 00:00:21.513
브라우저에게 우리가 선택한 요소를
알려줘야 하니까요

00:00:21.513 --> 00:00:24.931
지금처럼 모든 요소에게
스타일을 주지 않게 말이죠

00:00:25.333 --> 00:00:27.945
한 가지 방법은
'ID로 선택하기' 에요

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

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

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

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

00:00:38.455 --> 00:00:41.281
이렇게 하기 위한 첫번째 단계는
HTML페이지를 수정하는 거에요

00:00:41.281 --> 00:00:45.132
우리가 선택하고 싶은 태그에
ID 속성을 추가하는거죠

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

00:00:48.529 --> 00:00:50.896
ID 속성을 추가하려면
커서를 여기다 놓고

00:00:50.896 --> 00:00:53.155
''태그의 첫번째 부분에요

00:00:53.155 --> 00:00:58.357
'p' 바로 뒤에 공백을 추가하고
'id = "'를 쓰세요

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

00:01:02.812 --> 00:01:04.180
어떤 ID를 줘볼까요?

00:01:04.180 --> 00:01:06.452
값을 잘 나타내야하고 유일해야겠죠

00:01:06.508 --> 00:01:09.229
이 페이지에 중복된 ID가
있으면 절대 안 돼요

00:01:09.479 --> 00:01:15.080
이건 토끼 노래니까
ID를 'rabbits-song'이라고 할게요

00:01:15.422 --> 00:01:19.837
ID에는 공백이 있으면 안 돼요
이렇게 여러 단어가 있다면

00:01:19.837 --> 00:01:22.237
'-'나 '_'를 사용해야 해요

00:01:22.596 --> 00:01:24.717
전 '-'가 정말 좋아요

00:01:25.650 --> 00:01:28.941
이제 이 문단을 구별할 수 있게 되었어요

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

00:01:31.746 --> 00:01:35.479
두번째 단계를 위해 태그로
올라가 볼게요

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

00:01:39.478 --> 00:01:43.255
자 기억해봐요
CSS 규칙의 첫번째 부분은 선택자에요

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

00:01:46.098 --> 00:01:51.130
예전 규칙들을 보면 우린
''나 ''같은 선택자를 사용했네요

00:01:51.130 --> 00:01:54.031
이 페이지의 모든 ''나 ''를
선택하기 위해서요

00:01:54.554 --> 00:01:57.203
이제 특정한 ID를 가진 요소를 선택하는
선택자를 만들거에요

00:01:58.671 --> 00:02:00.862
#로 시작하는 선택자로 시작해야해요

00:02:01.293 --> 00:02:04.547
브라우저에게 #다음에 오는건 ID라고
말해주는 부분이죠

00:02:05.147 --> 00:02:08.798
이제 ID를 쓰면 돼요
'rabbits-song'

00:02:09.603 --> 00:02:11.882
다른 부분은 저번과 같아요

00:02:11.934 --> 00:02:13.722
중괄호를 열고 닫고요

00:02:13.722 --> 00:02:17.844
배경색 같은 속성을 추가하고

00:02:18.364 --> 00:02:20.574
그리고 짠!
되는군요!

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

00:02:23.934 --> 00:02:26.093
첫번째 문단은 바뀌지 않았고요

00:02:26.574 --> 00:02:30.764
첫번째 에 대해서도 해볼게요

00:02:31.133 --> 00:02:32.866
첫번째 단계 기억나세요?

00:02:33.515 --> 00:02:36.586
맞아요
HTML을 수정해야하죠

00:02:36.586 --> 00:02:38.145
이 'id'속성을 추가해야 하니까요

00:02:38.300 --> 00:02:40.693
여기 태그 시작부분에 커서를 두고

00:02:40.693 --> 00:02:43.520
공백을 넣고 'id ='를 쓰세요

00:02:43.580 --> 00:02:46.691
그리고 유일하고 값을
잘 표현하는 ID를 쓰세요

00:02:46.791 --> 00:02:49.944
"rabbits-info-heading'이라고 하죠

00:02:50.690 --> 00:02:54.043
좋아요. 두번째 단계.
다시 style부분으로 돌아가서

00:02:54.043 --> 00:02:57.429
새로운 줄을 추가하고
#를 쓰고요

00:02:57.429 --> 00:03:01.840
그리고 ID를 쓰고요
'rabbits-info-heading'

00:03:01.840 --> 00:03:04.947
여기 중괄호 안에 속성을 적어요

00:03:04.947 --> 00:03:08.625
{ background-color: purple; }

00:03:08.945 --> 00:03:13.260
앗, 적용되지 않았군요
뭐가 문제일까요?

00:03:13.420 --> 00:03:15.279
제가 철자를 제대로 적었나요?

00:03:15.359 --> 00:03:18.305
rabbits-info-Heading,
rabbits-info-heading...

00:03:18.485 --> 00:03:21.049
거의 같아 보이는거 같은데 말이죠

00:03:21.160 --> 00:03:23.374
한 자 한 자 비교해 볼 수도 있어요

00:03:23.374 --> 00:03:25.079
뭐가 문제인지 알기 위해서 말이에요

00:03:25.079 --> 00:03:29.633
그렇지만 저는 그냥
다시 HTML로 가서

00:03:29.679 --> 00:03:33.810
ID를 복사-붙여넣기 할 거에요
정확하게 하기 위해서요

00:03:33.887 --> 00:03:35.481
그리고.. 되는군요!

00:03:35.561 --> 00:03:39.825
이제 도 배경이 생겼어요
뭐가 문제였는지 알아챘어요?

00:03:40.085 --> 00:03:44.474
그렇죠. 바로 여기 h가 문제였어요
h를 H라고 쓰면

00:03:44.474 --> 00:03:47.003
브라우저는 다르다고 생각해요

00:03:47.103 --> 00:03:50.231
HTML과 같아지려면
소문자 h를 써야했네요

00:03:50.315 --> 00:03:52.850
왜냐하면 id는 대소문자를
구분하기 때문이에요

00:03:52.930 --> 00:03:57.143
그래서 어디든 사용할 때
같게 써야해요

00:03:57.513 --> 00:04:01.753
제 생각엔 ID를 쓸 때 항상 소문자로
쓰는게 최선인거 같아요

00:04:01.753 --> 00:04:04.645
그래서 언제 어떤 식으로 썼는지
생각할 필요가 없게요

00:04:05.158 --> 00:04:08.404
좋아요. 이제 마지막 당부할 것은요

00:04:08.404 --> 00:04:10.530
ID는 유일해야 한다는 거에요!

00:04:10.648 --> 00:04:13.444
만약 페이지에서 두 개의 태그가 같은
ID를 사용한다면

00:04:13.444 --> 00:04:17.835
브라우저는 두 개 모두 스타일을 줄 수도 있고
하나만 줄 수도 있어요

00:04:17.962 --> 00:04:20.341
그게 그렇게 되면 안 되겠죠

00:04:20.451 --> 00:04:23.096
괜찮고 유일하고
값을 잘 나타내는 ID를 쓰세요