[jQuery] 페이지 로드 시 특정 DIV로 스크롤시키는 방법
페이지 로드 시 특정 DIV 또는 앵커(anchor) 위치로 스크롤되도록 해야 하는 상황이 있습니다. 그런 경우 간단한 jQuery로 쉽게 특정 위치로 이동되도록 할 수 있습니다. 페이지 로드 시 특정 DIV로 스크롤시키는 방법(jQuery) 페이지 로드 시 특정 ...
페이지 로드 시 특정 DIV 또는 앵커(anchor) 위치로 스크롤되도록 해야 하는 상황이 있습니다. 그런 경우 간단한 jQuery로 쉽게 특정 위치로 이동되도록 할 수 있습니다. 페이지 로드 시 특정 DIV로 스크롤시키는 방법(jQuery) 페이지 로드 시 특정 ...
링크를 새로운 창이나 탭에서 실행되도록 하려면 html 태그에서 target="_blank"를 추가해야 합니다. 직접 소스를 수정하지 않으려면 jQuery를 사용할 수 있습니다. 먼저는 attr 메소드를 사용하여 target="_blank"를 추가하는 방법을 생각해볼 수 있습니다. $(document).ready(function(){ $("a[href^='http']").attr('target','_blank'); }); 위와 같이 사용하면 모든 ...
크롬이나 Internet Explorer에서 오른쪽 버튼을 눌러 인쇄할 때 특정 DIV 요소 내의 컨텐츠만을 인쇄하기를 원할 수 있습니다. 이 경우에 자바스크립트나 jQuery를 사용하여 쉽게 해결할 수 있습니다. 여러 가지 javascript/jQuery 스크립트로 테스트하여 다음 코드가 제대로 작동하는 것을 확인했습니다. ...
jQuery를 사용하여 텍스트에 하이퍼링크(hyperlink)를 적용하는 예시입니다. jQuery를 사용하여 텍스트에 하이퍼링크(hyperlink) 적용하기 jQuery로 텍스트에 하이퍼링크(hyperlink)를 적용하려면 메소드를 사용합니다. 가령 다음과 같은 스크립트의 경우: $("button").click(function(){ $("p").wrap("<div></div>"); }); // Source: w3schools 각 요소 부분을 요소로 둘러싸게 됩니다. 이것을 ...
하위 DIV(Child DIV)를 페이지 너비에 맞게 확장시키는 방법에 대해 간략히 살펴봅니다. 예를 들어 다음과 같은 HTML 코드가 있을 때, <div class="container" style="width: 960px"> <div class="child_div" style="width: 100%; margin: 0 auto;"> 내용 </div> </div> 창 너비가 ...
위의 그림은 워드프레스 Attitude 테마의 전면 페이지에 표시되는 블로그(최신 글)을 2 컬럼 형식의 그리드로 배열한 모습니다. 이런 모양으로 만드는 방법은 다양하며, 이 블로그의 다른 글에서도 다루고 있습니다. 단순히 CSS로 조정하는 것도 가능하지만 그럴 경우 여백 문제 ...
워드프레스의 우커머스 장바구니(Cart) 페이지에 "쇼핑 계속하기" 버튼을 추가하는 방법은 이 글에서 다루고 있습니다. 이 글에서는 개별 상품 페이지에 "쇼핑 계속하기" 버튼을 추가하는 방법을 살펴보겠습니다. 여러 가지 방법을 생각해볼 수 있을 것 같습니다. 먼저 필터, 액션 후크를 사용하는 ...
이전 글에서 Twenty Sixteen 테마의 블로그 페이지 또는 전면 페이지에 전체 글 내용 대신 요약문 표시하는 방법을 살펴보았습니다. 이전 글에서는 일반적인 방법으로 테마 소스를 수정하는 방법을 소개했습니다. 동일한 방법을 Twenty Fifteen 테마에도 적용하여 전면 페이지(홈페이지) 또는 ...
이 글에서는 CSS를 사용하여 텍스트를 다른 문구로 바꾸는 방법을 살펴보았습니다. CSS 대신 jQuery를 사용하면 보다 수월하게 텍스트를 원하는 대로 바꿀 수 있습니다. jQuery를 사용하여 텍스트 변경하는 방법 다음과 같은 스크립트를 사용하면 해당 선택자의 텍스트 컨텐츠를 설정하게 됩니다. ...
jQuery를 사용하여 DIV 요소의 위치를 바꾸고 싶은 경우 참고해보세요. jQuery를 사용하여 요소(DIV) 위치 바꾸기 jQuery 샘플 1 예를 들어 다음과 같이 세 개의 항목이 있을 경우 HTML/PHP 소스 코드를 수정하지 않고 첫 번째 DIV 항목을 두 번째 DIV 항목 ...