오늘은 jQuery Html이 마지막 내용인 Dimensions( 면적, 넓이)에 대해서 알아보겠습니다.
jQuery Dimension 의 사용방법
- width()
- height()
width()와 height()는 넓이와 높이값을 반환합니다.
- innerWidth()
- innerHeight()
innerWidth()와 innerHeight()는 width(),height()와 같이 넓이와 높이를 반환하지만 padding값만을 포함하여 반환합니다. 즉, 넓이와 높이를 100px, 100px 라고 해도 padding 값을 주면 더 넓어지게 되는데 그 넓어지는 값을 반환하게 됩니다.(단, padding만 해당됨)
- outerWidth()
- outerHeight()
outerWidth()와 outerHeight()는 width(),height()와 같이 넓이와 높이를 반환하지만 border, padding값을 포함하여 반환합니다. 즉, 넓이와 높이를 100px, 100px 라고 해도 border , padding 값을 주면 더 넓어지게 되는데 그 넓어지는 값을 반환하게 됩니다.(border, padding 포함)
width(), height() 관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="div의 넓이값 : " + $("#div1").width() + "</br>";
txt+="div의 높이값 : " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>Dimensions</button>
<p>width() - 넓이값 반환</p>
<p>height() - 높이값 반환.</p>
</body>
</html>
// Dimensions 버튼을 클릭하면 박스안에 div의 넓이(width)값과 높이(height)의 값이 나타나는걸 알 수 있습니다.
innerWidth(), innerHeight() 관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="div의 넓이값 : " + $("#div1").width() + "</br>";
txt+="div의 높이값 : " + $("#div1").height() + "</br>";
txt+="div의 innerWidth 값 : " + $("#div1").innerWidth() + "</br>";
txt+="div의 innerHeight 값 : " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>Dimensions</button>
<p>width() - innerWidth값 반환</p>
<p>height() - innerHeight값 반환.</p>
</body>
</html>
// 위 소스를 실행시키면 width()의 값과 innerWidth값이 20이 차이가 납니다. 위에서 말했듯이 innerWidth는 padding값을 포함하여 반환한다 했는데 padding:10px 이렇게 코딩된것을 확인할 수 있을겁니다. 즉, 전체적으로 10px 넓히라는 의미죠. 좌,우,위,아래 모두 10을 넓히면 당연히 박스가 좌,우 10, 위,아래 10씩 커지겠죠. 그래서 innerWidth, innerHeight 의 값이 20을 더해서 나온것을 알 수 있습니다.
outerWidth(), outerHeight() 관련예제
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="div의 넓이값 : " + $("#div1").width() + "</br>";
txt+="div의 높이값 : " + $("#div1").height() + "</br>";
txt+="div의 outerWidth 값 : " + $("#div1").outerWidth() + "</br>";
txt+="div의 outerHeight 값 : " + $("#div1").outerHeight();
$("#div1").html(txt);
});
});
// 전체소스는 위에 있는 소스에서 jQuery로 된 소스만 바꾸면 됩니다. 그래서 전체 소스를 나타내지 않았습니다.
위 이미지를 보시면 inner의 값과 틀리게 outer값은 322, 122값이 나온것을 확인할 수 있습니다. 위 내용에서 미리 말했듯이 outer은 padding값과 border값을 포함하여 값을 나타냅니다. 즉 border:1px;은 div로 감싸고 있는 박스두께를 1px로 하겠다는 의미입니다. padding과 마찬가지로 좌,우,위,아래 박스두께가 1px이 증가하게 됩니다. 그래서 outerWidth(), outerHeight()값이 2px이 증가됨을 알 수 있습니다.
여기까지 jQuery Html에 대해서 정리를 하였습니다. 이글을 보시는 분들이 프로그래머, 디자이너등 여러 사람들이 있겠지만 jQuery에 대해서 약간의 재미?를 느끼실수 있을겁니다. 어떤 일이던지 재미를 가지고 하게되면 그 효과는 두배 이상이 되지않을까 생각합니다.
처음엔 두렵겠지만 하다보면 적응하며, 재미를 스스로 느끼게 될것입니다.
다음장에서는 jQuery 핵심인 AJAX에 대해서 알아보겠습니다.
'jQuery > jQuery HTML' 카테고리의 다른 글
| jQuery classes css() (0) | 2013.05.23 |
|---|---|
| jQuery CSS Classes (0) | 2013.05.23 |
| jQuery - Remove Elements (0) | 2013.05.22 |
| jQuery Add Elements (0) | 2013.05.21 |
| jQuery html Set text(), html(), val(), attr() (0) | 2013.05.20 |
