JQ 13~21강 개념 - 제이쿼리

13강 - 팝업 구현,  팝업 2개

문제

문제 - 팝업 구현, 팝업 2개

문제 - 정답예시

문제 - 정답

[HTML]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="popup popup-1">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업 1
      </div>
    </div>
  </div>
</div>

<div class="popup popup-2">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업 2
      </div>
    </div>
  </div>
</div>

<section class="section-1">
  <div class="con">
    <button class="btn-popup-1">팝업 1</button>
    <button class="btn-popup-2">팝업 2</button>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique magnam exercitationem fuga, odio laboriosam iste saepe, tempore eum harum itaque esse suscipit corrupti quae dolor nobis provident. Cumque, ex nemo.
    Vel quasi, aspernatur unde repellendus natus numquam ad nulla voluptatem voluptatum! Eligendi voluptatum perferendis totam. Iusto odio molestiae itaque ut. Atque possimus animi porro debitis fuga doloribus soluta provident nesciunt.
.

.

.    Optio, error sed. Tempora hic expedita dolores! Blanditiis consequuntur, delectus soluta quis rem minus, harum debitis aliquid officia, reprehenderit sed odio dolores ipsam placeat quia doloremque natus non repellat illo.
    Voluptatibus ratione quidem fugiat exercitationem quis voluptas cum deleniti ullam repudiandae tempora ex id delectus pariatur, quae libero inventore sit, ea saepe repellat dolore itaque consequatur, illo illum vitae! Illum.
  </div>
</section>

 

[CSS]

body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

.con {
  margin-left:auto;
  margin-right:auto;
}

.con {
  max-width:1200px;
}

.popup {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  align-items:center;
  justify-content:center;
  display:flex;
  opacity:0;
  visibility:hidden;
  transition: opacity .3s, visibility .3s;
}

.popup.active {
  opacity:1;
  visibility:visible;
}

.popup__content {
  min-width:200px;
  min-height:200px;
  background-color:white;
  border:2px solid black;
  transform:translateY(-100%);
  transition: transform .3s;
}

.popup.active .popup__content {
  transform:translateY(0);
}

.popup__head {
  padding:10px;
}

.popup__btn-close {
  width:30px;
  height:30px;
  margin-left:auto;
  position:relative;
  cursor:pointer;
  transition:transform 0.3s;
}

.popup__btn-close:hover {
  transform:rotate(185deg);
}

.popup__btn-close::before,
.popup__btn-close::after {
  content:"";
  background-color:black;
  position:absolute;
  top:40%;
  left:0;
  width:100%;
  height:20%;
  transform:rotate(45deg);
  transition:box-shadow 0.3s;
}

.popup__btn-close::after {
  transform:rotate(-45deg);
}

.popup__btn-close:hover::before,
.popup__btn-close:hover::after {
  box-shadow:0 0 3px black;
}

.popup__body {
  padding:0 10px;
}

 

[JS]

console.clear();
// 1번 팝업
$('.btn-popup-1').click(function() {
  $('.popup-1').addClass('active');
});

$('.popup-1 .popup__btn-close').click(function() {
  $('.popup-1').removeClass('active');
});
// 2번 팝업
$('.btn-popup-2').click(function() {
  $('.popup-2').addClass('active');
});

$('.popup-2 .popup__btn-close').click(function() {
  $('.popup-2').removeClass('active');
});

 

동영상

2602, JS, jQuery, 팝업 구현, 팝업 2개

14강 - 팝업 구현, 팝업 2개, 함수 1개로 (init 함수 사용)

 

문제

문제 - 팝업 구현, 팝업 2개, 함수 1개로

문제 - 정답예시

문제 - 정답, 작업 1

문제 - 정답, 작업 2

 

[HTML]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="popup popup-1">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업 1
      </div>
    </div>
  </div>
</div>

<div class="popup popup-2">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업 2
      </div>
    </div>
  </div>
</div>

<section class="section-1">
  <div class="con">
    <button class="btn-popup-1">팝업 1</button>
    <button class="btn-popup-2">팝업 2</button>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique magnam exercitationem fuga, odio laboriosam iste saepe, tempore eum harum itaque esse suscipit corrupti quae dolor nobis provident. Cumque, ex nemo.
    Vel quasi, aspernatur unde repellendus natus numquam ad nulla voluptatem voluptatum! Eligendi voluptatum perferendis totam. Iusto odio molestiae itaque ut. Atque possimus animi porro debitis fuga doloribus soluta provident nesciunt.
.

.

