[JS-중급편-DOM] 4. javaScript로 CSS 수정하기

 

 

콘텐츠의 스타일을 지정할 때 가장 일반적인 방법은 스타일 규칙을 만들고 해당 selector가 그 요소를 대상으로 지정하는 방법입니다.

 

일반적인 스타일 규칙은 다음과 같습니다.

 

.batman {
	width: 100px;
	height: 100px;
	background-color: #333;
}

 

위 스타일 규칙을 적용받는 HTML 요소는 다음과 같이 지정합니다.

 

<div class="batman"></div>

 

어떤 웹 페이지에서든 우리가 보는 모든 것을 스타일링하기 위한 스타일 규칙을 한개에서 여러 개까지 볼 수 있습니다.

 

하지만 위와 같은 방법이 CSS를 사용하여 콘텐츠 스타일을 지정하는 데 사용할 수 있는 유일한 방법은 아닙니다.

 

같은 작업을 수행하는 여러 가지 방법이 없다면 HTML이 아닙니다!

 

인라인 스타일을 차치하고 볼때, CSS 스타일링을 컨트롤 할 수 있는 다른 접근 방식은 JavaScript도 있습니다.

 

JavaScript를 사용하여 요소에 직접 스타일을 설정할 수 있으며 JavaScript를 사용하여 요소에 클래스 값을 추가하거나 제거하여 적용할 스타일 규칙을 변경할 수도 있습니다.

 

이 강좌에서 이 두 가지 접근 방식에 대해 알아 보겠습니다.

 

 

왜 자바스크립트를 이용해 스타일을 지정할까요?

더 나아 가기 전에 처음에 요소의 스타일에 영향을 주기 위해 JavaScript를 사용하려는 이유를 설명하는 것이 먼저일거 같습니다.

 

스타일 규칙 또는 인라인 스타일을 사용하여 요소의 모양에 영향을 미치는 일반적인 경우에는 페이지가 로드 될 때 스타일이 시작됩니다.

 

콘텐츠가 더 복잡하고 유저와 더 많이 상호 작용할수록 사용자 입력에 따라 스타일이 동적으로 바뀌고, 일부 코드가 백그라운드에서 실행되는 등 웹페이지에서는 다양한 케이스가 존재합니다.

 

이러한 종류의 시나리오에서 스타일 규칙이나 인라인 스타일을 포함하는 CSS 모델은 도움이 되지 않습니다.

 

hover와 같은 pseudo selector가 약간의 지원을 제공하지만, 우리가 할 수 있는 일이 여전히 크게 제한되어 있습니다.

 

다양한 케이스에 대응하기 위한 유일한 솔루션은 JavaScript를 이용하는 솔루션입니다.

 

JavaScript는 상호 작용하는 요소의 스타일을 지정할 뿐만 아니라 더 중요한 것은 페이지 전체에서 요소의 스타일을 지정할 수 있다는 것입니다.

 

이 자유로움은 매우 강력하며 CSS의 제한된 콘텐츠 스타일을 뛰어 넘습니다.

 

 

두가지 스타일링 방법

앞에서 보았듯이 JavaScript를 사용하여 요소의 스타일을 변경하는 두 가지 방법이 있습니다.

 

한 가지 방법은 요소에 직접 CSS 속성을 설정하는 것입니다.

 

다른 방법은 특정 스타일 규칙이 적용되거나 무시 될 수 있는 요소에서 클래스 값을 추가하거나 제거하는 것입니다.

 

이 두 경우를 더 자세히 살펴 보겠습니다.

 

 

스타일을 직접 세팅하기

JavaScript를 통해 액세스하는 모든 HTML 요소에는 스타일 개체가 있습니다. 

 

이 개체를 사용하면 CSS 속성을 지정하고 해당 값을 설정할 수 있습니다.

 

 예를 들어, id 값이 superman 인 HTML 요소의 배경색 설정은 다음과 같습니다.

 

let myElement = document.querySelector("#superman");
myElement.style.backgroundColor = "#D93600";

 

