CSS) transform, 모달 이외 영역 배경색

transform 속성

1. 애니메이션 효과 제공
2. x축과 y축을 따라 지정된 거리만큼 요소 이동시킬 때 사용
3. 요소에 회전, 크기 조절, 기울이기, 이동 효과 부여 가능

• transform: element변형 시 사용
• translate: transform에 속해있는 translate는 transform과 같이 사용 가능(scale, rotate 같은 예제)
• transition: element 변형 시 속도, 시간, 횟수 조회

ex) 특정 영역 화면 가운데 배치 하고 싶을 때

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

position속성과 top, left속성 이외에 transform으로 translate(-50%, -50%)적용 해 주면 element에 위치를 옮길 수 있다.

모달 이외 배경 색 어둡게 하고싶을 때

프로젝트 개발 도중 모달 영역을 만들었는데, 모달이 떴을 때 모달 이외배경을 어둡게 만들고싶었다.
Modal컴포넌트를 가장 최상단 컴포넌트에 배경을 어둡게 했었는데, 어둡게 되긴 했는데 애매하게 됐다. 버튼이나, 이미지, 인풋 영역들은 적용이 되지 않았다..

-> 해결
모달을 감싸는 새로운 컴포넌트를 만들어서 최상단말고 모달만 감싸는 컴포넌트에 css속성을 적용시키면 해결이 가능했다.

    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);

적용한 css 속성이다.