.    Optio, error sed. Tempora hic expedita dolores! Blanditiis consequuntur, delectus soluta quis rem minus, harum debitis aliquid officia, reprehenderit sed odio dolores ipsam placeat quia doloremque natus non repellat illo.
    Voluptatibus ratione quidem fugiat exercitationem quis voluptas cum deleniti ullam repudiandae tempora ex id delectus pariatur, quae libero inventore sit, ea saepe repellat dolore itaque consequatur, illo illum vitae! Illum.
  </div>
</section>

 

[CSS]

body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

.con {
  margin-left:auto;
  margin-right:auto;
}

.con {
  max-width:1200px;
}

.popup {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  align-items:center;
  justify-content:center;
  display:flex;
  opacity:0;
  visibility:hidden;
  transition: opacity .3s, visibility .3s;
}

.popup.active {
  opacity:1;
  visibility:visible;
}

.popup__content {
  min-width:200px;
  min-height:200px;
  background-color:white;
  border:2px solid black;
  transform:translateY(-100%);
  transition: transform .3s;
}

.popup.active .popup__content {
  transform:translateY(0);
}

.popup__head {
  padding:10px;
}

.popup__btn-close {
  width:30px;
  height:30px;
  margin-left:auto;
  position:relative;
  cursor:pointer;
  transition:transform 0.3s;
}

.popup__btn-close:hover {
  transform:rotate(185deg);
}

.popup__btn-close::before,
.popup__btn-close::after {
  content:"";
  background-color:black;
  position:absolute;
  top:40%;
  left:0;
  width:100%;
  height:20%;
  transform:rotate(45deg);
  transition:box-shadow 0.3s;
}

.popup__btn-close::after {
  transform:rotate(-45deg);
}

.popup__btn-close:hover::before,
.popup__btn-close:hover::after {
  box-shadow:0 0 3px black;
}

.popup__body {
  padding:0 10px;
}

 

[JS]

console.clear();
// 매개변수
function Popup__init(no) {
  $('.btn-popup-'+ no).click(function() {
    $('.popup-'+ no).addClass('active');
  });
  $('.popup-'+ no +' .popup__btn-close').click(function() {
    $('.popup-'+ no).removeClass('active');
  });
}

Popup__init(1);
Popup__init(2);

 

동영상

2602, JS, jQuery, 팝업 구현, 팝업 2개, 함수 1개로

 

15강 - preventDefault

: 브라우저 기본 동작 막기

개념

개념 - preventDefault

[HTML]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<h1>예제 1, 일반</h1>
<a href="https://www.naver.com" target="_blank">네이버 새창</a>
<h1>예제 2, preventDefault</h1>
<a onclick="event.preventDefault();" href="https://www.naver.com" target="_blank">네이버 새창</a>
<h1>예제 3, preventDefault(return false;)</h1>
<a onclick="return false;" href="https://www.naver.com" target="_blank">네이버 새창</a>
<h1>예제 4, 제이쿼리 preventDefault</h1>
<a class="a4" href="https://www.naver.com" target="_blank">네이버 새창</a>
<h1>예제 5, 제이쿼리 preventDefault, return false;</h1>
<a class="a5" href="https://www.naver.com" target="_blank">네이버 새창</a>

 

[JS]
// 제이쿼리 방법, e.preventDefault();
$('.a4').click(function(e) {
  e.preventDefault();
});

// 제이쿼리 방법, e.preventDefault(); return false;
$('.a5').click(function() {
  return false;
});

 

동영상

2602, JS, jQuery, preventDefault

 

16강 - stopPropagation

: 이벤트가 부모로 전달 되는 것을 막기

-> return fale : 위 두가지(preventDefault, stopPropagation) 동작을 한번에 처리할 수 있는 코드

Console

 

Clear

"span 클릭됨!"

"nav 클릭됨!"

"article 클릭됨!"

"article 클릭됨!"

"div 클릭됨!"

"section 클릭됨!"

"body 클릭됨!"

"section 클릭됨!"

"body 클릭됨!"

"body 클릭됨!"

 

[HTML]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

body
<section>
  section
  <div>
    div
    <article>
      article
      <nav>
        nav
        <span>
          span
        </span>
      </nav>
    </article>
  </div>
</section>

 

[CSS]

section, div, article, nav, span {
  display:block;
  padding:10px;
  margin:10px;
  border:10px solid black;
}

div {
  border-color:#333;
}

article {
  border-color:#666;
}

nav {
  border-color:#999;
}

span {
  border-color:#BBB;
}

 

[JS]

console.clear();

$('body').click(function() {
  console.log("body 클릭됨!");
});

$('section').click(function() {
  console.log("section 클릭됨!");
});

$('div').click(function() {
  console.log("div 클릭됨!");
});

$('article').click(function(e) {
  console.log("article 클릭됨!");
  
  // e.preventDefault();
  // e.stopPropagation();
  return false;
});

