1
00:00:00,531 --> 00:00:04,192
우리는 CSS 안에 있는 selector를 사용한 순간부터
많은 것들을 지금까지 관리해 왔습니다

2
00:00:04,192 --> 00:00:08,006
여러 원소들을 태그 이름, 아이디, 클래스 이름으로 선택했죠

3
00:00:08,290 --> 00:00:11,028
이제, 이 웹페이지에서 두번째 복습을 시작해 봅시다

4
00:00:11,257 --> 00:00:13,655
이 웹사이트는 전부 도넛에 관한 것입니다

5
00:00:13,789 --> 00:00:15,963
또한, 제목과, 절들이 있고...

6
00:00:15,963 --> 00:00:18,944
어떤 절들은 짧은 하나의 농담같은 사실에 대한 것입니다.

7
00:00:19,242 --> 00:00:23,142
CSS는 페이지 안에 있는 '' 태그를 
전부 선택한다는 규칙으로 출발합니다

8
00:00:23,142 --> 00:00:25,611
그 다음, sans-serif 글씨체로 변경합니다

9
00:00:26,074 --> 00:00:30,063
저는 이것을 고정 너비로 바꾸어 
여러분이 선택한 모든 것을 볼 수 있게 할 것입니다

10
00:00:30,785 --> 00:00:31,808
보이나요?

11
00:00:34,102 --> 00:00:37,836
다음 규칙은, '도넛-헤더'라는 아이디를 가진 어떤 원소든 선택하는 것입니다

12
00:00:38,034 --> 00:00:41,913
그리고, 이들은 해시 기호로 시작하기 때문에
우리는 아이디를 선택하는 것을 알 수 있습니다

13
00:00:42,029 --> 00:00:43,759
아이디가 매우 서술적일지라도,

14
00:00:43,759 --> 00:00:46,688
저에게는 처음에 큰 주제를 가지고 있고,

15
00:00:46,688 --> 00:00:47,747
글씨체를 바꾸는 것처럼 느껴집니다

16
00:00:47,974 --> 00:00:51,417
하지만, 저는 아래로 스크롤한 후 ''이 
아이디를 가지는 것을 보여주겠습니다

17
00:00:51,453 --> 00:00:53,184
네, 여기 있네요

18
00:00:53,387 --> 00:00:56,790
마지막 규칙은 'fact'라는 클래스 이름을 가지는
모든 원소를 선택하는 것입니다

19
00:00:56,896 --> 00:01:00,384
그리고 그것들은 점으로 시작하기 때문에,
우리는 그들이 클래스 이름을 찾는다는 것을 알 수 있습니다

20
00:01:00,488 --> 00:01:02,956
그 클래스 이름을 가지는 모든 원소를 찾기 위해,

21
00:01:02,956 --> 00:01:05,230
저는 이 규칙이 작동하는지 살펴볼 수 밖에 없습니다--

22
00:01:05,230 --> 00:01:07,833
처음과 중간 부분과 어떤 충전재를 추가하면서--

23
00:01:07,833 --> 00:01:10,462
또는 클래스 이름을 위해 HTML을 볼 수 있습니다

24
00:01:10,619 --> 00:01:13,148
저는 클래스 이름이 이 절 위에 있는것을 볼 수 있고

25
00:01:13,148 --> 00:01:14,300
그리고 이 절에는 -

26
00:01:14,300 --> 00:01:16,461
두 절이 짧은 농담같은 사실과 있는 것을 볼 수 있습니다 -

27
00:01:16,461 --> 00:01:18,315
이것이 그들이 지역을 가지고 있는 이유입니다

28
00:01:18,448 --> 00:01:19,778
클래스 이름은 대단합니다

29
00:01:19,778 --> 00:01:23,007
왜냐하면, 그것들이 여러 개의 원소들을 뛰어넘어
같은 형태를 쓸 수 있도록 만들기 때문입니다

30
00:01:23,033 --> 00:01:25,346
하지만, 우리가 클래스 이름으로도 할 수 없는 것이 있고,

31
00:01:25,346 --> 00:01:27,058
그것이 제가 지금부터 보여드릴 내용입니다

32
00:01:27,230 --> 00:01:29,136
도넛에 관한 웹페이지가 있다고 합시다

33
00:01:29,136 --> 00:01:31,361
하지만 도넛은 당신의 몸에 그렇게 좋지는 않죠

34
00:01:31,436 --> 00:01:34,007
그것은 아마 당신에게 가장 건강하지 않은 것들 중 하나일 것입니다

35
00:01:34,030 --> 00:01:36,963
그리고, 설탕 때문에 중독을 일으키기도 하죠

36
00:01:37,009 --> 00:01:39,644
그래서 우리는 도넛에 대해 이야기할 페이지를 만드려고 합니다

37
00:01:39,644 --> 00:01:42,421
아마 우리는 사람들에게 도넛의 건강하지 않은 면에 대해
사람들에게 경고할 수 있을 것입니다

38
00:01:42,539 --> 00:01:47,257
우리가 이 주제를 빨간색으로 색칠해,
얼마나 위험한지 잘 전달된다면 어떨까요?

39
00:01:47,626 --> 00:01:49,015
어떻게 이를 실천할 수 있을까요?

40
00:01:49,200 --> 00:01:53,401
음, 우선 'fact' CSS 규칙에 'color' 속성을
추가해 볼 수도 있겠죠

41
00:01:53,401 --> 00:01:55,099
그 다음에 어떻게 작동하는지 지켜봅시다

