1
00:00:00,809 --> 00:00:02,962
도넛과 당근을 살펴보죠

2
00:00:02,962 --> 00:00:05,432
당근은 건강에 좋은 음식이고

3
00:00:05,432 --> 00:00:07,901
토끼가 좋아하죠

4
00:00:07,901 --> 00:00:10,534
오랜지 색이 아닌 당근을 알고 있나요?

5
00:00:10,534 --> 00:00:13,535
원래 당근은 보라색이었어요
몇몇은 지금까지도 보라색이구요

6
00:00:13,535 --> 00:00:19,541
이 웹페이지엔 당근의 색상 목록과
보라색 당근의 기원에 대한 설명이 있어요

7
00:00:19,541 --> 00:00:25,267
클래스를 사용해서
색상 이름을 적절한 색으로 장식했어요

8
00:00:25,267 --> 00:00:31,905
목록에 적용된 스타일은 마음에 드네요
본문에 적용된 스타일은 마음에 들지 않네요

9
00:00:31,905 --> 00:00:36,215
지금의 배경 색상보다
좀 더 연한 색상으로 하면 좋겠어요

10
00:00:36,215 --> 00:00:40,778
어떻게 하면 웹브라우저가 
목록의 보라색과

11
00:00:40,778 --> 00:00:43,778
본문의 보라색을 구분하도록 할 수 할까요?

12
00:00:43,778 --> 00:00:45,880
동일한 클래스 이름을 사용하고 있네요

13
00:00:45,880 --> 00:00:49,300
때문에 다른 클래스를 선언하지 않는 한
이 클래스만 가지고는 구분할 수는 없어요

14
00:00:49,300 --> 00:00:52,919
동일한 strong 태그를 사용하고 있네요

15
00:00:52,919 --> 00:00:58,013
때문에 요소-클래스 선택자도 사용할 수 없네요

16
00:00:58,013 --> 00:01:00,663
이 둘을 구분하는 방법이 있을까요?

17
00:01:00,663 --> 00:01:06,376
하나는 이  안에 있고

18
00:01:06,376 --> 00:01:10,985
다른 하나는 이  안에 있네요

19
00:01:10,985 --> 00:01:12,583
즉, 부모 태그가 다르네요

20
00:01:12,583 --> 00:01:15,583
부모 태그는 위에 있는 태그를 의미합니다

21
00:01:15,583 --> 00:01:21,102
이걸 CSS 규칙을 만드는데 사용할 수 있어요
하위위 선택자를 사용하면 되요

22
00:01:21,102 --> 00:01:25,216
요소들을 문서의 계층적인 위치에 따라 
선택하는 방법입니다

23
00:01:25,216 --> 00:01:30,624
예를 들어 
단락 안의 만 선택하려면

24
00:01:30,624 --> 00:01:35,776
p 를 쓰고 한칸 띄우세요
한칸 띄우는게 진짜 중요합니다

25
00:01:35,776 --> 00:01:40,381
그리고 클래스 이름을 쓰는거죠
.purple

26
00:01:40,381 --> 00:01:46,112
그리고 속성들을 적어주면 되요
연한 색깔을 주고

27
00:01:46,112 --> 00:01:50,311
배경색상은 투명
나머지는 이전에 선언한 것을 상속받겠죠

28
00:01:50,311 --> 00:01:58,802
이 보라색 글자에 영향을 주면서
저 보라색 글자에는 영향을 미치지 않게 했어요

29
00:01:58,802 --> 00:02:02,879
단락 안에서 purple 클래스를 사용할 때마다

30
00:02:02,879 --> 00:02:05,324
이 스타일들이 적용될거에요

31
00:02:05,324 --> 00:02:09,588
문서 안에서 하위 요소를 선택 할 때 공백을 사용할 수 있어요

32
00:02:09,588 --> 00:02:15,728
 안의 에 스타일을 적용해봐요

33
00:02:15,728 --> 00:02:23,143
부모 태그인 li 를 쓰고, 공백을 쓰고, strong 을 씁니다

34
00:02:23,143 --> 00:02:28,066
줄 간격을 줘서 멀어지게 해볼게요

35
00:02:28,066 --> 00:02:34,073
li 앞에 ul 을 쓸 수 있는데요

