2021-06-04 (53일차) 반응형 팝업창, visibility, 서서히 나타나는 효과, 위에서 아래로 내려오는 효과, 애니메이션 효과, 팝업창 2개 이상, 매개변수 사용하여 자바스크립트 내용 줄이기

26강~33강

 

 

- 반응형 팝업창 만들기

반응형 팝업창 결과물

---

- visibility

  hidden, visible 총 두 가지 값이 있음

  visibility:hidden과 opapcity:0의 차이점 : 보이지 않고, 클릭도 되지 않음

 

- 반응형 팝업창 애니메이션 1 <실무방법>

  팝업창이 서서히 모습이 나타나는 애니메이션 효과( 불투명 → 투명 )

  ※ opacity와 visibility를 같이 줘야함

  ※ display:none이 포함되어 있으면 애니메이션 효과 작동하지 않음

 

- 반응형 팝업창 애니메이션 1

  팝업창이 위에서 아래로 내려오면서 서서히 나타나는 애니메이션 효과

  transform : translate();를 사용

---

- 함수 매개변수

  함수를 두 개 이상 쓸 때 사용

 

- 팝업창 두 개 띄우기

  <작업조건>

  html - 위에서 만든 팝업창과 버튼을 각 2개씩 만들어주기

  팝업에 클래스 추가하기 (팝업1 : "popup-1" 팝업2 : "popup-2")

  ↓

  자바스크립트에도 각 2개씩 만들어주기

  ※ 단, 닫기버튼 같은 경우에는, 클래스 이름이 같기 때문에

     버튼 클래스 앞에 각 팝업의 클래스를 추가로 붙여 지정해주기

---

- 자바스크립트 줄여서 쓰는 방법

 1) function함수로 팝업 하나씩 묶어주기

첫 번째 방법

문제점 : 팝업이 여러개라면 계속 복사 붙이고 팝업 클래스를 바꿔줘야한다.

해결방안 : 함수 매개변수 사용

 

  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓

 

 2) function함수로 묶어주고, 매개변수 사용하기