Menu Slider & Modal (4) - Style Modal

본 포스트는 udemy.com에 올라온 Brad Traversy의 20 Web Projects With Vanilla JavaScript 강의 중 하나를 정리한 내용입니다.

https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 

20 Web Projects With Vanilla JavaScript

 

 

 

 

 

.modal-container {
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

 

modal을 감싸고 있는 modal-container는 위 이미지에서도 보이듯

modal 뒤 화면을 다 둘러싸고 있는 어두운 background

 

그래서 background-color를 black으로 하고 opacity만 0.6으로 준다.

 

display:none으로 한 건 나중에 버튼을 눌렀을 때만 모달창이 나타나야 하기 때문에

(modal style하는 동안에는 잠시 comment처리를 해놔야한다.)

 

position:fixed

top,right,bottom,left 다 0으로

화면 위 전체를 덮는다

 

 

 

 

 

.modal {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  width: 400px;
}

modal창의 배경색은 흰색

border-radius를 줘서 모서리가 약간 둥글게

그리고 box-shadow를 준다.

 

overflow:hidden 줘서 어떤 스크롤바도 나타나지 않게

 

position은 absolute를 줘서 ancestor element인 modal-container 기준으로 배치

top:50%, left:50%하면 완전 정중앙에 배치되지 않는데

transform: translate(-50%, -50%)를 주면 확실히 화면 중앙에 배치된다.

 

width:400px

max-width:100%

화면이 늘어나도 400px 크기 차지하고 그 안에서 100%

 

 

 

.modal-header {
  background: var(--primary-color);
  color: #fff;
  padding: 15px;
}

.modal-header h3 {
  margin: 0;
  border-bottom: 1px solid #333;
}

.close-btn {
  background: transparent;
  font-size: 25px;
  position: absolute;
  top: 0;
  right: 0;
}

모달 헤더 부분 배경색과 글자색 패딩

헤더 속 h3 마진 없애고 border-bottom 줄 하나

close-btn은 transparent한 배경색,

font-size로 크기 조절

 

position:absolute

top:0

right:0

하면 close button을 포함하고 있는 modal <div>를 기준으로 오른쪽 위에 배치된다.

그래서 보기에는 header 속에 쏙 들어와 있는 것처럼 보임

 

 

 

 

.modal-content {
  padding: 20px;
}

.modal-form div {
  margin: 15px 0;
}

.modal-form label {
  display: block;
  margin-bottom: 5px;
}

.modal-form .form-input {
  padding: 8px;
  width: 100%;
}

modal content와 그 속에 들어있는 form styling 차례

modal content 전체에 padding을 준다.

그리고 각 label과 input을 둘러싸고 있는 div에 margin을 줘서 딱 달라붙어 있지 않게

 

label에 display:block을 주면 label이 block element가 되어서

label이 윗줄 input이 아래줄로

 

input에 패딩을 줘서 크기를 키우고 width:100%를 줘서 창에 가득 차도록 한다.