코딩/수업메모

JQ 22~31강 개념 - 제이쿼리

ponyo118 2026. 3. 3. 17:39

22강 - 팝업 구현, 팝업이 나오는 동안 html 수준의 스크롤바 없어지게

문제

문제 - 팝업 구현, 팝업이 나오는 동안 html 수준의 스크롤바는 나타나지 않게 해주세요.

문제 - 정답예시

문제 - 정답

[HTML]

.
        Dolorum voluptatem veniam molestias qui. Aliquam error eveniet excepturi in eligendi alias harum deleniti, omnis accusantium. Ducimus illum, eaque dolore dolorum ipsam ut autem quos. Dicta aliquid dignissimos autem corrupti!
        Doloremque, debitis facere facilis ut provident quas quae totam aspernatur, exercitationem dolore sint tenetur nemo earum incidunt vitae beatae rem obcaecati minima! Suscipit porro sapiente ducimus eveniet, maiores consequatur quos.
      </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. In, accusamus ab earum nemo quidem omnis dolore aperiam culpa qui possimus, quae, repellat eligendi vel eveniet excepturi dicta eum impedit cum.
.

Doloremque asperiores, eum voluptate aperiam, amet sit soluta incidunt rerum consectetur a nulla sapiente nesciunt voluptatum dolores fugit. Incidunt dolore aperiam odio doloribus! Ad velit necessitatibus odit. Quo, provident aut!
</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;
  max-height:calc(100dvh - 55px);
  overflow-y:auto;
}

.popup-1-actived,
.popup-1-actived > body,
.popup-2-actived,
.popup-2-actived > body {
overflow:hidden;
}

[JS]

console.clear();

function Popup__init(no) {
  $('.btn-popup-' + no).click(function() {
    $('.popup-' + no).addClass('active');
    $('html').addClass("popup-" + no + "-actived");
  });

  $('.popup-' + no + ' .popup__btn-close, .popup-' + no).click(function() {
    $('.popup-' + no).removeClass('active');
    $('html').removeClass("popup-" + no + "-actived");
  });

  $('.popup-' + no + ' .popup__content').click(function() {
    return false;
  });
}
Popup__init(1);
Popup__init(2);

동영상

2602, JS, jQuery, 팝업 구현, 팝업이 나오는 동안 html 수준의 스크롤바는 나타나지 않게 해주세요.

23강 - 팝업 구현, 팝업을 동시에 2개 띄워주세요.

문제

문제 - 팝업 구현, 팝업을 동시에 2개 띄워주세요.

문제 - 정답예시

문제 - 정답

[HTML]

[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;
  z-index:1000;
}

.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;
  max-height:calc(100vh - 55px);
  overflow-y:auto;
}

.popup-1-actived,
.popup-1-actived > body {
  overflow:hidden;
}

.popup-2-actived,
.popup-2-actived > body {
  overflow:hidden;
}

[JS]

console.clear();

function Popup__init(no) {
  $('.btn-popup-' + no).click(function() {
    Popup__show(no);
  });

  $('.popup-' + no + ' .popup__btn-close, .popup-' + no).click(function() {
    Popup__hide(no);
  });

  $('.popup-' + no + ' .popup__content').click(function() {
    return false;
  });
}

function Popup__show(no) {
  $('.popup-' + no).addClass('active');
  $('html').addClass('popup-' + no + '-actived');
}

function Popup__hide(no) {
  $('.popup-' + no).removeClass('active');
  $('html').removeClass('popup-' + no + '-actived');
}

Popup__init(1);
Popup__init(2);

Popup__show(1);
Popup__show(2);

동영상

2602, JS, jQuery, 팝업 구현, 팝업을 동시에 2개 띄워주세요.

24강 - 팝업 구현, 팝업을 늘릴 때 마다, CSS 추가를 안하도록 구조변경

문제

문제 - 팝업 구현, 팝업을 늘릴 때 마다, CSS 추가를 안하도록 구조변경

힌트 1, html[class*="popup-"][class*="-actived"] { }

문제 - 정답예시

문제 - 정답

[HTML]

