jQuery를 사용한 기본적인 이미지 롤오버(Rollover) 효과

jQuery를 사용한 기본적인 이미지 롤오버(Rollover) 효과

마우스를 올렸을 때 이미지가 바뀌는 기본적인 JQuery 기반의 이미지 롤오버(Rollover) 효과를 구현하는 방법입니다. 동일한 크기의 이미지 두 개를 준비합니다. 마우스를 올리면 원래 표시되던 이미지가 페이드 아웃(Fade out)되고 다른 이미지가 페이드 인(Fade in)되고, 마우스가 그림 영역을 벗어나면 본래 이미지가 다시 표시되도록 할려고 합니다. 다음과 같은 코드를 원하는 곳에 추가합니다. <img src="before.jpg"...
[jQuery] 모든 target=’_blank’ 제거하기

[jQuery] 모든 target=’_blank’ 제거하기

블로그 글을 작성하면서 링크는 내부 링크든 외부 링크든 모두 새로운 창에서 열리도록 target=”_blank” 속성을 추가한 상태입니다. 하지만 외부 링크는 새로운 창에서 열리도록 하면서 내부 링크의 경우 새로운 창에서 열리는 것보다 같은 창에서 열리도록 하는 것이 더 좋을 것 같다는 생각이 들었습니다. 그러나 이때까지 작성한 글을 모두 수정하는 것은 거의 불가능에 가깝습니다. 글이 몇 개 없으면 수동으로 일일이 수정하면 되겠지만 현재 글이 1600개...
jQuery를 사용하여 DIV를 랜덤하게 표시하기

jQuery를 사용하여 DIV를 랜덤하게 표시하기

예를 들어, 다음과 같은 HTML 코드가 있을 경우 jQuery를 사용하여 DIV 요소를 랜덤하게 표시할 수 있습니다. <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> 간단하게는 다음과 같은 스크립트를 사용할 수 있습니다. var random =...
[jQuery] 동일 페이지 내에서 부드럽게 스크롤시키기

[jQuery] 동일 페이지 내에서 부드럽게 스크롤시키기

동일 페이지 내에서 링크를 클릭했을 때 부드럽게 스크롤되도록 하려면 다음 jQuery 스크립트를 사용할 수 있습니다. $(function() { $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target...
jQuery를 사용하여 링크를 새 창에서 열기

jQuery를 사용하여 링크를 새 창에서 열기

특정 링크(예: 단일 링크, 모든 외부 링크 등)를 클릭했을 때 새 창에서 열리도록 하고 싶은 경우가 있을 수 있습니다. 이런 경우 HTML 소스에서 target=”_blank”를 삽입하면 쉽게 해결되겠지만 소스 코드를 수정할 수 없는 경우에는 어떻게 하면 좋을까요? 한 가지 방법으로 jQuery를 사용하여 target에 “_blank” 속성을 지정해줄 수 있습니다. $("a").attr("target", "_blank"); 위와...