해당 요소를 스타일링 하기 위해 다음과 같이 할 수 있습니다.

 

let myElements = document.querySelectorAll(".bar");

for (let i = 0; i < myElements.length; i++) {
	myElements[i].style.opacity = 0;
}

 

간단히 말해서 JavaScript를 사용하여 직접 요소의 스타일을 지정하려면 첫 번째 단계는 요소를 참조하여 그 요소에 액세스하는 것입니다.

 

이전에 배운 querySelector 메서드는 여기에서 매우 유용하게 사용됩니다.

 

두 번째 단계는 바꿀려고 하는 CSS 속성을 찾아 값을 지정하는 것입니다. CSS의 많은 값은 실제로 문자열입니다.

 

또한 많은 값이 실제로 인식되기 위해서는 px, em 또는 이와 유사한 측정 단위가 필요합니다.

 

마지막으로, 일부 CSS 속성은 더 복잡한 값을 요구합니다.

 

여기서 가장 많이 사용되는 것 중 하나는 transform 속성입니다.

 

복잡한 값을 설정하는 한 가지 좋은 방법은 문자열 연결을 사용하는 것입니다.

 

myElement.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";

 

따옴표를 따져 오류가 있는지 없는지 확인하는 일은 매우 짜증나는 일입니다.

 

그래서 덜 짜증나게하는 해결책이 바로 문자열 리터럴 구문을 사용하는 것입니다.

 

myElement.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;

 

이 방법을 사용하면 모든 문자열 연결 복잡성을 피하면서 사용자 지정 값을 계속 제공 할 수 있습니다.

 

 

CSS 속성의 일부 이름에 대한 특수 케이스

JavaScript는 속성 이름에 있어 매우 까다롭습니다.

 

CSS에 있는 대부분의 이름은 JavaScript의 규칙에 맞기 때문에 JavaScript에서 바로 사용할 수 있습니다.

 

하지만 명심해야 할 몇 가지 예외 사항이 있습니다.

 

JavaScript에서  대시(-)가 포함 된 CSS 속성을 지정하려면 대시를 제거하면 됩니다.

 

예를 들어 background-color는 backgroundColor가 되고 border-radius 속성은 borderRadius로 변환하면 됩니다.

 

또한 JavaScript의 특정 단어는 예약되어 있어 직접 사용할 수 없습니다.

 

이 특수 범주에 속하는 CSS 속성의 한 예는 float입니다.

 

CSS에서는 float이 레이아웃 속성으로 사용됩니다.

 

JavaScript에서는 float이 다른 것을 나타냅니다.

 

이름이 완전히 예약 된 속성을 사용하려면 속성 앞에 css를 붙이면 됩니다.

 

여기서는 CSS의 float이 javaScript에서는 cssFloat으로 변환됩니다.

 

 

JavaScript를 사용하여 클래스 추가 및 제거

 

두 번째 방법은 클래스 값을 추가하고 제거하여 스타일 규칙을 변경하는 것입니다.

 

예를 들어 다음과 같은 스타일 규칙이 있다고 가정 해 보겠습니다.

 

.disableMenu {
	display: none;
}

 

그리고 HTML에는 id가 dropDown 인 메뉴가 있습니다.

 

<ul id="dropDown">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
	<li>Six</li>
</ul>

 

이제 .disableMenu 스타일 규칙을 이 요소에 적용하려면 아래 코드와 같이 dropDown 요소에 disableMenu를 클래스 값으로 추가하기만 하면 됩니다.

 

<ul class="disableMenu" id="dropDown">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
	<li>Six</li>
</ul>

 

이를 수행하는 한 가지 방법은 앞서 살펴본 접근 방식인 요소의 className 속성을 설정하는 것입니다.

 

className의 문제점은 적용된 클래스 값의 현재 목록을 유지 관리해야 한다는 것입니다.

 

클래스 값은 문자열로 반환됩니다.

 

그래서 우리가 클래스를 추가, 제거 또는 클래스 켜기/끄기 할려고 할때 문자열 관련 함수를 사용해야 합니다.

 