$('nav').click(function() {
  console.log("nav 클릭됨!");
});

$('span').click(function(e) {
  console.log("span 클릭됨!");
  
  e.stopPropagation();
});

동영상

2602, JS, jQuery, stopPropagation

17강 - alert, confirm

개념

개념 - alert, confirm

 

[JS]

console.clear();
alert('hi');

let rs = confirm('정말 삭제하시겠습니까?');
console.log(rs);

 

동영상

2602, JS, jQuery, alert, confirm

 

18강 - 삭제하기전에 물어봐주세요.

문제

문제 - 삭제하기전에 물어봐주세요.

문제 - 정답예시

문제 - 정답

[HTML]

<div>
  <input type="button" value="작성">
  <button type="button">작성2</button>
  <a onclick="if(confirm('정말 삭제하시겠습니까?')== false ){return false;}" href="https://www.naver.com" target="_blank">삭제</a>
  <a onclick="if(!confirm('정말 삭제하시겠습니까?') ){event.preventDefault();}" href="https://www.naver.com" target="_blank">삭제2</a>
  <a onclick="return confirm('정말 삭제하시겠습니까?');" href="https://www.naver.com" target="_blank">삭제3</a>

[CSS]

 

[JS]

 

19강 - 팝업 구현, 팝업의 배경(어두운 부분)을 클릭해도 꺼지도록 해주세요.

문제 

문제 - 팝업 구현, 팝업의 배경(어두운 부분)을 클릭해도 꺼지도록 해주세요.

문제 - 정답예시

[HTML]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 팝업1 -->
<div class="popup-1 popup">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업1
      </div>
    </div>
  </div>
</div>

<!-- 팝업2 -->
<div class="popup-2 popup">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업2
      </div>
    </div>
  </div>
</div>

<section class="section-1">
  <div class="con">
    <button class="btn-popup-1">팝업 1</button>
    <button class="btn-popup-2">팝업 2</button>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique magnam exercitationem fuga, odio laboriosam iste saepe, tempore eum harum itaque esse suscipit corrupti quae dolor nobis provident. Cumque, ex nemo.
.

.

.
    Optio, error sed. Tempora hic expedita dolores! Blanditiis consequuntur, delectus soluta quis rem minus, harum debitis aliquid officia, reprehenderit sed odio dolores ipsam placeat quia doloremque natus non repellat illo.
    Voluptatibus ratione quidem fugiat exercitationem quis voluptas cum deleniti ullam repudiandae tempora ex id delectus pariatur, quae libero inventore sit, ea saepe repellat dolore itaque consequatur, illo illum vitae! Illum.
  </div>
</section>

 

[CSS]

body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

.con {
  margin-left:auto;
  margin-right:auto;
}

.con {
  max-width:1200px;
}

.popup {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  align-items:center;
  justify-content:center;
  display:flex;
  opacity:0;
  visibility:hidden;
  transition: opacity .3s, visibility .3s;
}

.popup.active {
  opacity:1;
  visibility:visible;
}

.popup__content {
  min-width:200px;
  min-height:200px;
  background-color:white;
  border:2px solid black;
  transform:translateY(-100%);
  transition: transform .3s;
}

.popup.active .popup__content {
  transform:translateY(0);
}

.popup__head {
  padding:10px;
}

.popup__btn-close {
  width:30px;
  height:30px;
  margin-left:auto;
  position:relative;
  cursor:pointer;
  transition:transform 0.3s;
}

.popup__btn-close:hover {
  transform:rotate(185deg);
}

.popup__btn-close::before,
.popup__btn-close::after {
  content:"";
  background-color:black;
  position:absolute;
  top:40%;
  left:0;
  width:100%;
  height:20%;
  transform:rotate(45deg);
  transition:box-shadow 0.3s;
}

.popup__btn-close::after {
  transform:rotate(-45deg);
}

.popup__btn-close:hover::before,
.popup__btn-close:hover::after {
  box-shadow:0 0 3px black;
}

.popup__body {
  padding:0 10px;
}

 

[JS]

console.clear();

function Popup__init(no) {
  $('.btn-popup-' + no).click(function() {
    $('.popup-' + no).addClass('active');
  });
  
  $('.popup-' + no + ' .popup__btn-close, .popup-'+ no).click(function() {
    $('.popup-' + no).removeClass('active');
  });
}

 

  // 위 코드는 주석된 코드와 같은 의미 입니다.
  /*
  $('.popup-' + no + ' .popup__btn-close').click(function() {
    $('.popup-' + no).removeClass('active');
  });
  
  $('.popup-' + no).click(function() {
    $('.popup-' + no).removeClass('active');
  });
  */
}

