devil cat everdevel character

프로그래머가 아니던 시절 만들기 시작한 에버디벨 !
첫 오픈 한달과 최근 한달의 방문자수를 비교해보니 무려 190배 이상 증가했습니다.
그 사이 어느새 1년 9개월의 경력을 갖고 있는 프로그래머가 되었습니다.
실무의 경험을 담아 더 많은 내용으로 올해 2월 에버디벨이 책으로 나옵니다.
{HTML5, CSS3, jQuery, MySQL5, PHP7(PDO, OOP, MVC)}
아무것도 몰라도 컴퓨터만 있다면 하나부터 학습하며 발전해 나가는 자신을 보는 감동을 드리겠습니다.

에버디벨이 밥값을 할 수 있도록 광고를 넣었습니다. 양해 바랍니다.

disney Teyon kin

제이쿼리로 css값 변경하기

제이쿼리를 이용해서 css값도 변경이 가능합니다.

참 많은 기능이 있죠?

예를 들어 가로값이 100px인 div를 500px로 변경이 가능 합니다. 제이쿼리를 이용해서요.!!!!

그럼 말로만 하지 말고 해보겠습니다.

$('SELECTOR').css();

지금 이 강좌를 보고 계신분은 에버디벨에서 html css강좌를 거쳐서 지금 이 제이쿼리 강좌까지도 보고 계시기 때문에 css를 알고계신다고 생각하고 강좌를 하겠습니다.

css에서 글씨 색값을 지정하려면 이렇게 하죠?

selector{color:red}

그렇다면 제이쿼리 에서는?

$('SELECTOR').css('color','red');

위와 같이 표현해 줍니다. css('요소','값');

그럼 예제를 통하여 익혀 보도록 합시다.

상황 1

100px,200px,300px이라는 문구를 만들어서 클릭시 특정div가 100px,200px,300px로 가로값이 변하는것을 만들어 보죠^^

우리는 이제 변수선언에 대해서도 공부했기 때문에 이제부터는 변수를 선언해서 공부를 해보도록 합시다.

$(function(){
  var box = $('.box');
  var btn_100px = $('.btn_100px');
  var btn_200px = $('.btn_200px');
  var btn_300px = $('.btn_300px');

  btn_100px.click(function(){
    box.css('width','100px');
  });
  btn_200px.click(function(){
    box.css('width','200px');
  });
  btn_300px.click(function(){
    box.css('width','300px');
  });
});

위와 같이 소스를 작성 하면 되겠죠? ^-^

그럼 box의 크기를 가로 50px,세로 20px, 배경 yellow로 해봅시다.

css source : 
.box{width:50px;height:20px;background:yellow}
html source :
<div class="box"></div>
<p class="btn_100px">100px</p>
<p class="btn_200px">200px</p>
<p class="btn_300px">300px</p>


실전 예제를 통해서 테스트 및 익혀봅시다.

<!doctype html>
<html>
<head>
<title>
웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.
</title>
<style>
.box{width:50px;height:20px;background:yellow}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  var box = $('.box');
  var btn_100px = $('.btn_100px');
  var btn_200px = $('.btn_200px');
  var btn_300px = $('.btn_300px');
  btn_100px.click(function(){
    box.css('width','100px');
  });
  btn_200px.click(function(){
    box.css('width','200px');
  });
  btn_300px.click(function(){
    box.css('width','300px');
  });
});
</script>
</head>
<body>
<div class="box"></div>
<p class="btn_100px">100px</p>
<p class="btn_200px">200px</p>
<p class="btn_300px">300px</p>
</body>
</html>



결과보기

100px 클릭

200px 클릭

300px 클릭

이렇게 제이쿼리로 css를 컨트롤 하는것이 가능합니다. float,display,width,height,color,background,margin,padding 등등 다 가능합니다.

스스로 여러가지 css요소를 컨트롤 해보면서 연습해 보시기 바랍니다. ^^

다음강좌는 6강.페이드 효과 입니다. 클릭하면 다음 강좌로 이동합니다.