1
00:00:00,095 --> 00:00:02,336
이 웹페이지는 CSS를 사용하고 있어요

2
00:00:02,336 --> 00:00:04,600
태그와 문단에 스타일을
주기 위해서 말이죠

3
00:00:04,600 --> 00:00:08,920
모든 태그는 초록색이고
모든 문단은 보라색이죠

4
00:00:09,537 --> 00:00:13,460
만약에 첫번째 태그만
선택하고 싶다면요?

5
00:00:13,460 --> 00:00:16,462
또는 두번째 문단에만 
스타일을 주고 싶다면요?

6
00:00:16,716 --> 00:00:18,947
우리는 어떤 방법이 필요해요

7
00:00:18,947 --> 00:00:21,513
브라우저에게 우리가 선택한 요소를
알려줘야 하니까요

8
00:00:21,513 --> 00:00:24,931
지금처럼 모든 요소에게
스타일을 주지 않게 말이죠

9
00:00:25,333 --> 00:00:27,945
한 가지 방법은
'ID로 선택하기' 에요

10
00:00:28,265 --> 00:00:30,525
우리 페이지에 고유한 ID 태그를 줄 수 있어요

11
00:00:30,525 --> 00:00:32,176
그리고 CSS에게 이렇게 얘기하죠

12
00:00:32,176 --> 00:00:36,297
잘 들어, 난 이 ID를 가진 요소에게만
스타일을 주고 싶어

13
00:00:36,297 --> 00:00:38,208
다른 요소들에게는 주지 말고

14
00:00:38,455 --> 00:00:41,281
이렇게 하기 위한 첫번째 단계는
HTML페이지를 수정하는 거에요

15
00:00:41,281 --> 00:00:45,132
우리가 선택하고 싶은 태그에
ID 속성을 추가하는거죠

16
00:00:45,741 --> 00:00:48,371
여기 두번째 문단으로 시작해보죠

17
00:00:48,529 --> 00:00:50,896
ID 속성을 추가하려면
커서를 여기다 놓고

18
00:00:50,896 --> 00:00:53,155
''태그의 첫번째 부분에요

19
00:00:53,155 --> 00:00:58,357
'p' 바로 뒤에 공백을 추가하고
'id = "'를 쓰세요

20
00:00:58,982 --> 00:01:02,667
이제 이 ID속성에 값을 추가하면 돼요

21
00:01:02,812 --> 00:01:04,180
어떤 ID를 줘볼까요?

22
00:01:04,180 --> 00:01:06,452
값을 잘 나타내야하고 유일해야겠죠

23
00:01:06,508 --> 00:01:09,229
이 페이지에 중복된 ID가
있으면 절대 안 돼요

24
00:01:09,479 --> 00:01:15,080
이건 토끼 노래니까
ID를 'rabbits-song'이라고 할게요

25
00:01:15,422 --> 00:01:19,837
ID에는 공백이 있으면 안 돼요
이렇게 여러 단어가 있다면

26
00:01:19,837 --> 00:01:22,237
'-'나 '_'를 사용해야 해요

27
00:01:22,596 --> 00:01:24,717
전 '-'가 정말 좋아요

28
00:01:25,650 --> 00:01:28,941
이제 이 문단을 구별할 수 있게 되었어요

29
00:01:29,016 --> 00:01:31,646
이걸 수정하는 CSS규칙을 추가할 수 있어요

30
00:01:31,746 --> 00:01:35,479
두번째 단계를 위해 태그로
올라가 볼게요

31
00:01:35,598 --> 00:01:38,428
마지막 규칙 다음에 새 줄을 추가할게요

32
00:01:39,478 --> 00:01:43,255
자 기억해봐요
CSS 규칙의 첫번째 부분은 선택자에요

33
00:01:43,255 --> 00:01:45,840
브라우저에게 뭘 선택할 지 알려주는 거죠

34
00:01:46,098 --> 00:01:51,130
예전 규칙들을 보면 우린
''나 ''같은 선택자를 사용했네요

35
00:01:51,130 --> 00:01:54,031
이 페이지의 모든 ''나 ''를
선택하기 위해서요

36
00:01:54,554 --> 00:01:57,203
이제 특정한 ID를 가진 요소를 선택하는
선택자를 만들거에요

37
00:01:58,671 --> 00:02:00,862
#로 시작하는 선택자로 시작해야해요

38
00:02:01,293 --> 00:02:04,547
브라우저에게 #다음에 오는건 ID라고
말해주는 부분이죠

39
00:02:05,147 --> 00:02:08,798
이제 ID를 쓰면 돼요
'rabbits-song'

