모달창 백그라운드 누르면 꺼지는법

<Back_Wrapper>
      <div className='close_back' onClick={() => setPersonalInformModal(false)}></div>
      <div className = 'back_wrap_1200'>
        <div className="close" onClick={() => setPersonalInformModal(false)}>
          &times;
        </div>
      <Wrapper> // 모달창영역

이런식으로 백을 가장 상위의 바로 안쪽에 따로 만든뒤에

 >div.close_back{
    /* background-color: red; */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

부모로부터 벗어나게 한뒤 전체 영역이 되게한다. 그럼 위에 떠있는것들 빼고는 백그라운드 영역을 모두 차지한다. 클릭하면 꺼지는 이벤트를 넣어준다. 나머지 태그들(모달창영역)은 자식영역이 아니므로 눌러도 속성이 전달되지 않아서 눌러도 꺼지지 않게된다.