Menu Slider & Modal (6) - wrap up

 

 

1. HTML에서

- Menu slider나 modal 모두 일단 순서대로 html에 작성

- modal을 감싸는 modal container를 만들어서

거기에 어두운 배경색을 깔고

opacity를 적당히 줘서 뒷배경 전체 흐리게 하는 효과

 

 

 

2. CSS에서

- li:first-of-type 이렇게 하면 li 중 첫번째 li가 select 된다

 

- position:fixed를 하면 document flow에서 벗어나서 부모 element를 기준으로 배치되고 거기에 고정.

 

- nav에 width:200px주고 transform:translateX(-100%);해서 일단 화면에서 없앤다.

-> 나중에 toggle해서 body에 showNav라는 class list가 추가됐을때

transform:translateX(200px);을 줘서 화면에 다시 나타나게 한다.

이때 body에 transition:transfomr 0.3s ease를 주면

nav가 조금 더 천천히 부드럽게 움직인다.

 

 

 

-

  background-color: rgba(0, 0, 0, 0.6);

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

이 div가 화면 전체를 뒤덮어 주심

 

-

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

이렇게 하니 부모 element의 정중앙에 놓임.

 

- modal창에 animation 넣어서 나타날 때 smooth~~하게 나타나도록

 

 

 

 

// Show modal
open.addEventListener('click', () => modal.classList.add('show-modal'));

// Hide modal
close.addEventListener('click', () => modal.classList.remove('show-modal'));

// Hide modal on outside click
window.addEventListener('click', e =>
  e.target == modal ? modal.classList.remove('show-modal') : false
);

강사님 코드

classList에 show-modal을 넣어주고

그에 해당하는 스타일을 css에 넣어주는 방식

 

나는 그냥

open.addEventListener("click", () => {
  modalContainer.style.display = "block";
});

close.addEventListener("click", () => {
  modalContainer.style.display = "none";
});

window.addEventListener("click", (e) => {
  e.target.classList.contains("modal-container")
    ? (modalContainer.style.display = "none")
    : false;
});

event 걸리면 바로 style에 접근해서 

display:block 하거나 display:none

 

아직은 어느 쪽이 더 좋은 방법인지는 모름 ;-;...

 

 

그래도 드디어 메뉴 슬라이더랑 모달창 만들기를 해봤다!!!!!!!!!!!!!!!!!!!!!

 

 

 

 

일요일에 다시 처음부터 끝까지 만들어 봐야겠다!