1. 문서객체 영역메서드의 종류
- 문서객체 영역메서드는 w3school사이트에서 워낙 잘 그려놔서 참조해서 가져왔습니다.
- 우리가 문서객체(선택자=요소=태그)가 있을 때 영역이 있습니다.
- 이때 영역을 어떻게 처리했냐에 따라 메서드를 다 다르게 작성해야 합니다.
- CSS에서 영역을 표시할 때 width/height속성으로 크게 영역을 잡습니다.
- 거기에 padding이라는 테두리 안쪽 여백, margin이라는 테두리 바깥쪽 여백도 있습니다.
- 그리고 테두리를 뜻하는 border라는 속성도 있습니다.
- 이 전체가 모여 요소를 이루는 영역이 되는 것입니다.
- 이때 과연 개발자가 필요로 하는 요소는 무엇인가에 따라 메서드를 다르게 써야 하는 것입니다.
| 메서드명 | 설명 |
| width() | 요소의 너비를 설정하거나 반환(padding, border, margin 제외) |
| height() | 요소의 높이를 설정하거나 반환(padding, border, margin 제외) |
| innerWidth() | 요소의 너비를 반환(padding만 포함) |
| innerHeight() | 요소의 높이를 반환(padding만 포함) |
| outerWidth() | 요소의 너비를 반환(padding + border 포함) |
| outerHeight() | 요소의 높이를 반환(padding + border 포함) |
| outerWidth(true) | 요소의 너비를 반환(padding, border, margin 모두 포함) |
| outerHeight(true) | 요소의 높이를 반환(padding, border, margin 모두 포함) |
2. box-sizing: border-box; 를 주지 않은 경우
- CSS에는 box-sizing이라는 속성이 있습니다. padding과 border 수치를 영역안으로 인사이드시킬지, 아웃사이드시킬지 지정하는 속성입니다.
- 보통 기본값은 content-box로 padding과 border수치가 아웃사이드 처리되어 기존 영역보다 요소 영역이 커집니다.
- 지금 예제는 기본값으로 아웃사이드 처리되게 하고 수치를 확인해보겠습니다.
- width관련과 height관련으로 나뉘는 메서드들이지만 width로만 테스트 해보겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 문서객체 영역관련 메서드</title>
<style>
div{
width: 200px; height: 200px;
padding: 20px; border: 10px solid black;
margin: 30px;
background-color: aquamarine;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//각각의 너비 값을 담는 변수
var w01 = $('div').width();
var w02 = $('div').innerWidth();
var w03 = $('div').outerWidth();
var w04 = $('div').outerWidth(true);
//각각의 너비값 출력
$('.w01').html(w01);
$('.w02').html(w02);
$('.w03').html(w03);
$('.w04').html(w04);
});
</script>
</head>
<body>
<div>테스트</div>
<hr>
<p>width() 값 : <span class="w01"></span></p>
<p>innerWidth() 값 : <span class="w02"></span></p>
<p>outerWidth() 값 : <span class="w03"></span></p>
<p>outerWidth(true) 값 : <span class="w04"></span></p>
</body>
</html>- 각각의 변수 [w01]~[w04]에 각각의 너비 메서드를 사용해서 너비 값을 담았습니다.
- 그리고 그걸 <span> 태그에 각각 출력했습니다.
## 결과보기
- width() 값은 원래 CSS에서 준 width속성값 그대로 200px로 설정됩니다.
- innerWidth() 값은 CSS에서 준 width속성값 + padding*2 로 양쪽 패딩까지 포함해서 240px로 설정됩니다.
- outWidth() 값은 CSS에서 준 width속성값 + padding*2 + border*2 로 양쪽 padding에 양쪽 테두리까지 포함해서 260px로 설정됩니다.
- outWidth(true) 값은 CSS에서 준 width속성값 + padding*2 + border*2 + margin*2 로 양쪽 padding에 양쪽 테두리, 양쪽 margin까지 포함해서 320px로 설정됩니다.
3. box-sizing: border-box; 를 준 경우
- CSS에는 box-sizing이라는 속성이 있습니다. padding과 border 수치를 영역안으로 인사이드시킬지, 아웃사이드시킬지 지정하는 속성입니다.
- 이번에는 border-box 를 줘서 padding과 border 수치를 영역안으로 인사이드 처리해볼겁니다.
- 그럼 각각 메서드의 수치들이 어떻게 나오는지 보도록 하겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 문서객체 영역관련 메서드</title>
<style>
div{
box-sizing: border-box;
width: 200px; height: 200px;
padding: 20px; border: 10px solid black;
margin: 30px;
background-color: aquamarine;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//각각의 너비 값을 담는 변수
var w01 = $('div').width();
var w02 = $('div').innerWidth();
var w03 = $('div').outerWidth();
var w04 = $('div').outerWidth(true);
//각각의 너비값 출력
$('.w01').html(w01);
$('.w02').html(w02);
$('.w03').html(w03);
$('.w04').html(w04);
});
</script>
</head>
<body>
<div>테스트</div>
<hr>
<p>width() 값 : <span class="w01"></span></p>
<p>innerWidth() 값 : <span class="w02"></span></p>
<p>outerWidth() 값 : <span class="w03"></span></p>
<p>outerWidth(true) 값 : <span class="w04"></span></p>
</body>
</html>- 사실 위의 코드와 달라진 것은 CSS에서 box-sizing: border-box; 만 추가했습니다.
## 결과보기
- width() 값은 padding과 border 수치를 뺀 상태인 200 - 20*2 - 10*2 = 140으로 설정됩니다.
- innerWidth() 값은 padding은 포함되기 때문에 border 수치만 뺀 200 - 10*2 = 180으로 설정됩니다.
- outWidth() 값은 padding과 border가 포함되지만 box-sizing: border-box; 로 인사이드 처리되서 width수치인 200px로 그대로 표시가 됩니다.
- outWidth(true) 값은 위 상태에서 margin값이 추가되므로 200 + 30*2 = 260으로 설정됩니다.
- 제이쿼리는 일단 CSS에 대한 이해가 많아야 합니다.
- box-sizing: border-box; 를 잘 모르는 분은 아래 게시물을 보고 오세요.
https://ossam5.tistory.com/50?category=898948
[CSS3강좌] 11강 여백속성(padding과 margin)
** 영상으로 보고 싶은 분은 아래 영상을 클릭해주세요. https://www.youtube.com/watch?v=a930mdh1jGs https://www.youtube.com/watch?v=Gx6HsqJJwe0 1. 속성정리 속성값 설명 padding 테두리기준 테두리 안쪽..
ossam5.tistory.com
4. width() / height() 메서드의 세터
- 다른 영역관련 메서드는 전부 게터 개념입니다. 값을 얻어오게 하는 것이죠.
- width() 와 height() 메서드는 게터와 세터를 모두 갖고 있습니다.
- 위쪽에서 게터 개념은 봤으니까 이제 세터개념을 보도록 할게요.
## 문법
//게터
$('문서객체선택').width();
$('문서객체선택').height();
//세터
$('문서객체선택').width(변경할수치);
$('문서객체선택').height(변경할수치);
## 코드 보기
- CSS에서 width와 height를 100px로 설정하고 5초뒤 300px로 둘다 변경하는 코드를 작성해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 문서객체 영역관련 메서드</title>
<style>
div{
width: 100px; height: 100px;
background-color: aquamarine;
text-align: center;
font-size: 50px;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//현재 너비를 텍스트로 처리
var w = $('div').width(); //게터
$('div').html(w);
//5초뒤 크기 변경
setTimeout(function(){
//세터
$('div').width(300);
$('div').height(300);
w = $('div').width(); //게터
$('div').html(w);
},5000);
});
</script>
</head>
<body>
<div></div>
</body>
</html>
## 결과 보기
- 시간이 지나자 크기가 300px로 잘 바뀌는 것을 확인할 수 있습니다.
'웹언어 > jQuery' 카테고리의 다른 글
| [jQuery강좌] 12강 시각효과메서드 - 오쌤의 니가스터디 (0) | 2022.08.22 |
|---|---|
| [jQuery강좌] 11강 제이쿼리 이벤트 관련 메서드 - 오쌤의 니가스터디 (0) | 2022.08.10 |
| [jQuery강좌] 9강 제이쿼리 CSS 조작 메서드 - 오쌤의 니가스터디 (0) | 2022.08.10 |
| [jQuery강좌] 8강 문서객체 추가/이동/복제/삭제 메서드 - 오쌤의 니가스터디 (0) | 2022.08.09 |
| [jQuery강좌] 7강 문서객체 HTML요소관련 메서드 - text(), html(), attr(), prop()메서드 (0) | 2022.08.08 |