.
        Dolorum voluptatem veniam molestias qui. Aliquam error eveniet excepturi in eligendi alias harum deleniti, omnis accusantium. Ducimus illum, eaque dolore dolorum ipsam ut autem quos. Dicta aliquid dignissimos autem corrupti!
        Doloremque, debitis facere facilis ut provident quas quae totam aspernatur, exercitationem dolore sint tenetur nemo earum incidunt vitae beatae rem obcaecati minima! Suscipit porro sapiente ducimus eveniet, maiores consequatur quos.
      </div>
    </div>
  </div>
</div>


<div class="popup-3 popup">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업3
      </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>
    <button class="btn-popup-3">팝업 3</button>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus hic ipsum nobis consequuntur veritatis at non blanditiis incidunt ex adipisci. Totam quibusdam ullam nemo sed odio veritatis culpa reiciendis itaque?
.

.
    Nemo libero molestias unde ex magni voluptatibus ipsum ad porro sunt id quae architecto maiores consequatur fugiat quas sequi labore rem mollitia cupiditate veniam illum tenetur cumque, iusto quos! Sequi?
    Pariatur totam enim natus deserunt cumque facilis error dolor ab molestias voluptatibus assumenda cum similique, culpa autem, delectus minima dolorum numquam aliquid animi veniam aperiam voluptates voluptatem omnis. Excepturi, illo.
  </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 0.3s, visibility 0.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 0.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;
  max-height: calc(100vh - 55px);
  overflow-y: auto;
}

html[class*="popup-"][class*="-actived"],
html[class*="popup-"][class*="-actived"] > body {
  overflow: hidden;
}

[JS]

console.clear();

function Popup__init(no) {
  $(".btn-popup-" + no).click(function () {
    Popup__show(no);
  });

  $(".popup-" + no + " .popup__btn-close, .popup-" + no).click(function () {
    Popup__hide(no);
  });

  $(".popup-" + no + " .popup__content").click(function () {
    return false;
  });
}

function Popup__show(no) {
  $(".popup-" + no).addClass("active");
  $("html").addClass("popup-" + no + "-actived");
}

function Popup__hide(no) {
  $(".popup-" + no).removeClass("active");
  $("html").removeClass("popup-" + no + "-actived");
}

Popup__init(1);
Popup__init(2);
Popup__init(3);

동영상

2602, JS, jQuery, 팝업 구현, 팝업을 늘릴 때 마다, CSS 추가를 안하도록 구조변경

25강 - 팝업 구현, 그레이브 도입

그레이브 문법이란 ?

- 백틱 기호를 사용하는 문법

let text = '

안녕하세요

반갑습니다

또 만나요

# ` 백틱 기호를 사용하는 문법
그레이브 문법을 쓰면 문자열 안에 변수를 직접 삽입 할 수 있다 -> ${변수}

# 기존 문법
'.popup-' + no + ', .popup-' + no + ' .popup__btn-close'
↓
# 그레이브 문법
`.popup-${no}, .popup-${no} .popup__btn-close`

문제

문제 - 팝업 구현, 그레이브 도입

문제 - 정답

[HTML]

.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore cumque itaque beatae eaque eum in veritatis vel pariatur, suscipit reiciendis totam temporibus quas eveniet, quasi ducimus blanditiis, laborum voluptatem. Soluta?
      </div>
    </div>
  </div>
</div>

<div class="popup-2 popup fixed inset-0 flex items-center justify-center">
  <div class="popup__content bg-white border-2 border-black flex max-h-full flex-col">
    <div class="popup__head p-2">
      <div class="popup__btn-close w-12 h-12 ml-auto relative cursor-pointer"></div>
    </div>
    <div class="popup__body flex-grow overflow-y-auto">
      <div class="container p-2">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore cumque itaque beatae eaque eum in veritatis vel pariatur, suscipit reiciendis totam temporibus quas eveniet, quasi ducimus blanditiis, laborum voluptatem. Soluta?
.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore cumque itaque beatae eaque eum in veritatis vel pariatur, suscipit reiciendis totam temporibus quas eveniet, quasi ducimus blanditiis, laborum voluptatem. Soluta?
      </div>
    </div>
  </div>
</div>

<section class="section-1">
  <div class="container mx-auto">
    <button class="btn-popup-1">버튼 1</button>
    <button class="btn-popup-2">버튼 2</button>
  </div>
  <div class="container mx-auto">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, vitae ipsa ex voluptates aliquam expedita aperiam accusamus quam dignissimos nobis neque, voluptatibus eveniet quis sunt voluptate nisi minus, dolore deserunt?