36
00:02:34,073 --> 00:02:38,525
그러면  안의 에게는 적용되지 않겠죠

37
00:02:38,525 --> 00:02:43,807
하위 선택자를 사용하려면, 문서의 구조에 대해 깊이 생각해야 해요

38
00:02:43,807 --> 00:02:46,102
다른 태그들의 내부에 어떤 태그들이 있는지도 확인해야 되요

39
00:02:46,102 --> 00:02:49,512
들어쓰기를 잘 한다면, 손쉽게 할 수 있어요

40
00:02:49,512 --> 00:02:52,508
들여쓰기는 태그의 계층을 잘 반영하니까요

41
00:02:52,508 --> 00:02:56,955
 안의 는 들여쓰기가 되어 있네요

42
00:02:56,955 --> 00:02:59,341
그리고 그 안에 이 있네요

43
00:02:59,341 --> 00:03:02,926
들여쓰기가 잘 안되어 있다면, 지금 고치세요

44
00:03:02,926 --> 00:03:07,024
페이지의 구조를 더 쉽게 이해하고

45
00:03:07,024 --> 00:03:10,609
그 구조에 따라 CSS 선언자를 하용할 수 있게 말이에요

46
00:03:10,609 --> 00:03:13,598
선택자 사이에는 공백을 사용할 수 있어요

47
00:03:13,598 --> 00:03:19,021
특정 ID를 가진 요소 밑의 태그를 찾을 때

48
00:03:19,021 --> 00:03:22,463
또는 특정 클래스를 가진 요소 밑의 ID를 찾을 때

49
00:03:22,463 --> 00:03:25,333
어떤 선택자들의 조합을 사용하든지 간에 말이에요

50
00:03:25,333 --> 00:03:32,230
페이지의 구조가 바뀌면
기존의 CSS 규칙은 적용되지 않을 수도 있어요

51
00:03:32,230 --> 00:03:37,185
그러니 주의깊게 생각하고 사용해야겠죠
어떻게 하면 미래 지향적인 CSS를 만들지도 생각하세요

52
00:03:37,185 --> 00:03:41,300
문서 구조에 영향을 적게 받으려면
클래스를 사용하면 됩니다

53
00:03:41,300 --> 00:03:45,612
이 규칙들을 다시 한번 살펴보고 생각해봅시다

54
00:03:45,612 --> 00:03:51,383
첫째 규칙은, 단락 안의 
purple 클래스의 요소를 꾸며줍니다

55
00:03:51,383 --> 00:03:57,589
나중에 새로운 단락 안에 purple 클래스의 요소가 추가된다면
저 속성들이 적용될까요?

56
00:03:57,589 --> 00:04:02,371
네, 이 특징들은 단락 안에서 좋게 보일거에요

57
00:04:02,371 --> 00:04:04,401
더 특별한 규칙이 필요할까요?

58
00:04:04,401 --> 00:04:11,186
이러한 단락이
항상 article 클래스의 요소 밑에 있다면
이렇게 규칙을 추가할 수 있겠죠

59
00:04:11,186 --> 00:04:14,249
지금은 이게 가장 구체적인 규칙이에요

60
00:04:14,249 --> 00:04:21,178
두번째 규칙은 
list 아이템 안에 있는 에 특정한 줄간격을 주는거에요

61
00:04:21,178 --> 00:04:26,039
제가 밑의 모든 에 대해
줄간격을 늘리길 원하는 것 같나요?

62
00:04:26,039 --> 00:04:30,978
그러지는 않을 것 같습니다
이 규칙은 너무 일반적이에요

63
00:04:30,978 --> 00:04:36,778
이 클래스를 에 추가해볼게요

64
00:04:36,778 --> 00:04:42,032
그리고 이렇게 바꾸는 거죠 ul.spacey

65
00:04:42,032 --> 00:04:44,652
이제 더 구체적으로 됬네요

66
00:04:44,652 --> 00:04:49,840
나중에, 웹 페이지가 커지면, 이 규칙들을 
조금 더 / 조금 덜 구체적으로 만들거에요

67
00:04:49,840 --> 00:04:53,619
이 도구를 여러분의 CSS 툴박스에 두세요

68
00:04:53,619 --> 00:04:57,879
그리고 연습하네요. 이해가 될 때까지 말이죠