앵커(anchor) 링크로 페이지 내에서 스크롤하도록 링크를 만든 경우, 링크를 클릭할 때 부드럽게 스크롤되도록 하려면 다음과 같은 jQuery 스크립트를 사용할 수 있습니다. $('a').click(function(){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); return false; }); // ...
링크 URL 변경하기 링크 URL을 다른 URL 주소로 변경하는 작업은 매우 간단한 작업으로 .attr 메소드의 사용으로 가능합니다(.attr 메소드에 대한 자세한 내용은 여기 참고). $(document).ready(function() { $('.example a').attr('href','http://www.example.com/contat'); }); // 참고: www.ronvangorp.com 응용 태그에서 링크를 직접 ...
특정 이미지 위에 다른 이미지를 오버레이시키는 방법입니다. 다음과 같은 jQuery 코드를 사용하여 특정 요소의 이미지 위에 다른 이미지를 겹치게 배치할 수 있습니다. $('.target').before('<img src="이미지 URL" class="overlay" />'); 이때 CSS에서 를 사용합니다. 샘플: HTML 샘플 <img ...
CSS를 사용하여 링크 비활성화하기 CSS를 사용하여 링크를 비활성화하는 방법입니다. 요소명 { pointer-events: none; cursor: default; } pointer-events에 대한 자세한 내용은 여기를 참고해보시기 바랍니다. 이 방법을 사용하면 소스를 수정하지 않고도 원하는 요소(element)가 포함된 링크를 비활성화할 수 ...
글의 URL을 쉽게 복사하여 공유할 수 있도록 아이콘을 누르면 팝업 창이 뜨면서 해당 글의 URL 주소를 복사하여 다른 곳에 붙여넣도록 만들고 싶은 경우에 다음과 같은 javascript 함수를 사용할 수 있습니다. window.copyURL = function(){ prompt("[Ctrl + ...
예를 들어, 폼(form)에서 사용자 이름의 유효성을 검사하는 함수와 이메일의 유효성을 검사하는 함수를 별개로 만든 경우, 양식 제출 시에 두 개의 유효성 검사 함수를 동시에 불러오는 경우를 생각해볼 수 있습니다. 이런 경우 여러 가지 방법을 사용할 ...
이 글에서 javascript를 사용하여 이메일 유효성 검사를 수행하는 방법을 살펴보았습니다. 이 글에서는 jQuery를 사용한 이메일 유효성 검사 방법을 살펴보겠습니다. 마찬가지로 여러 가지 방법이 있을 수 있습니다. (Source: jquerybyexample) validateEmail()은 이메일 주소를 파라미터로 받아서 정규표현식(Regular Expression)을 ...
다양한 방법으로 이메일 유효성을 검사할 수 있습니다. 가장 간단한 것은 HTML5에 내장된 이메일 유효성 검사(email validation) 기능을 활용하는 것입니다. 이메일 필드에 type="text" 대신 type="email"을 사용하면 됩니다. <input type="email" name="email"> 이 방법은 form 태그 안에 위치해야 하고 submit을 눌러야 ...
예를 들어, 특정 요소의 div를 클릭했을 때 원래 div를 숨기고 다른 div를 표시해야 하는 경우가 있을 수 있습니다. 이 경우에 사용할 수 있는 jQuery 예제를 소개합니다. 원리는 처음 로드할 때에는 첫 번째 div를 표시하고, 두 ...
예를 들어 다음과 같은 상황에서 Div 전체를 클릭 가능하도록 하여 클릭할 경우 지정된 URL로 이동하도록 만들어야 하는 경우가 있습니다. <div class="clickable" url="http://google.com"> 내용 </div> 이 경우 다음과 같은 jQuery 스크립트를 사용할 수 있습니다. $("div.clickable").click( function() ...
