0725 목 uiux 80일차

0725 목 uiux 80일차

 

※ 제이쿼리 참고

Inpa Dev 👨‍💻 제이쿼리 메소드 종류 총정리  ( https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EB%A9%94%EC%86%8C%EB%93%9C-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC )

제이쿼리 css 선택자 모음 ( https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EC%84%A0%ED%83%9D%EC%9E%90-Selector-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC )

 

스크롤바 끄고 키기, 팝업 동시에 뜨게 하기

스크롤바 끄고 켜는 버튼 ( https://codepen.io/YoungHeom/pen/xxoErRL ) ㄴ원래 문제 제목 - 스크롤바 기능을 버튼에 의해 끄고, 켤 수 있게 해주세요. 팝업을 온오프에 따른 스크롤바 끄고 켜기 ( https://codepen.io/YoungHeom/pen/yLdaXXO )  ㄴ 원 제목 - 팝업2 구현 , 팝업이 나오는 동안 html 수준의 스크롤바는 나타나지 않게 해주세요. 팝업을 동시에 뜨게 하기 ( https://codepen.io/YoungHeom/pen/OJeRgQe ) ㄴ 원 제목 - 팝업2 구현, 팝업을 동시에 2개 띄워주세요. 팝업을 늘릴 때 마다, CSS 추가를 안하도록 구조변경 ( https://codepen.io/YoungHeom/pen/jOjMwdr ) 그레이브 도입 ( https://codepen.io/YoungHeom/pen/dyBpRLQ ) 아코디언2 구현, 클릭 당하면 배경색이 변함 ( https://codepen.io/YoungHeom/pen/yLdaXmb ) 아코디언2 구현, 클릭 당하면 배경색이 변함, this ( https://codepen.io/YoungHeom/pen/GRbjvoR ) 아코디언 구현, 클릭 당하면 배경색이 변함, toggle ( https://codepen.io/YoungHeom/pen/zYVKdNL ) 아코디언 구현, 클릭 당하면 배경색이 변함, prev(), next() ( https://codepen.io/YoungHeom/pen/VwJKzWo ) 아코디언 구현, 마우스올림하면 양 옆의 배경색이 변함, mouseenter ( https://codepen.io/YoungHeom/pen/ExBgvQG )

 

max-height: calc(100vh - 55px); 

max-height :  calc(100vh - 55px); ← 이거 어제 배운 건데 팝업창 바디 부분에 이렇게 쓰면 화면크기가 줄어도 헤더? 헤드 부분이 계속 위에 보이게 됨. 공식! 이니까 잘 알고있기

하얀색이 div.head인데

 

 

 

$('.btn-turn-off-scroll-bar').click(function() {   $('body').addClass('active'); }); $('.btn-turn-on-scroll-bar').click(function() {   $('body').removeClass('active'); });

 

'$('.btn-turn-off-scroll-bar')': 클래스명이 btn-turn-off-scroll-bar인 요소를 클릭했을 때

'.click(function() { ... });':발생할 이벤트를 설정하겠다.
$('body').addClass('active');: body 태그 선택, .addClass('active');: body태그에 'active'라는 클래스명을 추가한다.

 

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); ㄴ

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'); }

 

 

 

 

 

• 팝업2 구현, 팝업을 늘릴 때 마다, CSS 추가를 안하도록 구조변경 
• html[class*="popup-"][class*="-actived"] 

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

이거 대신 

html[class*="popup-"][class*="-actived"], html[class*="popup-"][class*="-actived"] > body {   overflow: hidden; } 이렇게 쓰면

class라는 특성값을 가지고 있으며, 값 안에 "popup-"라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택한다.

*= 설명 참고 ( https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors )

 

 

` - 백틱, 그레이브

 

 

( https://youtu.be/wnMyrIrne9Y?si=3fAR1dDup7Q1UkQA )

머지 배우고 있는 거 이름들이 이 채널 영상 제목이랑 유사한 게 많다 

 

 

웹개발 정보 - [Jquery] prev(), next() - 이전, 다음 요소 선택하는 방법 ( https://itprogramming119.tistory.com/entry/Jquery-prev-next-%EC%9D%B4%EC%A0%84-%EB%8B%A4%EC%9D%8C-%EC%9A%94%EC%86%8C-%EC%84%A0%ED%83%9D%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95#expand-wrap )