0:00:00.702,0:00:05.963
저번 시간까지 자바스크립트로 [br]스타일 지정하는 방법을 알려드렸습니다

0:00:05.963,0:00:10.202
만약 자바스크립트로 여러 스타일을 지정하고 싶다면

0:00:10.202,0:00:14.671
CSS 속성값을 설정하기 위해 [br]코딩만 100줄을 해야 할지도 모릅니다

0:00:14.671,0:00:18.076
그렇게 된다면 자바스크립트가 [br]정말 엉망진창이 될지도 모르죠

0:00:18.076,0:00:20.666
이 경우 또 다른 방식으로 접근할 수 있습니다

0:00:20.666,0:00:23.213
CSS 클래스를 생성하고

0:00:23.213,0:00:28.275
그 클래스에 원하는 스타일을 입히기 위해 [br]CSS 규칙을 추가하는 겁니다

0:00:28.275,0:00:33.116
그 이후 자바스크립트에 클래스 명을 넣으면 되는데요

0:00:33.116,0:00:38.932
여기에 '' 태그를 넣고 시작해보도록 합시다

0:00:38.932,0:00:45.798
'.catclass' 클래스를 만들고 [br]여기에 CSS 규칙을 추가해볼게요

0:00:45.798,0:00:53.085
그 다음 'color:orange',와 '[br]background-color: black'을 설정해보죠

0:00:53.085,0:00:58.854
이를 'heading'요소로 넣자면 [br]이렇게로도 볼 수 있죠

0:00:58.854,0:01:05.813
'headingEl.className = "catcolors"; 로요

0:01:05.813,0:01:09.485
이러면 자바스크립의 색배정과 배경색을[br]삭제할 수 있습니다

0:01:09.485,0:01:12.222


0:01:12.222,0:01:13.322
짜잔!

0:01:13.322,0:01:15.113
됐죠?

0:01:15.113,0:01:17.466
근데, 조금 이상한 게 보이시나요?

0:01:17.466,0:01:21.249
클래스 명을 위한 HTML 속성은 그냥 'class'이네요

0:01:21.249,0:01:26.779
이것을 HTML로 하려고 했다면 [br]'class="catcolors"에 그쳤겠죠

0:01:26.779,0:01:31.589
자바스크립트로 하려고 하니 '.className',[br]으로 써야 했어요

0:01:31.589,0:01:33.806
이는 흔히 인숙한 방법은 아니죠

0:01:33.806,0:01:39.084
그것은 'class' 자체가 자바스크립트어의[br]키워드로 기능하기 때문입니다

0:01:39.084,0:01:42.613
이미 그 자체로 의미가 있는 거죠

0:01:42.613,0:01:47.534
그렇기 때문에 브라우저는 'className'을[br]HTML 클래스 속성을 지시하기 위해

0:01:47.534,0:01:52.205
'className'을 사용합니다[br]그래야 헷갈리지 않으니까요

0:01:52.205,0:01:56.613
그러니까 기억해두셔야 합니다[br]어떤 요소의 클래스 속성을 설정하고 싶다면

0:01:56.613,0:02:00.333
.className = 를 적으면 됩니다

0:02:00.333,0:02:04.383
이제 각 동물 이름에 배정하기 위해서

0:02:04.383,0:02:06.657
이를 루프 안에 넣을 수 있습니다.[br]바로 이렇게요

0:02:06.657,0:02:13.449
'nameEls[i].className = "catColors";'

0:02:13.449,0:02:19.427
이렇게 하면 클래스 명을 추가하는 게 되지만[br]

0:02:19.427,0:02:23.704
실은 이전에 있었던 모든 클래스를 삭제하는 게 됩니다[br]= 를 썼기 때문이죠

0:02:23.704,0:02:28.236
따라서 이전에 다른 클래스가 있었다면,[br]클래스들은 다 삭제되고 없습니다

0:02:28.236,0:02:32.053
이제 클래스는 동물과 같죠

0:02:32.053,0:02:34.340
그리하여 catColors가 되었네요

0:02:34.340,0:02:41.305
따라서 진짜 원했던 건 이 클래스 속성에[br]새 클래스 명을 추가하는 것이었죠

0:02:41.305,0:02:47.562
이는 += catColors.로 [br]적는 것과 같습니다

0:02:47.562,0:02:48.828
그렇습니다

0:02:48.828,0:02:52.044
이렇게 하는 것이 안전합니다

0:02:52.044,0:02:58.048
이전 클래스가 무엇이었든지 간에[br]띄어쓴 다음 새로운 클래스를 추가할 수 있기 때문입니다

0:02:58.048,0:03:02.209
새로운 브라우저를 활용한 또 다른 방법이 있는데요

0:03:02.209,0:03:04.975
'classList' 속성을 활용하는 겁니다

0:03:04.975,0:03:15.035
'nameEls[i].classList.add("catcolors")'[br]을 쓰면 되는 거죠

0:03:15.035,0:03:19.649
이건 훨씬 낫지만[br]모든 경우에 활용할 수는 없습니다

0:03:19.649,0:03:24.014
이를 활용하고 싶다면 [br]caniuse.com에 접속한 뒤

0:03:24.014,0:03:26.532
작업하고 있는 사이트가 [br]모든 브라우저에 호환되는지

0:03:26.532,0:03:28.756
확인해야 합니다

0:03:28.756,0:03:32.189
훨씬 나아보이기는 하지만,[br]홈페이지가 깨진다면 그닥 좋진 않겠지요

0:03:32.189,0:03:36.254
브라우저가 이를 인식하지 못하는 기능을 [br]활용하는 것처럼 나타날 수도 있거든요

0:03:36.254,0:03:38.143
혹시나 해서 드리는 말씀입니다

0:03:38.143,0:03:41.337
왜냐하면 저라면 되도록이면 많은 브라우저에서[br]제대로 나오길 바랄테니까요

0:03:41.337,0:03:46.067
여전히 각각의 스타일을 바꾸기 위해서는[br]클래스 명을 지시하는 것보다[br]

0:03:46.067,0:03:48.558
우리가 해야 하는 것들이 많습니다

0:03:48.558,0:03:54.463
다시 한번 드리는 말씀이지만,[br]이런 도구가 있다는 걸 알려드리고 싶네요

0:03:54.463,0:03:59.083
상황에 따라 적절하게 활용하셨으면 좋겠습니다