본문 바로가기

Internet World/JS

[jQuery] CDN : Contents Delivery Network for jQuery (제이쿼리 코드 서버) - 라이브러리를 불러와 사용하는 법 jQuery는 정말 좋은 라이브러리 같습니다. 위의 그림에서 볼 수 있듯이 작은 용랼으로 CSS3를 준수하고 크로스브라우징을 거의 완벽하게 구현해줍니다. CSS 스타일링을 비롯해 약간의 애니메이션까지 구현할 수 있으니 정말 금상첨화 입니다. 일단 이러한 jQuery를 사용하기 위에서는 문서상단에 이 라이브러리를 불러와야 하는데요. 물론 파일을 받아서 자신이 사용하고자 하는 서버에 올려 사용할 수도 있지만. CDN(Contents Delivery Network)이란게 있더라구요. 그래서 오늘은 jQuery CDN Host 에 대해 알아볼까 합니다. 1. jQuery CDN http://code.jquery.com/jquery-1.4.2.min.js (Minified version) http://code.j.. 더보기
[jQuery] jQuery를 이용한 자주묻는질문(FAQ) jQuery를 이용하여 자주묻는질문(FAQ)를 동적으로 구성하여 보았습니다. 마크업을 할 때는 항상 어떤 앨리먼트로 마크업을 할까 하는 고민을 하게 되는데, 딱히 완벽한 정답은 없는 것 같습니다. 이번에는 definition list 를 사용해보았습니다. 의미를 따져보면 이런 의미인데 괜찮지 않을까요? 그렇게 해서 에 질문을, 에 답변을 해서 마크업을 했습니다. 그리고 jQuery의 sildeDown() 을 이용하여 보여지는 것을 나타냈습니다. 더보기
[jQuery] jQuery를 이용한 이미지의 마우스 오버 작업을 하다보면 이미지에 마우스오버 효과를 줘야 할 때가 많은데, 일일히 onmouseover 와 onmouseout 을 써서 따로 지정해주는 것도 참 일이다. 일단 코드가 길어져서 가독성에 떨어지게 되고 파일의 갯수가 많다면,,, 음,,, 용량도 커지지 않을까? 그리고 따로 파일마다 id 를 준다거나 각각 함수를 만들어서 사용하는 것도 정말 번거로운 일이다. 이 모든 것을 jQuery가 해결해주는 듯 싶다. 사용법을 이야기 해볼까? 우선 jQuery 를 로드해야 한다. 그 다음에는 아래의 코드를 모든 페이지에서 동작하게 한다. 이미지의 네이밍을 잘 해야 하는데,, 파일명 맨 뒤에 _(언더바)를 붙이고 오버되었을때 "on" 아웃되었을 때 "off" 라고 해서 이름을 설정해야 한다. 예를 들자면, imag.. 더보기
[javascript] 마우스 클릭한 위치 window.event.clientX window.event.clientY 더보기
[jQuery] 영역의 크기 구하기 동적인 UI 구성하기 위하여, 엘리먼트 영역의 크기를 구하는 과정이 반드시 필요하다. Javascript 에서는 clientHeight, offsetHeight 등을 사용하였지만 jQuery에서는 또 다르다. $("element").outerHeight(); 위와 같이 작성하면 엘리먼트 영역의 높이를 구할 수 있다. 넓이 또한 마찬가지로 outerWidth()를 이용하면 된다. 혹시나 margin을 포함한 영역의 크기를 구하고 싶다면, 간단한 작업으로 가능하다. $("element").outerHeight(true); outerHeight()의 괄호 안에 true라는 값을 주면 margin을 포함한 영역의 크기를 구할 수 있게 된다. 참고적으로 outerHeight()를 쓰지 않고 그냥 height()를.. 더보기
[Javascript] offsetHeight, cilentHeight, scrollHeight 의 비교 1. element.offsetHeight, element.offsetWidth - W3C 권고안이 아님 (MSIE's DHTML Object Moldel) - element 의 border. 수직/수평 padding. css width 를 포함한 너비 or 높이 (즉, 화면을 봤을 때 보여지는 엘리먼트의 크기) 2. element.clientHeight, element.clientWidth - W3C 표준 아님 (MSIE's DHTML Object Moldel) - element 의 border 를 뺀 안쪽의 너비 or 높이 (즉, 화면에서 테두리를 뺀 엘리먼트의 안쪽의 크기) 3. element.scrollHeight, element.scrollWidth - W3C 권고안 아님 (MSIE's DHTM.. 더보기
반응형

티스토리툴바