happy cat image

everdevel

So This Is Love

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

스타일 조정하기 CSS

이번에는 style을 수정하는 방법에 대해 알아보겠습니다.

우리는 앞에서 이미 스타일을 변경하는 코드를 사용했습니다.

style.color="red"를 사용했었죠. ^^

이걸 사용해 단순히 텍스트의 색상뿐 여러가지를 변경할 수 있습니다.

앞에서 우리가 학습한 CSS의 속성과도 일치하므로 어려울것 없습니다. ^^

style 사용 방법

선택자.style.CSS속성 = 값;

그럼 배경을 지정하는 방법에 대해 알아봅시다.

자바스크립트로 배경 지정하기

선택자.style.background = "red";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - 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>

결과는 바로 아래에서 확인하겠습니다.

JavaScript Background color

텍스트의 크기 지정

텍스트의 크기를 지정하려면 CSS속성의 font-size를 사용했습니다.

자바스크립트에서는 -(하이픈)으로 구성된 CSS속성은 카멜표기법을 사용하여 fontSize로 표시합니다.

선택자.style.fontSize = "40px";

그럼 결과를 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - 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>

결과는 바로 아래에서 확인하겠습니다.

JavaScript fontSize

이것저것 CSS속성을 다 해보려면 끝도없이 그림자 효과만 해보고 끝내겠습니다.

그림자 속성은 다음과 같지요?

선택자{box-shadow:가로길이값 세로길이값 번짐 효과 그림자 색}

혹시 자세히 알고 싶으힌 분은 다음의 링크를 클릭해 주세요.

CSS 그림자 속성

그림자 지정하기

선택자.style.boxShadow = "10px 10px 10px lightblue";

코드를 사용해서 예제를 만들어 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - 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>

결과는 바로 아래에서 확인하겠습니다.

JavaScript boxShadow

style을 적용하는 방법에 대해 알아봤습니다. ^^


봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

농구 황제가 아닌 인간 마이클 조던의 삶, 그가 거둔 무수한 실패와 성공을 기록한 책. “우리가 몰랐던 이야기……. 빛나는 영웅의 삶 이면에 존재하던 외롭고 자존심 강한 한 남자를 매우 흥미롭게 파고들었다.” - 《퍼블리셔스 위클리》


    
    

강좌로 돌아가기

댓글 0개

정렬기준