.

.
Voluptatum ullam facilis omnis iste quaerat eveniet? Ex atque tempora reprehenderit, officia aspernatur aut ducimus provident eaque doloremque repellendus beatae ipsam ullam voluptates temporibus deserunt excepturi magni molestias pariatur odit.
</div>
</section>

[CSS]

.popup {
  background-color:rgba(0,0,0,0.5);
  visibility:hidden;
  opacity:0;
  transition:visibility 0.2s, opacity 0.2s;
}

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

.popup__content {
  transform:translateY(-100%);
  min-width:200px;
  min-height:200px;
  transition: transform 0.2s;
}

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

.popup__btn-close {
  transition:transform 0.2s;
}

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

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

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

.popup__btn-close:hover::before, .popup__btn-close:hover::after {
  box-shadow:0 0 10px rgba(0,0,0.5);
}

html[class*="popup-"][class*="-actived"] {
  overflow:hidden;
}

[JS]

동영상

2602, JS, jQuery, 팝업 구현, 그레이브 도입

26~7강 - 아코디언 구현, 클릭 당하면 배경색이 변함(this 포함)

26강

문제

문제 - 아코디언 구현, 클릭 당하면 배경색이 변함

문제 - 정답예시

문제 - 정답

27강

문제

문제 - 아코디언 구현, 클릭 당하면 배경색이 변함, this

문제 - 정답예시

문제 - 정답

[HTML]

[CSS]

.box-1 > .active {
background-color: yellow;
}

[JS]

console.clear();

$('.box-1 > :nth-child(1)').click(function() {
  $('.box-1 > :nth-child(1)').addClass('active');
});
$('.box-1 > :nth-child(2)').click(function() {
  $('.box-1 > :nth-child(2)').addClass('active');
});
$('.box-1 > :nth-child(3)').click(function() {
  $('.box-1 > :nth-child(3)').addClass('active');
});
$('.box-1 > :nth-child(4)').click(function() {
  $('.box-1 > :nth-child(4)').addClass('active');
});
$('.box-1 > :nth-child(5)').click(function() {
  $('.box-1 > :nth-child(5)').addClass('active');
});

// $('.box-1 *').click(function(){
//   $this.addClass('active');
// })

동영상

2602, JS, jQuery, 아코디언 구현, 배경색이 변함

2602, JS, jQuery, 아코디언 구현, 클릭 당하면 배경색이 변함, this

28강 - 아코디언 구현, 클릭 당하면 배경색이 변함, toggle <if문>

문제

문제 - 아코디언 구현, 클릭 당하면 배경색이 변함, toggle

문제 - 정답예시

문제 - 정답

[HTML]

[CSS]

.box-1 > .active {
background-color: yellow;
}

[JS]

console.clear();

console.clear();

$('.box-1 > *').click(function(){
   let $this = $(this);

  if ( $this.hasClass('active') ) {
    $this.removeClass('active');
  }
  else {
    $this.addClass('active');
  }
})

동영상

2602, JS, jQuery, 아코디언 구현, 클릭 당하면 배경색이 변함, toggle

29강 - 아코디언 구현, 클릭 당하면 양 옆의 배경색이 변함, next, prev

문제

문제 - 아코디언 구현, 클릭 당하면 양 옆의 배경색이 변함, next, prev

문제 - 정답예시

문제 - 정답

[HTML]

[CSS]

.box-1 > .active {
background-color: yellow;
}

[JS]

console.clear();

$('.box-1 > *').click(function(){
   let $this = $(this);

  $this.removeClass('active');
  $this.prev().addClass('active');
  $this.next().addClass('active');
})

동영상

2602, JS, jQuery, 아코디언 구현, 클릭 당하면 양 옆의 배경색이 변함, next, prev

30강 - 아코디언 구현, 마우스올림하면 양 옆의 배경색이 변함, mouseenter

mouseover/moseenter 차이

moseover/ moseout - 자식 요소로 이동해도 계속 발생 (버블링)

moseenter/ mouseleave - 버블링 x

문제

문제 - 아코디언 구현, 마우스올림하면 양 옆의 배경색이 변함, mouseenter

