1
00:00:00,702 --> 00:00:05,963
저번 시간까지 자바스크립트로 
스타일 지정하는 방법을 알려드렸습니다

2
00:00:05,963 --> 00:00:10,202
만약 자바스크립트로 여러 스타일을 지정하고 싶다면

3
00:00:10,202 --> 00:00:14,671
CSS 속성값을 설정하기 위해 
코딩만 100줄을 해야 할지도 모릅니다

4
00:00:14,671 --> 00:00:18,076
그렇게 된다면 자바스크립트가 
정말 엉망진창이 될지도 모르죠

5
00:00:18,076 --> 00:00:20,666
이 경우 또 다른 방식으로 접근할 수 있습니다

6
00:00:20,666 --> 00:00:23,213
CSS 클래스를 생성하고

7
00:00:23,213 --> 00:00:28,275
그 클래스에 원하는 스타일을 입히기 위해 
CSS 규칙을 추가하는 겁니다

8
00:00:28,275 --> 00:00:33,116
그 이후 자바스크립트에 클래스 명을 넣으면 되는데요

9
00:00:33,116 --> 00:00:38,932
여기에 '' 태그를 넣고 시작해보도록 합시다

10
00:00:38,932 --> 00:00:45,798
'.catclass' 클래스를 만들고 
여기에 CSS 규칙을 추가해볼게요

11
00:00:45,798 --> 00:00:53,085
그 다음 'color:orange',와 '
background-color: black'을 설정해보죠

12
00:00:53,085 --> 00:00:58,854
이를 'heading'요소로 넣자면 
이렇게로도 볼 수 있죠

13
00:00:58,854 --> 00:01:05,813
'headingEl.className = "catcolors"; 로요

14
00:01:05,813 --> 00:01:09,485
이러면 자바스크립의 색배정과 배경색을
삭제할 수 있습니다

15
00:01:09,485 --> 00:01:12,222


16
00:01:12,222 --> 00:01:13,322
짜잔!

17
00:01:13,322 --> 00:01:15,113
됐죠?

18
00:01:15,113 --> 00:01:17,466
근데, 조금 이상한 게 보이시나요?

19
00:01:17,466 --> 00:01:21,249
클래스 명을 위한 HTML 속성은 그냥 'class'이네요

20
00:01:21,249 --> 00:01:26,779
이것을 HTML로 하려고 했다면 
'class="catcolors"에 그쳤겠죠

21
00:01:26,779 --> 00:01:31,589
자바스크립트로 하려고 하니 '.className',
으로 써야 했어요

22
00:01:31,589 --> 00:01:33,806
이는 흔히 인숙한 방법은 아니죠

23
00:01:33,806 --> 00:01:39,084
그것은 'class' 자체가 자바스크립트어의
키워드로 기능하기 때문입니다

24
00:01:39,084 --> 00:01:42,613
이미 그 자체로 의미가 있는 거죠

25
00:01:42,613 --> 00:01:47,534
그렇기 때문에 브라우저는 'className'을
HTML 클래스 속성을 지시하기 위해

26
00:01:47,534 --> 00:01:52,205
'className'을 사용합니다
그래야 헷갈리지 않으니까요

27
00:01:52,205 --> 00:01:56,613
그러니까 기억해두셔야 합니다
어떤 요소의 클래스 속성을 설정하고 싶다면

28
00:01:56,613 --> 00:02:00,333
.className = 를 적으면 됩니다

29
00:02:00,333 --> 00:02:04,383
이제 각 동물 이름에 배정하기 위해서

30
00:02:04,383 --> 00:02:06,657
이를 루프 안에 넣을 수 있습니다.
바로 이렇게요

31
00:02:06,657 --> 00:02:13,449
'nameEls[i].className = "catColors";'

32
00:02:13,449 --> 00:02:19,427
이렇게 하면 클래스 명을 추가하는 게 되지만


33
00:02:19,427 --> 00:02:23,704
실은 이전에 있었던 모든 클래스를 삭제하는 게 됩니다
= 를 썼기 때문이죠

34
00:02:23,704 --> 00:02:28,236
따라서 이전에 다른 클래스가 있었다면,
클래스들은 다 삭제되고 없습니다

35
00:02:28,236 --> 00:02:32,053
이제 클래스는 동물과 같죠

36
00:02:32,053 --> 00:02:34,340
그리하여 catColors가 되었네요

37
00:02:34,340 --> 00:02:41,305
따라서 진짜 원했던 건 이 클래스 속성에
새 클래스 명을 추가하는 것이었죠

38
00:02:41,305 --> 00:02:47,562
이는 += catColors.로 
적는 것과 같습니다

39
00:02:47,562 --> 00:02:48,828
그렇습니다

40
00:02:48,828 --> 00:02:52,044
이렇게 하는 것이 안전합니다

41
00:02:52,044 --> 00:02:58,048
이전 클래스가 무엇이었든지 간에
띄어쓴 다음 새로운 클래스를 추가할 수 있기 때문입니다

42
00:02:58,048 --> 00:03:02,209
새로운 브라우저를 활용한 또 다른 방법이 있는데요

43
00:03:02,209 --> 00:03:04,975
'classList' 속성을 활용하는 겁니다

44
00:03:04,975 --> 00:03:15,035
'nameEls[i].classList.add("catcolors")'
을 쓰면 되는 거죠

45
00:03:15,035 --> 00:03:19,649
이건 훨씬 낫지만
모든 경우에 활용할 수는 없습니다

46
00:03:19,649 --> 00:03:24,014
이를 활용하고 싶다면 
caniuse.com에 접속한 뒤

47
00:03:24,014 --> 00:03:26,532
작업하고 있는 사이트가 
모든 브라우저에 호환되는지

48
00:03:26,532 --> 00:03:28,756
확인해야 합니다

49
00:03:28,756 --> 00:03:32,189
훨씬 나아보이기는 하지만,
홈페이지가 깨진다면 그닥 좋진 않겠지요

50
00:03:32,189 --> 00:03:36,254
브라우저가 이를 인식하지 못하는 기능을 
활용하는 것처럼 나타날 수도 있거든요

51
00:03:36,254 --> 00:03:38,143
혹시나 해서 드리는 말씀입니다

52
00:03:38,143 --> 00:03:41,337
왜냐하면 저라면 되도록이면 많은 브라우저에서
제대로 나오길 바랄테니까요

53
00:03:41,337 --> 00:03:46,067
여전히 각각의 스타일을 바꾸기 위해서는
클래스 명을 지시하는 것보다


54
00:03:46,067 --> 00:03:48,558
우리가 해야 하는 것들이 많습니다

55
00:03:48,558 --> 00:03:54,463
다시 한번 드리는 말씀이지만,
이런 도구가 있다는 걸 알려드리고 싶네요

56
00:03:54,463 --> 00:03:59,083
상황에 따라 적절하게 활용하셨으면 좋겠습니다