[첫번째 프로젝트]팀원 소개 페이지 만들기

나의 첫번째 프로젝트 팀원 소개 페이지 만들기..

중에서 

나는 팀원 소개 모달창이 뜨는 화면 구현을 맡았다. 

자신없어서 제일 하기 싫었던 부분은 비밀 ㅜㅜ 

 

우선 자바스크립트는 뒤로하고 html, css 만들어보기로 했는데 부트스트랩을 사용해서 하라는데 모르겠어...!!!!

그래서 열심히 구글링해서 찾은 광명!

부트스트랩을 사용해서는 결국 못했지만 간단한 js로 모달창이 구현될 수 있도록 해봄

const modal = document.querySelector('.modal'); // .modal을 선택
const btnOpenModal=document.querySelector('.btn-open-modal'); // .btn-open-modal을 선택

btnOpenModal.addEventListener("click", ()=>{ // btnOpenModal을 눌렀을때 이벤트가 발생
   modal.style.display="flex"; // 모달창 나타나기
});

const closebtn = document.querySelector("#close")

closebtn.addEventListener("click", ()=>{
    modal.style.display = "none"; // id값 close로 설정된 x 아이콘을 누르면 모달창 사라짐
})

 

다행히 이 밖에 css구현이나 html 구조는 크게 어렵지는 않았다

내 손이 너무 느릴뿐..ㅜㅜ

---

 

그것은 나의 착각 ㅠ

css 구현하는데도 구글의 힘을 빌렸던것을 깜빡했다

.modal {
  position: absolute;  
  // 아래 .modal_body에서 position 값을 줘야하기때문에 absolute 줌
  display: none;
  // 처음 버튼을 누르기 전에 모달창이 안보이게 함

  justify-content: center; 
  // 전체 .modal_body가 가운데 화면의 가운데에 올 수 있도록

  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.4);  
  // 모달창이 떴을 때 뒷쪽 배경이 흐려지는 백그라운드 컬러
}


.modal_body {
  position: absolute;  // 부모태그의 위치를 기준으로 
  top: 50%; // 위에서 50% 떨어진 지점으로 이동
  
  width: 1032px;
  height: 408px;
  padding: 40px;
  
  text-align: center;
  background-color: white;
  border-radius: 10px;
  
  transform: translateY(-50%);  // y축으로 -50% 이동
  
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.modal에서 justify-content값을 주지 않으면 이렇게 됨

.modal_body에서 transform 값이 없으면 이렇게 됨

 

 

 

---

 

도움주신(내가 일방적으로 받은) 블로거님들

https://m.blog.naver.com/brusher3063/221692760140

[HTML/CSS] transform 속성

https://myeongsu0257.tistory.com/147#%EB%AA%A8%EB%8B%AC%EC%B0%BD%EC%9D%B4%EB%9E%80%3F-1

모달창 만들기(Modal/Dialog)