Dim Layer, Box-shadow

✔ Dim Layer

HTML 은 뒷 배경으로 깔릴 Dim Layer 1개랑, 그 내부에 콘텐츠가 들어갈 div 로 구성한다. 콘텐츠가 모달 같이 내용이 들어갈 경우 배경색 background-color 도 넣어준다

    <div className='dim'>
      <div>
        <ReactLoading type='balls' />
      </div>
    </div>

position: absolute; 로 뷰포트 기준으로 요소를 배치한다. 레이아웃에서 차지하는 영역이 없으므로 다른 레이어 배치에는 전혀 영향을 미치지 않는다
내부에 div 는 중앙에 배치하도록 정렬한다. 이 때 사용한 방법은 absolute 의 중앙정렬법을 따른다 😄

.dim {
  position: absolute;
  top: 0; /* top ~ bottom 까지 4개 다 써줘야 전체 viewport 를 덮어주었다 */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background-color: #000; /* 바꾸는 게 좋겠다 */
  opacity: 0.3;

  & div {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

 

✔ box-shadow

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color

아래 링크에 예시가 많아서 복붙해서 쓰기 좋다

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

 

CSS Scan - The fastest and easiest way to check, copy and edit CSS

 

참고

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

https://getcssscan.com/css-box-shadow-examples

.