[Javacript] 스타일 시트 접근

지난번 포스트들까지 해서 자바스크립트에서 html문서에 접근했습니다.

 

보통 구조를 구성하는 html위에 스타일 시트를 덧씌워서 우리 눈에 보기 좋도록 디자인을 하게됩니다. 그래서 우리는 이번 포스트에서 스타일 시트에 접근하여 디자인을 바꾸는 방법들을 살펴보려고 합니다.

---

1. style

첫 번째 방법은 style 프로퍼티를 이용하는 방법입니다. style프로퍼티는 스타일을 인라인 형식으로 넣어줍니다.

인라인 형식은 다음과 같이 요소 태그 내부에 스타일을 추가하는 방법입니다.

 

<p style="color:Green">초록색</p>

 

그리고 style 프로퍼티의 이용법은 다음과 같습니다.

 

요소.style.속성 = "속성 값"

요소에 style 프로퍼티를 넣고 속성과 속성값을 집어넣으면 완성되는 형태를 가졌습니다. 만약 속성 값이 없는(<input>의 readonly같은 속성) 속성을 추가한다면 요소.style.속성 까지만 적으면 됩니다.

 

이때 주의할점은 속성이 우리가 스타일 시트에서 사용하던 이름과는 다르게 사용됩니다. 대표적으로 요소 배경에 색을 입히는 background-color 같은 속성은 스타일 프로퍼티를 이용할 때 backgroundColor와 같은 형식으로만 사용해야합니다. 예시에서 보이듯이 하이픈이 들어가는 속성은 하이픈을 제거하고 두번째 글자부터 대문자를 따르도록(camelCase) 적으면 자바스크립트에서 사용가능한 형식이 됩니다.

 

그러나 이 방법은 html 요소 내부에 스타일을 집어넣는 방식이기 때문에 스타일 시트를 따로 분리하는 현재의 방식과도 맞지 않고 코드 유지보수성도 낮아지기에 다음 방법을 이용하는 것을 추천드립니다.

 

 

 

 

2. className

마찬가지로 className도 프로퍼티입니다. 보통 html에서 요소에 class를 지정하고 css에서 클래스 셀렉터로 지정하여 요소를 꾸며줍니다. 이 말이 잘 이해가 되지 않는다면, 셀렉터 포스트의 3번 문단 class 셀렉터를 한 번 읽고 오시면 도움이 될 것 같습니다. 2020.09.25 - [Programming/HTML,CSS] - [CSS] 셀렉터 1

 

className 프로퍼티의 이용법은 다음과 같습니다.

 

요소.className = '클래스명';

클래스명은 html 태그에서 지정된 class 속성의 속성 값(클래스 명)입니다.

---