Changing CSS classes

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

만약 자바스크립트로 여러 스타일을 지정하고 싶다면

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

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

이 경우 또 다른 방식으로 접근할 수 있습니다

CSS 클래스를 생성하고

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

그 이후 자바스크립트에 클래스 명을 넣으면 되는데요

여기에 '' 태그를 넣고 시작해보도록 합시다

'.catclass' 클래스를 만들고
여기에 CSS 규칙을 추가해볼게요

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

이를 'heading'요소로 넣자면
이렇게로도 볼 수 있죠

'headingEl.className = "catcolors"; 로요

이러면 자바스크립의 색배정과 배경색을
삭제할 수 있습니다

짜잔!

됐죠?

근데, 조금 이상한 게 보이시나요?

클래스 명을 위한 HTML 속성은 그냥 'class'이네요

이것을 HTML로 하려고 했다면
'class="catcolors"에 그쳤겠죠

자바스크립트로 하려고 하니 '.className',
으로 써야 했어요

이는 흔히 인숙한 방법은 아니죠

그것은 'class' 자체가 자바스크립트어의
키워드로 기능하기 때문입니다

이미 그 자체로 의미가 있는 거죠

그렇기 때문에 브라우저는 'className'을
HTML 클래스 속성을 지시하기 위해

'className'을 사용합니다
그래야 헷갈리지 않으니까요

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

.className = 를 적으면 됩니다

이제 각 동물 이름에 배정하기 위해서

이를 루프 안에 넣을 수 있습니다.
바로 이렇게요

'nameEls[i].className = "catColors";'

이렇게 하면 클래스 명을 추가하는 게 되지만

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

따라서 이전에 다른 클래스가 있었다면,
클래스들은 다 삭제되고 없습니다

이제 클래스는 동물과 같죠

그리하여 catColors가 되었네요

따라서 진짜 원했던 건 이 클래스 속성에
새 클래스 명을 추가하는 것이었죠

이는 += catColors.로
적는 것과 같습니다

그렇습니다

이렇게 하는 것이 안전합니다

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

새로운 브라우저를 활용한 또 다른 방법이 있는데요

'classList' 속성을 활용하는 겁니다

'nameEls[i].classList.add("catcolors")'
을 쓰면 되는 거죠

이건 훨씬 낫지만
모든 경우에 활용할 수는 없습니다

이를 활용하고 싶다면
caniuse.com에 접속한 뒤

작업하고 있는 사이트가
모든 브라우저에 호환되는지

확인해야 합니다

훨씬 나아보이기는 하지만,
홈페이지가 깨진다면 그닥 좋진 않겠지요

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

혹시나 해서 드리는 말씀입니다

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

여전히 각각의 스타일을 바꾸기 위해서는
클래스 명을 지시하는 것보다

우리가 해야 하는 것들이 많습니다

다시 한번 드리는 말씀이지만,
이런 도구가 있다는 걸 알려드리고 싶네요

상황에 따라 적절하게 활용하셨으면 좋겠습니다