jQuery 문제풀이

해당 문제 풀이는 개인적으로 공부한 것을 올리는 글입니다.

 

배워가는 과정이다 보니 효율적이지 못하거나 잘못된 부분이 있을 수도 있습니다.

 

문제 1: 클릭 시 토글 슬라이드 업 및 다운

클릭 이벤트가 발생할 때 요소가 토글되도록 하는 슬라이드 업 및 다운 함수를 작성하세요. 요소가 보이지 않는 경우 클릭하면 요소가 나타나고, 요소가 보이는 경우 클릭하면 요소가 사라지게 해야 합니다.

 

HTML

<div class="toggle">이것은 토글됩니다.</div>

 

JAVASCRIPT

$(document).ready(function() {
  $('.toggle').click(function() {
    $(this).slideToggle('fast');
  });
});

---

문제 2: 모달 창 만들기

누르면 모달 창이 나타나는 버튼과 모달 창을 만드세요.

 

HTML

<button id="open-modal">모달 열기</button>
<div id="modal" style="display: none;">
  <div id="modal-content">
    <h2>모달 제목</h2>
    <p>모달 내용</p>
    <button id="close-modal">모달 닫기</button>
  </div>
</div>

 

CSS

#modal {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

#modal-content {
  background-color: #fff;
  width: 50%;
  margin: 100px auto;
  padding: 20px;
  text-align: center;
}

 

JAVASCRIPT

$(document).ready(function() {
  $('#open-modal').click(function() {
    $('#modal').fadeIn();
  });
  $('#close-modal').click(function() {
    $('#modal').fadeOut();
  });
});

---

문제 3: 이미지 슬라이드 쇼 만들기

이미지 슬라이드 쇼를 만드세요. 이미지는 3개 이상이어야 하며, 자동으로 전환되어야 합니다.

 

HTML

<div class="slideshow">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

 

CSS

.slideshow {
  position: relative;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

 

JAVASCRIPT

$(document).ready(function() {
  $('.slideshow img').eq(0).show();
  setInterval(function() {
    $('.slideshow img:first-child').fadeOut('slow')
      .next('img').fadeIn('slow')
      .end().appendTo('.slideshow');
  }, 3000);
});

 

이상입니다! 이 문제들을 풀면서 jQuery의 기본적인 기능을 익힐 수 있을 것입니다.