스타일 조정하기 CSS
이번에는 style을 수정하는 방법에 대해 알아보겠습니다.
우리는 앞에서 이미 스타일을 변경하는 코드를 사용했습니다.
style.color="red"를 사용했었죠. ^^
이걸 사용해 단순히 텍스트의 색상뿐 여러가지를 변경할 수 있습니다.
앞에서 우리가 학습한 CSS의 속성과도 일치하므로 어려울것 없습니다. ^^
style 사용 방법
선택자.style.CSS속성 = 값;
그럼 배경을 지정하는 방법에 대해 알아봅시다.
자바스크립트로 배경 지정하기
선택자.style.background = "red";
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>COREASUR - JavaScript - style</title> <script> window.onload = function(){ var target = document.getElementsByTagName('p')[0]; target.style.background = "red"; }; </script> </head> <body> <p>here</p> </body> </html>
텍스트의 크기 지정
텍스트의 크기를 지정하려면 CSS속성의 font-size를 사용했습니다.
자바스크립트에서는 -(하이픈)으로 구성된 CSS속성은 카멜표기법을 사용하여 fontSize로 표시합니다.
선택자.style.fontSize = "40px";
그럼 결과를 봅시다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>COREASUR - JavaScript - style</title> <script> window.onload = function(){ var target = document.getElementsByTagName('p')[0]; target.style.fontSize = "40px"; }; </script> </head> <body> <p>here</p> </body> </html>
이것저것 CSS속성을 다 해보려면 끝도없이 그림자 효과만 해보고 끝내겠습니다.
그림자 속성은 다음과 같지요?
선택자{box-shadow:가로길이값 세로길이값 번짐 효과 그림자 색}
혹시 자세히 알고 싶으힌 분은 다음의 링크를 클릭해 주세요.
CSS 그림자 속성그림자 지정하기
선택자.style.boxShadow = "10px 10px 10px lightblue";
코드를 사용해서 예제를 만들어 보겠습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>COREASUR - JavaScript - style</title> <script> window.onload = function(){ var target = document.getElementsByTagName('div')[0]; target.style.width = "100px"; target.style.height = "30px"; target.style.background = "skyblue"; target.style.boxShadow = "10px 10px 10px lightblue"; }; </script> </head> <body> <div></div> </body> </html>
style을 적용하는 방법에 대해 알아봤습니다. ^^