일부 불편함을 완화하기 위해 요소에서 클래스 값을 쉽게 추가하고 제거 할 수 있는 API가 있습니다.

 

이 새로운 API는 classList로 알려져 있으며 클래스 값 작업을 케이크 조각으로 만드는 몇 가지 메서드를 제공합니다.

 

• add
• remove
• toggle
• contains

이 네 가지 방법의 기능은 이름에서 알 수 있듯이 그 역할이 명확합니다.

 

 

클래스 값 추가

요소에 클래스 값을 추가하려면 요소에 대한 참조를 가져오고 classList를 통해 요소에 대한 add 메서드를 호출합니다.

 

let divElement = document.querySelector("#myDiv");
divElement.classList.add("bar");
divElement.classList.add("foo");
divElement.classList.add("zorb");
divElement.classList.add("baz");

alert(divElement.classList);

 

이 코드가 실행 된 후 div 요소는 bar, foo, zorb, baz 클래스 값을 갖게 됩니다.

 

classList API는 클래스 값 사이에 공백이 추가되도록 합니다.

 

잘못된 클래스 값을 지정하면 classList API가 추가하지 않습니다.

 

요소에 이미 존재하는 클래스를 추가하면 add 메서드는 코드는 계속 실행되지만 중복 클래스 값은 추가하지 않습니다.

 

 

클래스 값 제거

클래스 값을 제거하려면 classList에서 remove 메서드를 호출하면 됩니다.

 

let divElement = document.querySelector("#myDiv");
divElement.classList.remove("foo");

alert(divElement.classList);

 

이 코드가 실행되면 foo 클래스 값이 제거됩니다.

 

남게 될 클래스는 bar와 zorb입니다. 아주 간단 하죠?

 

클래스 값 토글링

많은 스타일링 시나리오에 대해 매우 일반적인 워크 플로가 있습니다.

 

먼저 요소의 클래스 값이 존재하는지 확인합니다.

 

값이 존재하면 요소에서 제거합니다. 값이 존재하지 않으면 해당 클래스 값을 요소에 추가합니다.

 

이렇게 매우 일반적인 토글 패턴을 단순화하기 위해 classList API는 toggle 메소드를 제공합니다.

 

let divElement = document.querySelector("#myDiv");
divElement.classList.toggle("foo"); // remove foo
divElement.classList.toggle("foo"); // add foo
divElement.classList.toggle("foo"); // remove foo

alert(divElement.classList);

 

이름에서 알 수 있듯이 toggle 메서드는 호출 될 때마다 요소에 지정된 클래스 값을 추가하거나 제거합니다.

 

위 코드의 경우 foo 클래스는 toggle 메서드가 처음 호출 될 때 제거됩니다.

 

두 번째로 toggle 메서드가 호출될때는 foo 클래스가 추가됩니다.

 

세 번째로 toggle 메서드가 호출될때는 foo 클래스가 제거됩니다.

 

 

클래스 값이 있는지 확인

 

마지막으로 살펴볼 것은 contains 메소드입니다.

 

let divElement = document.querySelector("#myDiv");

if (divElement.classList.contains("bar") == true) {
	// do something
}

 

이 메소드는 지정된 클래스 값이 요소에 존재하는지 확인합니다.

 

값이 존재하면 true가 됩니다. 값이 존재하지 않으면 false가 됩니다.

 

 

결론

지금까지 JavaScript로 HTML 요소를 스타일링 하는 두가지 완벽한 방법에 대해 알아 봤습니다.

 

이 두 가지 방법 중에서 되도록이면 클래스를 추가하고 제거하여 스타일을 바꾸는 방법을 추천드립니다.

 

왜냐하면 이 접근 방식이 훨씬 더 유지 관리가 쉽기 때문입니다.

 

JavaScript 코드를 추가, 제거하는 것과 달리 CSS의 스타일 규칙에서 스타일 속성을 추가하고 제거하는 것이 훨씬 쉽습니다.