CSS🎨 모달창 만들기, div 중앙에 배치하기

모달창 중앙 배치

모달 창처럼 가장 상위 레이어에 가로, 세로 모두 중앙에 배치할 경우가 많은데 방법을 자꾸 잊어버려서 기록을 하려고 한다.
position을 주고, top과 left를 각각 50%으로 위치시킨 다음, x축과 y축으로 다시 각각 -50%씩 옮기면 된다.

position: fixed; // 또는 absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

또는 배경에 모달창이 자식으로 있을 경우 배경 div에 display:flex, justify-content, align-items를 모두 center를 주어도 가능하다.

 

div 가운데 정렬 margin: 0 auto;

다음과 같이 텍스트를 포함한 div를 가운데정렬을 하고 싶을 때에는

text-align: center;
margin: 0 auto;

 

event.stopPropagation()

모달 배경을 클릭하면 모달창이 사라지게 하고 싶은데, 이 때 모달창은 클릭의 대상이면 안된다. 그런데 배경(ModalBackdrop)에 onClick이벤트를 주었고 모달창(ModalView)가 그의 자식이기 때문에 이벤트버블링이 발생하여 onClick이벤트가 상속된다. 이러한 경우 이벤트를 막고 싶은 컴포넌트에 event.stopPropagation() 함수를 이벤트 핸들러로 사용을 하면, 우리가 의도한 이벤트 발생 요소에 대해서만 발생을 하고 그 외에 캡처링 또는 버블링 되는 이벤트는 막아준다. 코드는 다음과 같다.

<ModalBackdrop onClick={openModalHandler}>
    <ModalView onClick={(event) => event.stopPropagation()}>HELLO I AM MODAL :)</ModalView>
</ModalBackdrop>

 

이제 모달을 클릭해도 클릭이벤트가 작용하지 않고, 배경을 클릭했을 때에만 정상적으로 모달이 사라진다.

 

event.target

event.target은 이벤트가 발생했을 때 이벤트가 발생한 요소를 가리킨다. 

 

event.currentTraget

event 핸들러에서의 this. 현재 실행중인 이벤트의 핸들러가 할당된 요소