Popup__init(1);
Popup__init(2);

 

동영상

2602, JS, jQuery, 팝업 구현, 팝업의 배경(어두운 부분)을 클릭해도 꺼지도록 해주세요.

20강 - 팝업 구현, 팝업의 콘텐츠 부분을 클릭해도 꺼지지 않게 해주세요.

문제

문제 - 팝업 구현, 팝업의 콘텐츠 부분을 클릭해도 꺼지지 않게 해주세요.

문제 - 정답예시

문제 - 정답

[HTML]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 팝업1 -->
<div class="popup-1 popup">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업1
      </div>
    </div>
  </div>
</div>

<!-- 팝업2 -->
<div class="popup-2 popup">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업2
      </div>
    </div>
  </div>
</div>

<section class="section-1">
  <div class="con">
    <button class="btn-popup-1">팝업 1</button>
    <button class="btn-popup-2">팝업 2</button>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique magnam exercitationem fuga, odio laboriosam iste saepe, tempore eum harum itaque esse suscipit corrupti quae dolor nobis provident. Cumque, ex nemo.
.

.

.
    Optio, error sed. Tempora hic expedita dolores! Blanditiis consequuntur, delectus soluta quis rem minus, harum debitis aliquid officia, reprehenderit sed odio dolores ipsam placeat quia doloremque natus non repellat illo.
    Voluptatibus ratione quidem fugiat exercitationem quis voluptas cum deleniti ullam repudiandae tempora ex id delectus pariatur, quae libero inventore sit, ea saepe repellat dolore itaque consequatur, illo illum vitae! Illum.
  </div>
</section>

 

[CSS]

body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

.con {
  margin-left:auto;
  margin-right:auto;
}

.con {
  max-width:1200px;
}

.popup {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  align-items:center;
  justify-content:center;
  display:flex;
  opacity:0;
  visibility:hidden;
  transition: opacity .3s, visibility .3s;
}

.popup.active {
  opacity:1;
  visibility:visible;
}

.popup__content {
  min-width:200px;
  min-height:200px;
  background-color:white;
  border:2px solid black;
  transform:translateY(-100%);
  transition: transform .3s;
}

.popup.active .popup__content {
  transform:translateY(0);
}

.popup__head {
  padding:10px;
}

.popup__btn-close {
  width:30px;
  height:30px;
  margin-left:auto;
  position:relative;
  cursor:pointer;
  transition:transform 0.3s;
}

.popup__btn-close:hover {
  transform:rotate(185deg);
}

.popup__btn-close::before,
.popup__btn-close::after {
  content:"";
  background-color:black;
  position:absolute;
  top:40%;
  left:0;
  width:100%;
  height:20%;
  transform:rotate(45deg);
  transition:box-shadow 0.3s;
}

.popup__btn-close::after {
  transform:rotate(-45deg);
}

.popup__btn-close:hover::before,
.popup__btn-close:hover::after {
  box-shadow:0 0 3px black;
}

.popup__body {
  padding:0 10px;
}

 

[JS]

 

console.clear();

 

function Popup__init(no) {
  $('.btn-popup-' + no).click(function() {
    $('.popup-' + no).addClass('active');
  });
  
  $('.popup-' + no + ' .popup__btn-close, .popup-' + no).click(function() {
    $('.popup-' + no).removeClass('active');
  });
  $('.popup-' + no + ' .popup__content').click(function(e){
    e.stopPropagation();
  });

}
Popup__init(1);
Popup__init(2);

 

동영상

2602, JS, jQuery, 팝업 구현, 팝업의 콘텐츠 부분을 클릭해도 꺼지지 않게 해주세요.

21강 - 스크롤바 기능을 버튼에 의해 끄고, 켤 수 있게 해주세요.

문제

문제 - 스크롤바 기능을 버튼에 의해 끄고, 켤 수 있게 해주세요.

문제 - 정답예시

문제 - 정답

[HTML]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<button class="btn-turn-off-scroll-bar">스크롤바 끄기</button>
<button class="btn-turn-on-scroll-bar">스크롤바 켜기</button>
<div></div>

 

[CSS]

div {
  background-color:blue;
  min-height:250vh;
}

html.overflow-hidden,
html.overflow-hidden > body {
  overflow:hidden;
}

 

[JS]

console.clear();
$('.btn-turn-off-scroll-bar').click(function(){
  $('html').addClass('overflow-hidden');
});
$('.btn-turn-on-scroll-bar').click(function(){
  $('html').removeClass('overflow-hidden');
});

 

동영상

2602, JS, jQuery, 스크롤바 기능을 버튼에 의해 끄고, 켤 수 있게 해주세요.