문제 - 정답예시

문제 - 정답

[HTML]

[CSS]

.box-1 > .hover {
background-color: yellow;
}

[JS]

console.clear();

$('.box-1 > *').mouseenter(function(){
   let $this = $(this);

  $this.removeClass('active');
  $this.prev().addClass('active');
  $this.next().addClass('active');
})

동영상

2602, JS, jQuery, 아코디언 구현, 마우스올림하면 양 옆의 배경색이 변함, mouseenter

31강 - 아코디언 구현, 클릭당한 녀석을 제외한 모든 녀석 선택

문제

문제 - 아코디언 구현, 클릭당한 녀석을 제외한 모든 녀석 선택

문제 - 정답예시

문제 - 정답

[HTML]

[CSS]

.box-1 > .hover {
background-color: yellow;
}

[JS]

console.clear();

$('.box-1 > *').click(function(){
$('.box-1 > *').addClass('active');
$(this).removeClass('active');
})

동영상

2602, JS, jQuery, 아코디언 구현, 클릭당한 녀석을 제외한 모든 녀석 선택

'코딩 > 수업메모' 카테고리의 다른 글

JQ 40 ~ 43강 개념 - 제이쿼리 (0)	2026.03.05
JQ 32~39강 개념 - 제이쿼리(아코디언) (0)	2026.03.05
JQ 13~21강 개념 - 제이쿼리 (0)	2026.02.27
JQ 8~12강 개념 - 제이쿼리 (0)	2026.02.26
JQ 1~7강 개념 - 제이쿼리 (0)	2026.02.25

현재글JQ 22~31강 개념 - 제이쿼리

ponyo118 님의 블로그

ponyo118 님의 블로그 입니다.

Today :
Yesterday :

ponyo118 님의 블로그

JQ 22~31강 개념 - 제이쿼리

22강 - 팝업 구현, 팝업이 나오는 동안 html 수준의 스크롤바 없어지게

문제

동영상

23강 - 팝업 구현, 팝업을 동시에 2개 띄워주세요.

문제

동영상

24강 - 팝업 구현, 팝업을 늘릴 때 마다, CSS 추가를 안하도록 구조변경

문제

동영상

25강 - 팝업 구현, 그레이브 도입

그레이브 문법이란 ?

문제

동영상

26~7강 - 아코디언 구현, 클릭 당하면 배경색이 변함(this 포함)

26강

문제

27강

문제

동영상

28강 - 아코디언 구현, 클릭 당하면 배경색이 변함, toggle <if문>

문제

동영상

29강 - 아코디언 구현, 클릭 당하면 양 옆의 배경색이 변함, next, prev

문제

동영상

30강 - 아코디언 구현, 마우스올림하면 양 옆의 배경색이 변함, mouseenter

문제

동영상

31강 - 아코디언 구현, 클릭당한 녀석을 제외한 모든 녀석 선택

문제

동영상

'코딩 > 수업메모' 카테고리의 다른 글

'코딩/수업메모'의 다른글

티스토리툴바

« 2026/06 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

JQ 22~31강 개념 - 제이쿼리

22강 - 팝업 구현, 팝업이 나오는 동안 html 수준의 스크롤바 없어지게

문제

동영상

23강 - 팝업 구현, 팝업을 동시에 2개 띄워주세요.

문제

동영상

24강 - 팝업 구현, 팝업을 늘릴 때 마다, CSS 추가를 안하도록 구조변경

문제

동영상

25강 - 팝업 구현, 그레이브 도입

그레이브 문법이란 ?

문제

동영상

26~7강 - 아코디언 구현, 클릭 당하면 배경색이 변함(this 포함)

26강

문제

27강

문제

동영상

28강 - 아코디언 구현, 클릭 당하면 배경색이 변함, toggle <if문>

문제

동영상

29강 - 아코디언 구현, 클릭 당하면 양 옆의 배경색이 변함, next, prev

문제

동영상

30강 - 아코디언 구현, 마우스올림하면 양 옆의 배경색이 변함, mouseenter

문제

동영상

31강 - 아코디언 구현, 클릭당한 녀석을 제외한 모든 녀석 선택

문제

동영상

'코딩 > 수업메모' 카테고리의 다른 글

'코딩/수업메모'의 다른글

관련글

티스토리툴바