https://codepen.io/limyena/pen/RwOKXWz
팝업구현
...
codepen.io
[검정색 화면을 클릭했을 때 팝업창이 닫히도록 구현]
- 페이지 검사 -> 코드보기 선택자 확인
- 선택자 추가만 해주면 끝
https://codepen.io/limyena/pen/YzMNmEK?editors=0011
같은 코드 줄이기(매개변수)
...
codepen.io
- 팝업이 많아질때는 매개변수를 이용해서 간결하게 쓸 수 있다.
[겹치는 코드 줄이기]
- js에서 겹치는 코드 줄이기
- 겹치는 코드 지우고
- 표시된 세줄 잘라내기
- 붙여넣기
[팝업 추가하기]
- html 팝업 1번 코드 복사
- css 팝업2 높이 / 위치 지정
- 팝업 추가 성공
[팝업창 따로따로 열리도록 하기]
- html에서 span class찾아서 복사 -> 아래쪽에 붙여넣기
popup-open-1 / popup-open-2 로 구분해줘야함
- js에서 오픈 코드 복사 붙여넣기하고 popup-open-1 / popup-open-2 로 구분해주기
- js에서 popup-open-1 / popup-open-2 구분하기위해 html에서도 popup-open-1 / popup-open-2 구분해줘야함
↓ ↓ ↓ ↓ ↓ ↓ ↓ 따로 따로 구현 성공
[클릭 막기]
- 팝업창을 눌럿을 때 팝업창이 닫히는 문제를 해결
