728x90
반응형
1. 자식-부모-형제 찾기
2. Box Model
3. Scroll
1. 자식-부모-형제 찾기
[ 자식 찾기 ]
- DOM 방식: childNodes, children
- jQuery 방식: children()
- 예제
See the Pen by yhyuk (@yhyuk) on CodePen.
[ 부모 찾기 ]
- DOM 방식: parentNode, parentElement
- jQuery 방식: parent(), parents()
- 예제
See the Pen 부모 찾기 예제 by yhyuk (@yhyuk) on CodePen.
[ 형제 찾기 ]
- DOM 방식: previousSibling, nextSibling
- jQuery 방식: prev(), next()
- 예제
See the Pen by yhyuk (@yhyuk) on CodePen.
2. Box Model
- jQuery에서 제공하는 메소드를 통해 Box Model(영역)의 크기에 대해서 알아 보자.
- 알아볼 box 크기 기본 셋팅
<style>
#box {
border: 10px solid black;
width: 200px; height: 200px;
padding: 20px;
margin: 15px;
background-color: gold;
}
</style>
<body>
<div id="box"></div>
</body>
[ 컨텐츠 영역의 크기 ]
console.log('width()', $('#box').width()); // width() 200
console.log('height()', $('#box').height()); // height() 200
[ 컨텐츠 영역 + padding 크기 ]
console.log('innerWidth()', $('#box').innerWidth()); // innerWidth() 240
console.log('innerHeight()', $('#box').innerHeight()); // innerHeight() 240
[ 컨텐츠 영역 + padding + border: 시각적인 실제 상자의 크기 ]
console.log('outerWidth()', $('#box').outerWidth()); // outerWidth() 260
console.log('outerHeight()', $('#box').outerHeight()); // outerHeight() 260
[ 컨텐츠 영역 + padding + border + margin: 실제 객체가 차지하는 크기 ]
console.log('outerWidth(true)', $('#box').outerWidth(true)); // outerWidth(true) 290
console.log('outerHeight(true)', $('#box').outerHeight(true)); // outerHeight(true) 290
3. Scroll
- 스크롤 이벤트
- DOM 방식: document.onscroll = function() {};
- jQuery 방식: $(document).scroll(function() {});
- 예제
See the Pen scroll 예제 by yhyuk (@yhyuk) on CodePen.
MEMO>
# 오늘 첫 jQuery를 배웠는데 아예 난생 처음 보는 문법 자체가 생소해서 굉장히 어지러웠다
# 라이브러리와 프레임워크의 차이점? -> 주제에 따라 다르지만, 자유도의 차이이다. 집으로 비유하면 라이브러리가 집 자체 라고 한다면, 프레임워크는 집 내부의 쇼파, TV, 컴퓨터 등 모든것을 다룰 수 있다.
# jQuery수업은 굉장히 짧게 한다고 한다. 하지만 jQuery API Document 홈페이지에 보면 수많은 메소드가 있는데 무식하게 다 공부하지말고 그때그때 필요한것만 찾아서 공부하는 습관을 드리자.
# 최근에 바빠서 못했던, W3School에도 jQuery에 대해 잘 나와있다. 주말이나 하루 날잡아서 하면 충분히 정독 할 수 있으니 하도록 합시다.
728x90
반응형
'교육 > jQuery' 카테고리의 다른 글
| jQuery 개발자 수업 69일차(2) - Effect, HTML 조작 (0) | 2021.07.05 |
|---|---|
| jQuery 개발자 수업 69일차(1) - jQuery, 선택자(Selector), 이벤트(Event) (0) | 2021.07.05 |
댓글