.append() 메소드(method)를 사용하면 각 요소의 마지막 자식(last child) 항목으로 지정한 콘텐츠를 추가하고 .prepend() 메소드를 사용하면 첫 번째 자식 항목(first child) 항목으로 추가합니다. 예를 들어, 다음과 같은 HTML이 있는 경우: <div class="container"> <div class="inner">안녕하세요.</div> <div class="inner">안녕히 계세요.</div> </div> 다음과 같은 ...
![[javascript] 웹 브라우저의 현재 URL 가져오기 2](https://www.thewordcracker.com/wp-content/uploads/2016/01/javascript-get-the-current-url.png)
현재 웹 페이지의 전체 URL을 가져와서 변수로 지정하려는 경우 다음 스크립트를 사용할 수 있습니다. window.location.href JavaScript Window Location 참고: window.location.href - 현재 페이지의 href (URL) 반환 window.location.hostname - 웹 호스트의 도메인 네임 반환 window.location.pathname - 현재 ...
![[jQuery] 여러 개의 $(document).ready(function(){ … }); 사용 3](https://www.thewordcracker.com/wp-content/uploads/2016/01/multiple-document-ready-in-jquery.png)
$(document).ready()는 여러 번 사용이 가능합니다. 아래와 같이 두 가지 형식으로 두 개 이상을 사용할 수 있습니다. 다만 가독성에 문제가 있을 수 있으니 남용해서는 좋지 않겠죠? $(document).ready(function() { alert('홍길동님, 안녕하세요?'); }); $(document).ready(function() { alert('철수님, 안녕하세요?'); }); ...
![[jQuery] 모든 체크박스가 선택되었는지 확인하기 4](https://www.thewordcracker.com/wp-content/uploads/2016/01/jQuery-to-check-if-all-checkboxes-are-selected.png)
가령 class="abc" 요소를 가진 체크박스가 모두 선택되었는지 확인하는 방법입니다. 간단한 방법으로 다음 조건을 확인하는 것입니다. $('.abc:checked').length == $('.abc').length 다음과 같은 스크립트를 사용합니다. $(".abc").change(function(){ if ($('.abc:checked').length == $('.abc').length) { // 사용자 스크립트 } }); // Source: stackoverflow 또는, 다음과 ...
jQuery를 사용하여 픽셀(pixel)로 된 너비(Width) 값을 가져오기 var width = $('#mydivid').width(); jQuery를 사용하여 DIV의 폭 설정하기 $("#mydivid").css("width", "100px"); 100px 대신 원하는 너비 값으로 대체하도록 합니다. 자바스크립를 사용하여 너비 값 가져오기 document.getElementById("mydivid").offsetWidth;
jQuery를 사용하여 DIV를 화면 중앙(가운데)에 정렬하려면 다음 jQuery 스크립트를 사용할 수 있습니다. jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px"); this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / ...
![[Javascript] 자바스크립트 특수문자 코드 목록 6](https://www.thewordcracker.com/wp-content/uploads/2015/11/javascript-new-line.png)
예를 들어 자바스크립트(javascript) 경고(alert) 상자에 표시되는 텍스트에 줄나누기(new line)를 추가하려면 \n을 사용할 수 있습니다. alert("첫 번째 라인\n두 번째 라인"); 혹은 alert('첫 번째 라인\\n\\n두 번째 라인'); 주의: \n은 작은 따옴표일 경우 제대로 작동하지 않습니다. 다음과 같은 ...
특정 DIV를 5초마다 자동으로 새로 리로드하는 것과 같이 DIV를 새로 고침하는 javascript 스크립트 예제입니다. 다음 스크립트를 사용하면 실시간으로 예약 상황을 업데이트하거나, 실시간으로 채팅 메시지를 새로 고침하는 등의 기능을 구현할 수 있습니다. <script langauge="javascript"> var counter = 0; ...
![두 번째 태그로 CSS 설정[jQuery 예제] 7](https://www.thewordcracker.com/wp-content/uploads/2015/11/jQuery-to-select-the-nth-element.png)
$("div").eq(n).css()를 사용하여 "n-1"번째 요소의 CSS 스타일을 설정합니다. .eq() 선택자(selector)는 특정 인덱스 번호로 된 요소(element)를 선택하는 데 사용됩니다. 인덱스 번호는 0부터 시작됩니다. 그러므로 첫 번째 요소의 인덱스 번호는 "0"이 됩니다. 두 번째 요소를 선택하려면 ".eq(1)"을 사용합니다. ...
일부 워드프레스 테마에서 마우스를 아래로 스크롤할 때 컨텐츠 영역이 슬라이드 위로 올라가는 효과를 구현하는 경우를 본 적이 있을 것입니다. 이런 효과를 Parallax 스크롤링이라고 합니다. 가령 Salient라는 인기 있는 워드프레스 테마의 데모 페이지에서 전면 페이지에 슬라이드가 풀 페이지로 나오고, ...