40
00:02:09,603 --> 00:02:11,882
다른 부분은 저번과 같아요

41
00:02:11,934 --> 00:02:13,722
중괄호를 열고 닫고요

42
00:02:13,722 --> 00:02:17,844
배경색 같은 속성을 추가하고

43
00:02:18,364 --> 00:02:20,574
그리고 짠!
되는군요!

44
00:02:20,873 --> 00:02:23,934
이 노래 문단만 노란 배경을 가지게 되었어요

45
00:02:23,934 --> 00:02:26,093
첫번째 문단은 바뀌지 않았고요

46
00:02:26,574 --> 00:02:30,764
첫번째 에 대해서도 해볼게요

47
00:02:31,133 --> 00:02:32,866
첫번째 단계 기억나세요?

48
00:02:33,515 --> 00:02:36,586
맞아요
HTML을 수정해야하죠

49
00:02:36,586 --> 00:02:38,145
이 'id'속성을 추가해야 하니까요

50
00:02:38,300 --> 00:02:40,693
여기 태그 시작부분에 커서를 두고

51
00:02:40,693 --> 00:02:43,520
공백을 넣고 'id ='를 쓰세요

52
00:02:43,580 --> 00:02:46,691
그리고 유일하고 값을
잘 표현하는 ID를 쓰세요

53
00:02:46,791 --> 00:02:49,944
"rabbits-info-heading'이라고 하죠

54
00:02:50,690 --> 00:02:54,043
좋아요. 두번째 단계.
다시 style부분으로 돌아가서

55
00:02:54,043 --> 00:02:57,429
새로운 줄을 추가하고
#를 쓰고요

56
00:02:57,429 --> 00:03:01,840
그리고 ID를 쓰고요
'rabbits-info-heading'

57
00:03:01,840 --> 00:03:04,947
여기 중괄호 안에 속성을 적어요

58
00:03:04,947 --> 00:03:08,625
{ background-color: purple; }

59
00:03:08,945 --> 00:03:13,260
앗, 적용되지 않았군요
뭐가 문제일까요?

60
00:03:13,420 --> 00:03:15,279
제가 철자를 제대로 적었나요?

61
00:03:15,359 --> 00:03:18,305
rabbits-info-Heading,
rabbits-info-heading...

62
00:03:18,485 --> 00:03:21,049
거의 같아 보이는거 같은데 말이죠

63
00:03:21,160 --> 00:03:23,374
한 자 한 자 비교해 볼 수도 있어요

64
00:03:23,374 --> 00:03:25,079
뭐가 문제인지 알기 위해서 말이에요

65
00:03:25,079 --> 00:03:29,633
그렇지만 저는 그냥
다시 HTML로 가서

66
00:03:29,679 --> 00:03:33,810
ID를 복사-붙여넣기 할 거에요
정확하게 하기 위해서요

67
00:03:33,887 --> 00:03:35,481
그리고.. 되는군요!

68
00:03:35,561 --> 00:03:39,825
이제 도 배경이 생겼어요
뭐가 문제였는지 알아챘어요?

69
00:03:40,085 --> 00:03:44,474
그렇죠. 바로 여기 h가 문제였어요
h를 H라고 쓰면

70
00:03:44,474 --> 00:03:47,003
브라우저는 다르다고 생각해요

71
00:03:47,103 --> 00:03:50,231
HTML과 같아지려면
소문자 h를 써야했네요

72
00:03:50,315 --> 00:03:52,850
왜냐하면 id는 대소문자를
구분하기 때문이에요

73
00:03:52,930 --> 00:03:57,143
그래서 어디든 사용할 때
같게 써야해요

74
00:03:57,513 --> 00:04:01,753
제 생각엔 ID를 쓸 때 항상 소문자로
쓰는게 최선인거 같아요

75
00:04:01,753 --> 00:04:04,645
그래서 언제 어떤 식으로 썼는지
생각할 필요가 없게요

76
00:04:05,158 --> 00:04:08,404
좋아요. 이제 마지막 당부할 것은요

77
00:04:08,404 --> 00:04:10,530
ID는 유일해야 한다는 거에요!

78
00:04:10,648 --> 00:04:13,444
만약 페이지에서 두 개의 태그가 같은
ID를 사용한다면

79
00:04:13,444 --> 00:04:17,835
브라우저는 두 개 모두 스타일을 줄 수도 있고
하나만 줄 수도 있어요

80
00:04:17,962 --> 00:04:20,341
그게 그렇게 되면 안 되겠죠

81
00:04:20,451 --> 00:04:23,096
괜찮고 유일하고
값을 잘 나타내는 ID를 쓰세요