happy cat image

everdevel

Brand New Day

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

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

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

스타일 조정하기 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>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

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>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

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>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript boxShadow

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

봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준