inset-0

여러분 혹시 inset-0에 대해 아시나요?

---

🟣 사용 배경

평소 프론트엔드 퍼블리싱을 하며 position이 absolute이거나 fixed인 요소의 중앙정렬이 어려웠다

내가 이번에 구현한 로딩화면을 예로 들어보겠다

const Loading = () => {
    return (
        <div className="fixed top-0 left-1/2 z-[5000] -translate-x-1/2 w-full max-w-[600px] h-full bg-black bg-opacity-50 flex">
            <div className="w-[50px] h-[100%] bg-white fixed left-1/2 -translate-x-1/2   ">
                <Image src={LoadingGif} alt="Loading..." />
            </div>
        </div>
    );
};

fixed로 포시져닝을 하고 중앙정렬을 위해 여기서 겟한 코드를 가져다 써봤는데 도통 중앙정렬이 되지 않았다ㅠㅠ
위의 코드는 중앙정렬 성공 전 마지막 코드이다

🟣 inset-0 의 발견

절대 위치(absolute)나 고정 위치(fixed)를 가진 요소를 중앙정렬 시키기 위해서는 부모 컨테이너나 뷰포트에 대해 요소를 꽉 채우도록 left:0, right:0, bottom:0 이런식으로 스타일 속성을 주어야 한다! (옛날에 배웠던 css 지식이 생각났다!)

근데 inset-0 이란 상하좌우를 다 0값으로 주는 아주 편리한 속성이다
즉 다음 속성과 동일한 효과를 제공한다

top: 0;
right: 0;
bottom: 0;
left: 0;

사용목적

• 배경 이미지나 오버레이를 전체적으로 확장시킬 때
• 모달, 팝업, 드로어 메뉴 등을 화면 전체에 표시할 때
• 다른 요소들을 감싸는 컨테이너의 경계를 설정할 때

🟣 결과