42
00:01:55,650 --> 00:02:00,326
하지만, 이것은 사실들을 빨간색으로 만들지만,
두 번째사실은 경고가 아닙니다

43
00:02:00,326 --> 00:02:01,847
단순히 사실일 뿐이죠

44
00:02:02,051 --> 00:02:03,845
그래서 우리는 이것이 빨간색으로 변하지 않기를 바랍니다

45
00:02:04,169 --> 00:02:05,578
여기서 우리는 아이디를 추가할 수 있습니다

46
00:02:05,578 --> 00:02:09,573
하지만 그렇다면 색칠해
나중에 경고문으로 바꾸거나,

47
00:02:09,573 --> 00:02:10,958
경고문을 추가할 때

48
00:02:10,958 --> 00:02:14,185
아이디를 계속 추가해야만 합니다
그 아이디들에 대한 규칙도 함께요

49
00:02:14,391 --> 00:02:19,806
이와 같은 상황에서는, '' 태그에
새로운 클래스를 만드는 게 가장 바람직합니다

50
00:02:20,104 --> 00:02:24,151
브라우저는 우리가 하나의 태그에,
여러개의 클래스를 사용하는 것을 지원합니다

51
00:02:24,541 --> 00:02:28,532
이것을 하기 위해서는, 단순히 커서를
마지막 클래스 이름에 옮긴 후,

52
00:02:28,532 --> 00:02:33,196
한 칸 띄우고, '경고'같은 새로운 클래스 이름을 씁니다

53
00:02:33,984 --> 00:02:36,329
이제 우리는 경고에 관한 규칙을 만들 수 있고,

54
00:02:37,119 --> 00:02:40,243
색 속성을 규칙에 적용해주기만 하면 됩니다

55
00:02:40,835 --> 00:02:44,001
이제 처음 주제는 빨간색이지만,
두번째는 그렇지 않네요

56
00:02:44,218 --> 00:02:45,411
아름답습니다

57
00:02:45,852 --> 00:02:49,285
우리는 지금까지 해왔던 것처럼,
클래스 이름은 많은 원소에 넣을 수 있습니다

58
00:02:49,643 --> 00:02:54,121
아마 우리는 이 들어간 "deep fried"라는
글자의 색을 바꾸고 싶을 지도 모릅니다

59
00:02:54,121 --> 00:02:56,986
우리는 이것도 빨간색으로 바꾸고 싶은데요,
왜냐하면 바싹 튀긴 음식은

60
00:02:56,986 --> 00:02:59,872
몸에 해로운 쪽에 대부분 속해 있기 때문입니다

61
00:03:00,025 --> 00:03:03,692
그래서 우리는
'class ="warning"'을 추가합니다

62
00:03:03,692 --> 00:03:04,626
물론 빨간색도 마찬가지입니다

63
00:03:05,035 --> 00:03:10,820
이제 여기에 있던 강조문이
빨간색으로 변한 것을 볼 수 있습니다

64
00:03:10,820 --> 00:03:14,653
또한 이것은 아직까지도 'border: top'과
'border: bottom'을 가지고 있습니다

65
00:03:14,795 --> 00:03:17,545
이것은 우리가 여러개의 클래스를 사용할 때 생기는 일입니다

66
00:03:17,545 --> 00:03:20,578
브라우저는 아마 이 모든 규칙들이 
이것들에게도 적용되는지 확인할 것입니다

67
00:03:20,578 --> 00:03:22,340
비슷한 형태의 모든 것에도 적용하겠죠

68
00:03:22,733 --> 00:03:26,810
우리는 색깔만으로 의미를 전달하려고 해서는 안됩니다

69
00:03:26,810 --> 00:03:28,563
색맹인 사람들도 있기 때문이죠

70
00:03:28,636 --> 00:03:31,298
아마도, 색깔의 차이를 잘 구별하지 못하는 사람들이 있을 것입니다

71
00:03:31,298 --> 00:03:33,815
빨간색과 검은색 사이에서 말입니다
아마 당신도 그들중 하나 일 수도 있죠

72
00:03:33,899 --> 00:03:37,463
그래서 우리의 클래스를 바꾸어
모두에게 좀 더 알아보기 쉽게 만들어 봅시다

73
00:03:38,070 --> 00:03:40,711
우리는 이 색을 배경 색으로 만들 것입니다

74
00:03:40,711 --> 00:03:44,740
왜냐하면 모든 사람들은 배경 색이 있는지 알 수 있기 때문이죠

75
00:03:45,104 --> 00:03:47,564
빨간색과 검은색에는 상당히 적은 색의 대조가 있습니다

76
00:03:47,564 --> 00:03:51,304
그리고 색의 대조는 우리의 페이지를 사람들이 잘 읽는데 중요하죠

77
00:03:51,400 --> 00:03:54,080
그래서 우리는 색을 흰 색으로 바꾸어 봅시다

78
00:03:54,785 --> 00:03:56,811
네, 이제 우리는 높은 대조를 볼 수 있습니다

79
00:03:56,811 --> 00:03:59,611
빨간 배경은 빨간색을 잘 볼 수 있는 사람을 위한 것이죠

80
00:03:59,994 --> 00:04:04,497
그리고 우리가 클래스를 사용한 순간부터,
우리의 경고 문구들은 비슷한 형태를 가집니다

81
00:04:04,774 --> 00:04:07,787
이제, CSS class들의 높은 융통성 때문에

82
00:04:07,787 --> 00:04:10,735
우리는 세상을 도넛으로부터 구할 수 있게 되었습니다
다했다