JQ 8~12강 개념 - 제이쿼리

8강

개념

 

MDN CSS - box-shadow

box-shadow - CSS | MDN

 

문제

문제 - 팝업 구현, addClass, removeClass

문제 - 정답예시

문제 - 정답

 

[HTML]

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

<div class="popup-1">
  <div class="popup-1__head">
    <button style="display:block; margin-left:auto;" class="popup-1__btn-close">X</button>
  </div>
</div>

<div class="con">
  <button class="btn-popup-1">팝업 1</button>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum porro esse cupiditate laboriosam nostrum voluptatibus nulla? Aperiam alias libero deleniti commodi nobis unde reprehenderit, ex temporibus expedita sequi debitis molestiae!
 .

.

.
  Itaque voluptate, voluptates inventore sapiente officia enim doloremque reprehenderit quas consectetur, architecto quaerat aut. Magnam sed eum voluptas cum at adipisci nesciunt, molestias harum? Nostrum ex facilis sit eligendi corrupti?
  Accusamus itaque harum voluptates nulla natus soluta qui illum ipsum voluptatem doloremque, nisi, quasi facilis amet et numquam. Doloribus dolorem blanditiis molestias quod repudiandae maiores odio magni eligendi eius minus.
  Qui quibusdam aliquam reiciendis facilis, ducimus excepturi id nemo hic consectetur reprehenderit molestias vitae veniam neque nulla. Ab ratione aspernatur, voluptatum repudiandae exercitationem, nihil numquam accusantium qui distinctio minima libero.
</div>

 

[CSS]

.con {
  margin: 0 auto;
  max-width: 1000px;
}

.popup-1 {
  width: 300px;
  height: 300px;
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 10px solid black;
  box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.8);
  display: none;
}

.popup-1.active {
  display: block;
}

 

[JS]

console.clear();

// v1
function Popup1__show() {
  $(".popup-1").addClass("active", "block");
}

function Popup1__hide() {
  $(".popup-1").removeClass("active", "");
}

$(".btn-popup-1").click(Popup1__show);
$(".popup-1__btn-close").click(Popup1__hide);

// v2
// $('.btn-popup-1').click(function() {
//   $('.popup-1').css('display', 'block');
// });

// $('.popup-1__btn-close').click(function() {
//   $('.popup-1').css('display', '');
// });

동영상

2602, JS, jQuery, 팝업 구현, addClass, removeClass

 

9강

문제

문제 - 팝업 구현, 레이아웃

문제 - 정답예시

문제 - 정답

 

[HTML]

<div class="popup">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      
    </div>
  </div>
</div>
<section class="section-1">
  <div class="con">
    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.

.

.

.
    Harum, possimus repudiandae. Culpa ab ad ullam doloremque nisi nemo beatae, necessitatibus ipsa corporis quasi commodi. Laborum sequi tempora saepe consequuntur. Quasi rerum enim autem expedita temporibus voluptate, quisquam quaerat!
    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;
  bottom:0;
  right:0;
  background-color: rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
}

.popup__content {
  min-width:200px;
  min-height:200px;
  background-color: #fff;
}

.popup__btn-close {
  width:100px;
  height:100px;
  background-color: #ff0000;
  margin-left:auto;
}

동영상

2602, JS, jQuery, 팝업 구현, 레이아웃

10강

문제

문제 - 팝업 구현, 닫기버튼 레이아웃

문제 - 정답예시

문제 - 정답

 

[HTML]

<div class="popup">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body"></div>
  </div>
</div>

<section class="section-1">
  <div class="con">
    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.

.

.

.
    Harum, possimus repudiandae. Culpa ab ad ullam doloremque nisi nemo beatae, necessitatibus ipsa corporis quasi commodi. Laborum sequi tempora saepe consequuntur. Quasi rerum enim autem expedita temporibus voluptate, quisquam quaerat!
    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);
  display:flex;
  align-items:center;
  justify-content:center;
}

.popup__content {
  min-width:200px;
  min-height:200px;
  background-color:white;
}

.popup__btn-close {
  width:100px;
  height:100px;
  border:10px solid blue;
  margin-left: auto;
  position:relative;
}
.popup__btn-close:hover {
  transform:rotate(5deg);
}
.popup__btn-close::before,
.popup__btn-close::after {
  content:"";
  background-color: black;
  position:absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 20%;
  transform:translate(-50%,-50%) rotate(45deg);
}
.popup__btn-close::after {
  transform:translate(-50%,-50%) rotate(-45deg);  
}

동영상

2602, JS, jQuery, 팝업 구현, 닫기버튼 레이아웃

    

11강

문제

문제 - 팝업 구현, 레이아웃 완성

문제 - 정답예시

 

[HTML]

<div class="popup">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">       
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, soluta sit. Omnis dolorum quidem incidunt, necessitatibus eaque possimus cumque placeat, minus sed ut perferendis at sit quae harum maxime doloribus.
      </div>
    </div>
  </div>
</div>

<section class="section-1">
  <div class="con">
    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.

.

.

.
    Harum, possimus repudiandae. Culpa ab ad ullam doloremque nisi nemo beatae, necessitatibus ipsa corporis quasi commodi. Laborum sequi tempora saepe consequuntur. Quasi rerum enim autem expedita temporibus voluptate, quisquam quaerat!
    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);
  display:flex;
  align-items:center;
  justify-content:center;
}

.popup__content {
  min-width:200px;
  min-height:200px;
  background-color:white;
  border:2px solid black;
  padding:10px;
}

.popup__btn-close {
  width:30px;
  height:30px;
  margin-left:auto;
  position:relative;
  cursor:pointer;
  transition:transform .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 .3s;
}

.popup__btn-close::after {
  transform:rotate(-45deg);
}
.popup__btn-close::after,
.popup__btn-close::befor {
  box-shadow:0 0 3px black;
}
.popup__body {
  margin-top:20px;
}

 

동영상

2602, JS, jQuery, 팝업 구현, 레이아웃 완성

 

12강

문제

문제 - 팝업 구현, 열기, 닫기 기능 구현

문제 - 정답예시

[HTML]

<div class="popup">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, soluta sit. Omnis dolorum quidem incidunt, necessitatibus eaque possimus cumque placeat, minus sed ut perferendis at sit quae harum maxime doloribus.
      </div>
    </div>
  </div>
</div>

<section class="section-1">
  <div class="con">

         <button class="popup__btn">팝업 열기</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.

.

.

.
    Harum, possimus repudiandae. Culpa ab ad ullam doloremque nisi nemo beatae, necessitatibus ipsa corporis quasi commodi. Laborum sequi tempora saepe consequuntur. Quasi rerum enim autem expedita temporibus voluptate, quisquam quaerat!
    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);
  display: flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility: hidden;
}

.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();

$('.popup__btn').click(function() {
  $('.popup').addClass('active');
});

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