JS를 활용해 CSS Style을 어떻게 다루는지 알아보자 😙

안녕하세요! 두두코딩 입니다 ✋
오늘은 CSS Style 다루는 개념에 대해 알아보겠습니다.

🖇 소스코드에 마우스를 올리고 copy 버튼을 누를 경우 더 쉽게 복사할 수 있습니다!

궁금한 점, 보안점 남겨주시면 성실히 답변하겠습니다. 😁
+ 감상평 댓글로 남겨주시면 힘이됩니다. 🙇

스타일

Web에서 스타일이란 HTML에 적용된 CSS를 의미한다.

HTML에는 기본적으로 적용되어져 있는 스타일이 있으며, Cascading을 통한 상위 요소의 스타일을 물려받는다는 특징이 있다.

사용자는 CSS Style을 2가지 방법을 통해 추가할 수 있다.

  1. inline style 추가방법
    • 여기서 말하는 inline이란 어트리뷰터 요소를 통한 직접 추가를 의미한다.
  2. JS를 통한 동적 추가방법
    • inline style 추가방법의 연장선으로 JS를 활용해 inline style을 조작할 수 있다.

인라인 스타일 조작

인라인 스타일은 아래와 같이 style 어트리뷰트 사용을 의미한다.

<div style="color: red"> Hello World! </div>

자바스크립트에서는 접근자 프로퍼티를 활용해 요소 노드의 인라인 스타일을 취득하거나 추가 또는 변경할 수 있다.

See the Pen graphic by 13634816 (@13634816) on CodePen.

위의 코드와 같이 style 프로퍼티를 참조하면 CSSStyleDeclaration 타입의 객체를 반환받는다. 해당 객체 같은 경우 CSS 프로퍼티에 대응하는 각 프로퍼티를 갖고 있다. 해당 프로퍼티에 적절한 값을 할당할 경우 style이 변경되는 것을 확인할 수 있다.

style 프로퍼티에 접근하기 위한 방법은 2가지가 있다.

  1. CSSStyleDeclarartion 객체의 프로퍼티에 직접 접근할 경우 
    $div.style.backgroundColor='yellow';
  2. CSS 프로퍼티를 직접 사용할 경우 (케밥 케이스 활용) 
    $div.style['background-color']='yellow';

객체 내 존재하는 프로퍼티 이름 형식과 CSS 프로퍼티 이름 형식이 다르기 때문에 -를 활용하기 위한 부분을 유심히 살펴야한다.

CSS프로퍼티 값을 변경할 경우 주의해야할 점❗
단위 지정이 필요한 경우 반드시 단위 지정을 해야된다. 예를 들어 높이 넓이 같이 px,em,% 등의 단위를 지정해야하는 프로퍼티 같은 경우 반드시 지정해야한다. 만약 하지 않을 경우 CSS 프로퍼티가 적용되지 않는다.

클래스 조작

CSS에서는 아래와 같이 . 선택자를 사용해 class를 정의할 수 있다. 해당 class는 HTML요소의 class 어트리뷰트 값에 추가해 HTML 요소를 변경하는데 사용한다.

.classTest {
	width: 100px;
	height: 100px;
	background-color: yellow;
}

<div class="classTest"></div>

HTML에서 class 어트리뷰트를 조작하기 위해서는 요소 노드의 DOM 프로퍼티를 사용한다. class 어트리뷰트에 대응되는 DOM 프로퍼티는 class가 아니라 className, classList이다. Javascript에서 class는 예약어임으로 프로퍼티 이름이 class가 아니다.

ClassName

Element.prototype.className 프로퍼티 즉, DOM 프로퍼티 같은 경우 setter와 getter 모두 존재하는 접근자 프로퍼티이다. className을 참조하면 class 어트리뷰트 값을 문자열로 반환한다. 만약 요소에 문자열을 할당할 경우 어트리뷰트 값을 할당한 문자열로 변경한다.

See the Pen graphic by 13634816 (@13634816) on CodePen.

위의 코드에서 JS 버튼 클릭해 Javascript의 동작과정을 확인해보자.

className 같은 경우 DOMString 객체를 반환 받는다. 즉, 문자열을 반환받음으로 여러개의 클래스를 구별해 사용하기 어려운 점이있다.

ClassList

Element.prototype.classList 프로퍼티는 class 어트리뷰트의 정보를 담은 DOMTokenList 객체를 반환한다.

DOMString 과 달리 유사배열 객체인 DOMTokenList를 반환받기 때문에 유연하게 요소를 추가할 수 있다.

See the Pen graphic by 13634816 (@13634816) on CodePen.

위의 예시를 보면, class를 추가해서 사용할 수도 있으며, index 접근이 가능하다는 특징이 있다.

DOMTokenList의 유용한 메서드들은 다음과 같다.

add | remove 메서드

요소 추가 혹은 제거 시 사용

$box.classList.add('foo');
$box.classList.remove('foo');

// 만약 제거할 요소가 없다면, 에러없이 무시함.
$box.classList.remove('empty..');

item(index)

인수로 전달된 index에 해당되는 요소를 반환한다. []연산자와 동일함.

// 0번째 아이템
$box.classList.item(0);
$box.classList[0];

toggle

class 어트리뷰터에 인수로 전달된 문자열과 일치하는 클래스가 존재하면 제거하고, 존재하지 않으면 추가함.

// 없다면 추가
$box.classList.toggle('foo');

// 있다면 제거
$box.classList.toggle('foo');

이외에도 replace forEach entries keys values supports 등의 메서드가 존재한다.

요소에 적용된 CSS 스타일 참조

style 프로퍼티는 인라인 스타일만 반환한다. 즉, 기본값 혹은 cascading을 통해 암묵적으로 상속받은 스타일은 참조할 수 없다.

HTML 요소에 적용되어 있는 모든 CSS 스타일을 참조하기 위해서는 getComputedStyle 메서드를 활용해야한다.

window.getComputedStyle메서드를 활용할 경우 요소에 적용된 모든 style을 CSSStyleDelcaration 객체에 담아 반환한다. 구체적으로 window.getComputedStyle 메서드는 첫 번째 인수로 전달한 요소 노드에 적용되어 있는 모든 스타일 즉, 링크스타일, 임베딩 스타일, 인라인스타일, 자바스크립트에서 적용된 스타일, 기본 스타일, 상속된 스타일 등 모든 스타일이 조합된 최종 결과물을 반환해준다.

See the Pen graphic by 13634816 (@13634816) on CodePen.

위의 예시를 통해 알아보자.

위의 예시 중 중요하게 봐야할 부분이 backgroundColor 와 display 부분이다. 해당 style은 inline으로 채운 것이 아니라 body 요소의 값을 상속 받거나 기본 값으로 적용된 값들이다. 즉, getComputedStyle을 통해서는 모든 스타일들을 추출할 수 있다는 점이 중요하다.

DOM 표준

DOM 표준 같은 경우 W3C 와 WHATWG 두 단체가 협력하면서 공통된 표준을 만들어 왔다. 현재는 구글, 애플, 마이크로소프트, 모질라로 구성된 4개의 주류 브라우저 벤더사가 주도하는 WHATWG 단체가 단일 표준을 내놓기로 합의했으며, 현재까지 단일 표준으로 진행되고 있다.

Reference

DeepDive