jQuery / 요소가 순서대로 나타나게 하는 방법

jQuery
Created 2020-01-28 Last Modified 2020-11-18

.animate()로 요소를 나타내기

다음과 같이 간단한 예제를 만듭니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      body { box-sizing: border-box; margin: 0px; }
      .jb { height: 200px; padding: 20px; text-align: center; color: #ffffff; }
      .jb-1 { background-color: #333333; }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        // jQuery Code
      } );
    </script>
  </head>
  <body>
    <div class="jb jb-1">Hello!</div>
  </body>
</html>

opacity의 값을 0으로 정하여 보이지 않게 합니다. 보이지 않을 뿐, 공간은 차지한 상태입니다.

.jb { height: 200px; padding: 20px; text-align: center; color: #ffffff; opacity: 0; }

jQuery의 .animate()를 이용하여 서서히 나타나게 만듭니다.

<script>
  $( document ).ready( function() {
    $( '.jb-1' ).animate( {
      opacity: '1'
    }, 1000 );
  } );
</script>

전체 코드는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      body { box-sizing: border-box; margin: 0px; }
      .jb { height: 200px; padding: 20px; text-align: center; color: #ffffff; opacity: 0; }
      .jb-1 { background-color: #333333; }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '.jb-1' ).animate( {
          opacity: '1'
        }, 1000 );
      } );
    </script>
  </head>
  <body>
    <div class="jb jb-1">Hello!</div>
  </body>
</html>

연달아 나타나게 하기

요소를 몇 개 더 만든 후 차례대로 나타나게 합니다.

하나의 요소가 나온 후 그 다음 요소가 나오게 하기 위해서 콜백 함수를 사용합니다.
시간 조절을 편하게 하기 위해서 jbTime이라는 변수를 만들었습니다. 그 값을 변경하면 나타나는 속도가 한 번에 바뀝니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      body { box-sizing: border-box; margin: 0px; }
      .jb { height: 200px; padding: 20px; text-align: center; color: #ffffff; opacity: 0; }
      .jb-1 { background-color: #333333; }
      .jb-2 { background-color: #444444; }
      .jb-3 { background-color: #222222; }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        var jbTime = 600;
        $( '.jb-1' ).animate( {
          opacity: '1'
        }, jbTime, function() {
          $( '.jb-2' ).animate( {
            opacity: '1'
          }, jbTime, function() {
            $( '.jb-3' ).animate( {
              opacity: '1'
            }, jbTime );
          } );
        } );
      } );
    </script>
  </head>
  <body>
    <div class="jb jb-1">Hello!</div>
    <div class="jb jb-2">Hello!</div>
    <div class="jb jb-3">Hello!</div>
  </body>
</html>

jQuery

jQuery / 천 단위 쉼표 만드는 방법

예제 1 텍스트로 출력된 숫자에 천 단위 쉼표를 넣는다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb' ).text( ...

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.text() .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다. 문법 1 .text() 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var jb = $( 'h1' ).text(); 는 h1 요소의 내용을 변수 jb에 저장합니다. 문법 2 .text( textString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h1>Lorem</h1>' ); 는 div ...

jQuery / Method / .insertAfter() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.insertAfter()는 특정 요소 뒤에 요소를 추가 또는 이동한다. 문법 h1 요소 뒤에 <p>World</p>를 추가한다. $( '<p>World</p>' ).insertAfter( 'h1' ); h1 요소 뒤로 p 요소를 이동한다. $( 'p' ).insertAfter( 'h1' ); 예제 1 h1 요소 뒤에 <p>World</p>를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

.not() .not()은 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. 문법 .not( selector ) 예를 들어 $( 'p' ).not( 'p.abc' ).css( 'color', 'green'); 은 p 요소 중 abc를 클래스 값으로 가지지 않은 것을 선택합니다. 예제 버튼을 클릭하면 클래스 값으로 ip를 갖지 않는 li 요소의 내용을 빨간색으로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

.empty() .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는 .remove()를 사용합니다. 문법 .empty() 예를 들어 <h1>Lorem</h1> 일 때 $( 'h1' ).empty() 를 하면 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

상단 고정 메뉴 웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

.appendTo() .appendTo()는 선택한 요소를 다른 요소 안에 넣습니다. 문법 .appendTo( target ) 예를 들어 $( 'p' ).appendTo( 'blockquote' ); 는 p 요소를 blockquote 요소 안으로 이동시킵니다. 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소 안으로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

HTML 문서와 연결하기 CDN 이용하기 HTML 문서에 다음 코드를 추가합니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> 3.3.1은 버전입니다. 다른 버전을 사용하고 싶다면 숫자를 변경합니다. 다운로드 받아 연결하기 jQuery 다운로드는 여기에서 합니다. 압축된 파일도 있고, 압축되지 않은 파일도 있습니다. 그리고 HTML 문서에 다음 코드를 추가합니다. <script src="path/jquery-3.3.1.min.js"></script> path와 파일 이름은 적절히 변경합니다. jQuery 사용하기 다음은 ID가 jb인 h1 요소의 색을 빨간색으로 바꾸는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...

jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

개요 .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다. 문법 문법은 다음과 같다. .after( content ) 예를 들어 다음은 h1 요소 뒤에 Hello를 내용으로 갖는 p 요소를 추가한다. $( 'h1' ).after( '<p>Hello</p>' ); 다음은 클래스 값으로 a를 갖는 h1 요소 뒤에 클래스 값으로 b를 갖는 p 요소를 이동시킨다. $( 'h1.a' ...

jQuery / Plugin / slick / 슬라이더 플러그인

slick은 jQuery 기반의 슬라이더 플러그인입니다. 홈페이지 : https://kenwheeler.github.io/slick/ GitHub : https://github.com/kenwheeler/slick/ 기본 사용법 jQuery, slick.css, slick-theme.css, slick.min.js를 연결합니다. 아래는 CDN을 이용하여 연결하는 코드입니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> 아래와 같은 형식으로 마크업합니다. 클래스 값 slider는 변경해도 됩니다. <div class="slider"> <div><img src="images/slider-1920x1080-01.png" alt=""></div> <div><img src="images/slider-1920x1080-02.png" alt=""></div> <div><img src="images/slider-1920x1080-03.png" alt=""></div> <div><img src="images/slider-1920x1080-04.png" alt=""></div> ...