WEBVTT

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

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

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

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

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

00:00:20.666 --> 00:00:23.213
CSS 클래스를 생성하고

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

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

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

00:00:38.932 --> 00:00:45.798
'.catclass' 클래스를 만들고 
여기에 CSS 규칙을 추가해볼게요

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

00:00:53.085 --> 00:00:58.854
이를 'heading'요소로 넣자면 
이렇게로도 볼 수 있죠

00:00:58.854 --> 00:01:05.813
'headingEl.className = "catcolors"; 로요

00:01:05.813 --> 00:01:09.485
이러면 자바스크립의 색배정과 배경색을
삭제할 수 있습니다

00:01:09.485 --> 00:01:12.222


00:01:12.222 --> 00:01:13.322
짜잔!

00:01:13.322 --> 00:01:15.113
됐죠?

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

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

00:01:21.249 --> 00:01:26.779
이것을 HTML로 하려고 했다면 
'class="catcolors"에 그쳤겠죠

00:01:26.779 --> 00:01:31.589
자바스크립트로 하려고 하니 '.className',
으로 써야 했어요

00:01:31.589 --> 00:01:33.806
이는 흔히 인숙한 방법은 아니죠

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

00:01:39.084 --> 00:01:42.613
이미 그 자체로 의미가 있는 거죠

00:01:42.613 --> 00:01:47.534
그렇기 때문에 브라우저는 'className'을
HTML 클래스 속성을 지시하기 위해

00:01:47.534 --> 00:01:52.205
'className'을 사용합니다
그래야 헷갈리지 않으니까요

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

00:01:56.613 --> 00:02:00.333
.className = 를 적으면 됩니다

00:02:00.333 --> 00:02:04.383
이제 각 동물 이름에 배정하기 위해서

00:02:04.383 --> 00:02:06.657
이를 루프 안에 넣을 수 있습니다.
바로 이렇게요

00:02:06.657 --> 00:02:13.449
'nameEls[i].className = "catColors";'

00:02:13.449 --> 00:02:19.427
이렇게 하면 클래스 명을 추가하는 게 되지만


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

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

00:02:28.236 --> 00:02:32.053
이제 클래스는 동물과 같죠

00:02:32.053 --> 00:02:34.340
그리하여 catColors가 되었네요

00:02:34.340 --> 00:02:41.305
따라서 진짜 원했던 건 이 클래스 속성에
새 클래스 명을 추가하는 것이었죠

00:02:41.305 --> 00:02:47.562
이는 += catColors.로 
적는 것과 같습니다

00:02:47.562 --> 00:02:48.828
그렇습니다

00:02:48.828 --> 00:02:52.044
이렇게 하는 것이 안전합니다

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

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

00:03:02.209 --> 00:03:04.975
'classList' 속성을 활용하는 겁니다

00:03:04.975 --> 00:03:15.035
'nameEls[i].classList.add("catcolors")'
을 쓰면 되는 거죠

00:03:15.035 --> 00:03:19.649
이건 훨씬 낫지만
모든 경우에 활용할 수는 없습니다

00:03:19.649 --> 00:03:24.014
이를 활용하고 싶다면 
caniuse.com에 접속한 뒤

00:03:24.014 --> 00:03:26.532
작업하고 있는 사이트가 
모든 브라우저에 호환되는지

00:03:26.532 --> 00:03:28.756
확인해야 합니다

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

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

00:03:36.254 --> 00:03:38.143
혹시나 해서 드리는 말씀입니다

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

00:03:41.337 --> 00:03:46.067
여전히 각각의 스타일을 바꾸기 위해서는
클래스 명을 지시하는 것보다


00:03:46.067 --> 00:03:48.558
우리가 해야 하는 것들이 많습니다

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

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