스타일과 클래스

자바스크립트에서 Element에 스타일을 적용시키는 방법은 크게 두가지가 있다.

1. CSS에서 클래스를 만들고 요소에 추가하기
2. style 프로퍼티를 통해 직접 입력해주기

style 적용

document의 element에는 class 프로퍼티와 style 프로퍼티가 존재한다. 또한 이들은 프로퍼티인만큼 javascript로 수정할 수 있다.

class

class를 이용해서 스타일을 수정할때는 element에 class 값을 추가해주고 해당 class를 CSS에서 생성해서 style값을 추가해주는 방식으로 진행된다.

<div class="this_div">
  <p>DIV입니다.</p>
</div>

위와 같은 div element와 자식노드인 p element가 있다고 가정할때 css는 다음과 같이 추가할 수 있다.

.this_div {
	display: flex;
}
.this_div p {
	color: red;
}

style

위의 this_div에 직접적으로 style을 입력해보자.

<div style="background: black;">
  <p style="color: white">검은상자 하얀글씨</p>
</div>

이런식으로 입력하여 element에 직접 입력할 수 있는 모습을 확인할 수 있다.

javscript

자바스크립트의 선택자들을 이용하여 특정 element를 선택하여 class확인, 추가, 제거 를 하거나 style 프로퍼티에 값을 추가 할 수 있다.

<div id="Divs"></div>

document.getElementById("Divs").classList.add("new_class");
console.log(document.querySelector("new_class"));

document.querySelector("new_class").style.display = "inline-block"; // style에 display: inline-block 추가
document.querySelector("new_class").style.cssText=`color: red`; // 폰트색 레드로 변경

<div id="Divs" class="new_class" style="display: inline-blokc; color: red"></div>