자바스크립트 css 제어방법 알아보기

오래만에 본업으로 들어와서 글을 적습니다 이번 시간에는 자바스크립트 css 제어 방법에 대해 알아보는 시간을 가져보겠습니다 자바스크립트는 역사가 아주긴 웹에서 빼놓을 수 없는 스크립트언어입니다

현제 가장 많이 쓰이는 제이쿼리의 바탕이되는 원조격언어이며 지금도 아주 많이 쓰이고 있는데요 사실 자바 스크립트로 제어가 안되는곳이 거의 없을정도로 너무 막강해서 보안상의 이유로 제한을 두고 있는 상태입니다

자바스크립트 css 제어를 위해서는 기본적인 부분을 좀 알고 계셔야 할것 같습니다

우선 html의 요소를 이루고 있는 기본 DOM에 대해서 조금이나마 알고 계셔야 하는데요 DOM을 구분하는 Element로서 대표적 구분자는 id와 name 입니다

각각의 엘리멘트들은 고유한 이름인 id 와 공통속성인 class를 가질 수 있습니다

다음으로 css 스타일을 살펴보겠습니다

<style>
#아이디{}
.클래스{}
</style>

css는 이런식으로 구성이됩니다

 

 

자바스크립트 css 제어를 위한 속성을 가져오기는 다음과 같습니다

document.getEmentById('아이디').style.속성 = '속성값';

이렇게 구성이되는데 그럼 속성을 넣어보도록 하겠습니다. display 속성이 제일 많이 쓰이는데요. 스타일 시트에서는 아래와 같이 사용됩니다. 예제로 한번 살펴보시겠습니다.

간단예제)

<style>
#test{display:block;}
</style>

<div id="test">
내용이 나타납니다.
</div>

그럼 자바스크립트로 display 속성을 제어하기 위해서는 아래와 같이 코드가 쓰이겠죠..

document.getEmentById('test').style.display = 'none';

현재 디스플레이되고 있는 DIV 박스를 안보이게 하는 명령어입니다. 어때요? 감은 오셨나요 자바스크립트 css를 제어하실때에는 이런식으로 사용하시면 됩니다.