팝업 구현(1-복습) (03.18)

[PT-CODE 폴더 만들어서 vscode 연결하기]

html, css, js, 제이쿼리까지 파일을 만들어준다.

너무 널부러져있으니까 js폴더를 만들어준다.

 

vscode에서 하는것보다 파일탐색기에서 만드는것이 훨씬 편하다.

script와 제이쿼리를 클릭, 드래그해서 js파일 안에 넣어준다.

vscode를 보면 저렇게 나와서 당황할 수 있는데, 파일이 삭제된게 아니라 경로가 이동된거라서

폴더를 열어서 파일을 다시 꺼내와주면 된다.

js폴더 안에있는 자바스크립트와 제이쿼리 연결은 

똑같이 script:src로 해주는데, /앞에 js폴더가 그 뒤에는 파일이 붙는다.

---

[확인절차]

잘 연결 됐는지 확인하는 절차가 반드시 필요하고 그만큼 중요하다!!

$ ( " 선택자 " ) . 이벤트 ( " 속성 " , " 속성값 " ) ;

이렇게 적어주고 확인해보면 나오지않는다.

왜??

브라우저에는 html, css, js 가 있는데 그 중에서 html, css가 가장 먼저 불려가야한다.

html과 css가 나오지도 않았는데 js에 동작을 넣어봤자 구조가 없기 때문에 실행되지 않는것이다.

 

html과 css보다 늦게 나오도록 늦춰주려면 원래 script태그를 html 가장 밑에 써준다.

위에 적었을 때 해결 방법은 자바스크립트 파일 오른쪽에 늦춰주는 속성 코드인 "defer"를 적어주면 된다.

---

[팝업 전 배경 만들기]

여백이 생기기 때문에 항상 body 노멀라이징 해주는 것 잊지말기

---

 

높이는 지정하지 않은 상태에서 너비만 1000으로 지정.

---

" 타이틀과 내용이 들어갈 박스를 형제로 각각 만들어주고,

title의 자식으로 h1이 들어가는데, h1의 텍스트에 TITLE이라고 써줄 것이다. " 

라는 젠코딩을 하고싶은데 저렇게 적어주면 h1의 인접동생으로 body-text가 만들어지기 때문에

 

이렇게 소괄호를 적어주면 한묶음으로 생각되면서 저 묶음의 인접동생으로 body-text가 만들어진다.

TITLE 텍스트를 중앙으로 옮겨준다.

---

body-text안에 lorem*50 해서 텍스트를 넣어주고 똑같이 중앙정렬 해준다.

---

[팝업 구현 시작]

팝업은 배경 완전 바깥쪽에 구조를 만들어줄 것이다.

popup-section을 띄워주기 위해서 position을 써줘야하는데,

position을 fixed로 해줘야 잘리지않고 스크롤을 따라간다.

fixed와 absolute는 너비가 auto일 때 0 이므로 

너비 100%를 적어줘야하는데 이와 다른 방법에는 

왼, 오, 위, 아래 모두 0으로 적용해주는 것이 있었다.

=> 화면 크기만큼 나옴.

 

opacity를 적용하면 안에 있는 모든 구조들까지 투명해지기 때문에 popup-section만 opacity를 적용하기 위해서

rgba를 적어서 마지막에 투명도를 조절해주기로 했었다.