자바스크립트를 이용한 CSS 제어

안녕하세요~ 오랜만에 글쓰는거 같습니다 ㅋㅋ 일주일에 한번은 꼬박꼬박 쓰는거 같은데 막상 쓸때는 항상 처음쓰는거같아요 ㅋㅋ

저번시간엔 HTML객체를 마음대로 생성했었는데요 ㅎㅎ 이번에는 좀 더 재미있고 눈이 즐거운 CSS제어를 해보겠습니다.

그전에 잠깐 CSS 에 대해서 알아보겠습니다. CSS란 cascading style sheets의 줄임말로 

HTML 페이지를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 

라고 네이버 백과사전이 알려줍니다. ㅋㅋ 무슨말인지 잘 이해가 안가실 분들을 생각해서 쉽게 얘기하면 CSS는 우리가 만드는 웹 페이지의 레이아웃, 디자인 요소에 많은 영향을 주는 일종의 언어라고 생각하시면 쉽게 이해하실거라 믿습니다.

보통은 <style type="text/css"> ~ </style> 사이에 만들어줍니다. 그러나!! 이렇게 할 경우 우리가 원하는 것을 구현하지 못할 수도 있습니다. 바로 전에했던 강좌를 예로 들어서 설명하자면, 만약 우리가 textbox를 만드는데 한번 클릭해서 만들때마다 textbox의 테두리색이나 배경색을 바꾸고 싶다면 어떻게 해야 할까요?? 물론 <style type="text/css"> ~ </style> 사이에 정의해도 변하긴 하지만 그건 우리가 필요할때 그 때에맞게 변화하지 않는 그냥 고정되어있는 것입니다.

그럼 어떻게 해야할까요?? 

<script type="text/javascript">

function createObject(){

var obj=document.createElement("input");

obj.style.backgroundColor="#dd0000";

document.body.appendChild(obj);

}

</script>

전시간에 만든 소스를 약간 손봤습니다. 뭔가 달라진점이 보이시나요?? 

그렇습니다. 중간에 obj.style.backgroundColor="#dd0000"; 이 소스 한줄이 추가되었습니다.

이게 무엇을 뜻하는지 설명하자면 obj라는 객체의 스타일중에 배경색을 #dd0000이라는 색으로 설정한다는 뜻입니다.

obj라는 변수에 객체를 담은 뒤에 그 객체의  style 속성중 backgroundColor 의 값을 #dd0000 설정한 것입니다. 

 이제 결과화면을 보겠습니다.

style의 속성은 backgroundColor 이외에도 많이 있습니다. 배경색을 바꾸거나, 마우스의 모양을 바꾸거나 또는 HTML객체들의 정렬하는 등 여러가지 속성이 있고, 대부분이 범용으로 사용되지면 특정 몇몇개의 HTML객체만의 속성도 있습니다.

style공부도 하시면 많은 도움이 될거라 믿습니다. 

혹시 이전 강좌롤 못보신 분들을 위하여 링크를 따로 걸어두겠습니다.

http://www.cusmaker.com/category/Lecture/Javascript-%EA%B3%A0%EA%B8%89