0722 월 uiux 77일차

0722 월 uiux 77일차 

 

 

버튼 하나로 바뀌는 배경색 ( https://codepen.io/YoungHeom/pen/MWMegeN )

$('.btn-1').click(function() {   let has = $('div').hasClass('active');      if ( has ) {     $('div').removeClass('active')   } else {     $('div').addClass('active');   } }); ㄴ 버튼 하나로 바뀌는 배경색(변경, 회복)

 

자바스크립트는 클래스 이름 추가, 클래스 이름 지우기. 이 정도로만 사용하기(감독 역할)

 

제이쿼리로 css를 직접 바꾸지 않고 팝업 구현하기 ( https://codepen.io/YoungHeom/pen/xxoOKPg )

<css> .popup-1.active {   display: block; } <js> console.clear(); function Popup1__show() {   $('.popup-1').addClass('active'); } function Popup1__hide() {   $('.popup-1').removeClass('active'); } $('.btn-popup-1').click(Popup1__show); $('.popup-1__btn-close').click(Popup1__hide);

 

( https://codepen.io/YoungHeom/pen/ExByYOW )

 

너비 높이 안 주고 화면 전체만큼 배경색 주기

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;