.wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

jQuery

.wrap()

.wrap()은 선택한 요소를 원하는 태그로 감쌉니다.

문법

.wrap( wrappingElement )

예를 들어

$( 'p' ).wrap( '<div></div>' );

는 p 요소를 div로 감쌉니다. class나 id 값을 추가할 수도 있습니다.

$( 'p' ).wrap( '<div id="ab" class="cd"></div>' );

여러 태그로 감쌀 수도 있습니다.

$( 'p' ).wrap( '<div><strong></strong></div>' );

예제

클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다.

<!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() {
        $( 'p.a' ).wrap( $( '<blockquote></blockquote>' ) );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem ipsum dolor.</h1>
    <p>Hello World!</p>
    <p class="a">Goodbye World!</p>
  </body>
</html>

참고

여러 요소를 한번에 감쌀 때는 .wrapAll()을 사용합니다.
선택한 요소의 상위 태그를 제거할 때는 .unwrap()을 사용합니다.

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

.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: ...

jQuery / Plugin / AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리

AOS 세로로 긴 웹 페이지가 있습니다. 화면을 벗어나는 경우 스크롤하면 밑에 있는 콘텐츠를 볼 수 있습니다. 그 보여지는 콘텐츠에 애니메이션 효과를 주는 라이브러리가 AOS(Animate on scroll library)입니다. 나타나기, 회전하기, 확대하기 등 다양한 효과를 제공합니다. Fade animations fade, fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left Flip animations flip-up, flip-down, flip-left, flip-right Slide animations slide-up, slide-down, slide-left, slide-right Zoom animations zoom-in, ...

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

bxSlider는 jQuery 기반의 슬라이더 플러그인입니다. 홈페이지 : https://bxslider.com/ GitHub : https://github.com/stevenwanderski/bxslider-4 홈페이지의 예제는 단순하지만, 옵션을 이용하여 다양한 활용이 가능합니다. 기본 사용법 jQuery, jquery.bxslider.min.js, jquery.bxslider.css를 연결합니다. 다음은 CDN을 이용하여 연결하는 코드입니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> 다음과 같은 형식으로 마크업합니다. 클래스 값인 slider는 변경해도 됩니다. <div class="slider"> <div><img src="images/slider-01.jpg" alt=""></div> <div><img src="images/slider-02.jpg" alt=""></div> <div><img src="images/slider-03.jpg" alt=""></div> <div><img ...

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. 목차 클릭 시 해당 위치로 부드럽게 이동(smooth scroll)하는 기능을 포함합니다. GitHub : https://github.com/jakobbossek/jquery.toc Download : https://github.com/jakobbossek/jquery.toc/archive/master.zip 기본 사용법 h 태그가 많은 HTML 문서를 만듭니다. 다음 코드를 추가하여 jQuery와 jquery.toc.js를 연결합니다. 보통 </head> 위나 </body> 위에 넣습니다. jquery.toc.js의 경로는 적절히 수정하세요. <script src="//code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/jquery.toc.js"></script> 다음 ...

jQuery / Plugin / jQuery Smooth Scroll

jQuery Smooth Scroll jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다. GitHub : https://github.com/kswedberg/jquery-smooth-scroll Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip 기본 사용법 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } p { margin-bottom: 800px; } </style> </head> <body> <ul> <li><a href="#ipsum">Ipsum</a></li> <li><a href="#dolor">Dolor</a></li> </ul> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, ...

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> ...

jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인

컴퓨터 사양이 좋아지고 네트워크 속도가 빨라지면서, 홈페이지의 배경으로 동영상을 사용하는 곳이 많아지고 있습니다. 동영상을 배경으로 사용하는 방법은, 서버에 동영상을 올려놓고 video 태그로 넣는 방법과 유튜브에 업로드하고 불러오는 방법이 있습니다. 유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이 있는데, 영상 제목이나 콘트롤 바, 공유 등 불필요한 내용까지 보여준다는 단점도 있습니다. 그 단점을 ...

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 플러그인을 사용하세요. 기본 사용법 h 태그가 많은 다음과 같은 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } </style> </head> <body> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing ...

jQuery / 체크박스 모두 선택, 모두 선택 해제 만들기

<!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() { $( '.check-all' ).click( function() { ...

jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

.slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...

CODING FACTORY

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

.wrap()

문법

예제

참고

Related Posts