모달 창 만들기

 

 

 

Position 속성으로 absolute 를 적용하여 div 내의 input 과 button 을 강제로 화면에 위치 시키고 

div 창을 감싸는 class 명 blurContainer 로 화면전체 를 덮는다

이후  position 속성 absolute 적용하여 blur 적용 하면 된다.

 

 

배경을 흐리고 앞에 창을 띄우는 효과를 줄수 있다. 

 

 

 

 

모달창 가운데 위치 시키기 CSS 속성

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

 

 1. position: absolute;

• 부모 요소를 기준으로 위치를 지정.

2. top: 50%; left: 50%;

• 부모 요소의 왼쪽 위 모서리로부터 가로 세로 각각 50% 위치에 이 요소의 왼쪽 위 모서리를 맞춘다
• 즉, 이 상태만 있으면 요소의 왼쪽 위가 화면의 가운데에 오게된다.

3. transform: translate(-50%, -50%)

• 위에서 맞춰진 요소의 왼쪽 위 모서리를 자기 자신의 크기만큼 반대로 이동시켜, 정확히 중앙에 위치하게 한다.
• 즉, 자기 자신 너비의 50%만큼 왼쪽, 높이의 50%만큼 위로 이동.

 

 

 

 

 

 

이렇게 다른 버튼 클릭시 isModal 상태를 바꿔줘서  false 면 안보이고 ture 면 보일 수 있게 조건 설정을 해준다.

isModal && { <div ClassName="blurContainer"> 
             <모달창/>
             </div>}