jQuery(수치 조작 메소드)

여러분 안녕하세요 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(수치 조작 메소드)를 배웠습니다. 오늘은 jQuery(수치 조작 메소드)을 공부해보려고 합니다.

 

수치 조작 메소드

수치 조작 메소드는 요소의 속성을 조작할 때 사용하는 메소드 입니다.

 

요소의 높이 / 너비 메소드

height()와 width() 메소드는 여백 및 선 두께를 제외한 순수 요소의 높이값과 너비값을 계산합니다.

innerHeight()와 innerHeight()와 innerWidth() 메소드는 여백을 포함한 요소의 높이값과 너비값을 계산합니다.

 

outerHeight()와 outerWidth() 메소드는 여백 및 선을 포함한 요소의 높이값과 너비값을 계산합니다.

 

기본형

 

 

코딩해보기

요소 위치 메소드

요소 위치 메소드에는 position() 메소드와 offset() 메소드가 있습니다.  position() 메소드는 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로로 떨어진 위치의 좌표값을 반환하거나 변경할 때 사용합니다. offset() 메소드는 문서(Document)를 기준으로 선택한 요소의 가로/세로로 떨어진 위치의 좌표값을 반환하거나 변경할 때 사용합니다.

 

기본형

 

 

코딩해보기

 

 

스크롤바 위치 메소드

scrollTop() 메소드는 브라우저의 스크롤바가 수직/수평으로 이동한 위치값을 불러오거나 변경할 때 사용합니다. 

 

기본형

 

 

코딩해보기

 

 

객체 편집 메소드

지금까지는 요소 속성 관련 메소드와 수치 속성 관련 메소드를 살펴봤습니다. 이번에는 선택한 요소를 복제하거나 새 요소를 생성하는 메소드와 복제하거나 새로 생성한 요소를 의도한 위치에 삽입하고 선택한 요소를 삭제하는 기능의 종류만 간단하게 기본형만 확인하고 마무리 짓도록 하겠습니다

 

 

 

이렇게 해서 jQuery(수치 조작 메소드)외 다른 메소드를 모두 다 정리했습니다. 수고 많으셨습니다. 특히 제이쿼리 파트는 Javascript 기초보다 훨씬 더 예제를 많이 드리는 느낌이네요. 그런데 어쩔 수가 없어요.. 기본형만 알고 넘어가면 제이쿼리 부분에서는 응용을 하는 부분이 많이 있기 때문에 이렇게 예제가 없이 기본형만 냅다 드리면 글의 퀄리티는 떨어질 뿐만 아니라 그냥 보는 사람 입장에선 이해를 못해요...

 

위에 있는 객체 편집 메소드도 자세하게 설명을 드려야 되지만 충분히 많은 예제를 보여드렸고 나중에 책으로 공부하시면서 어? 이거 저번에 어떤 블로그에서 봤었던 거 같은데 이렇게 응용하는 거구나~라고 생각하게끔 하도록 하기 위해서 그냥 기본형만 올리고 가볍게 보시는 마음으로 드린 겁니다.  정말 수고 많으셨고 앞으로도 더 열심히 하는 포돌이가 되겠습니다.

 

19살 IT 개발자 포돌이였습니다.


-Coding is an Art-

코딩을 예술이라 생각하는 사람