[CSS] inset과 position으로 완성하는 레이아웃

CSS를 다루다 보면 위치를 설정할 때 자주 사용하는 속성이 top, right, bottom, left입니다. 하지만 이 속성들을 각각 지정하다 보면 코드가 길어지고 유지보수가 어렵게 느껴질 때가 있죠. 이런 문제를 해결하기 위해 등장한 속성이 바로 inset 속성입니다. 이 포스팅에서는 inset 속성의 기본 사용법과 실전 활용 팁을 알려드리겠습니다.

inset 속성이란?

inset은 CSS에서 top, right, bottom, left를 한 번에 지정할 수 있는 단축 속성(Shorthand)입니다. 간결한 코드를 작성할 수 있도록 도와주며, 특히 레이아웃 작업 시 깔끔하고 직관적인 스타일링을 제공합니다.

 

element {
  inset: <top> <right> <bottom> <left>;
}

 

position 값별 inset 적용 가능 여부

✅ relative, absolute, fixed

 

• inset이 적용됩니다.
• 각각 다음 기준으로 요소의 위치를 설정합니다.
  • relative: 요소의 원래 위치에서 상대적으로 이동합니다.
  • absolute: 가장 가까운 positioned 부모 요소(relative, absolute, fixed)를 기준으로 이동합니다.
  • fixed: 브라우저 뷰포트(화면)를 기준으로 이동합니다.

❌ static

 

• inset이 적용되지 않습니다.
• static은 문서의 기본 흐름(normal flow)을 따르며, top, right, bottom, left, inset 등의 위치 속성이 모두 무시됩니다.

⚠️ sticky

 

• inset이 제한적으로 작동합니다.
• 스크롤 시 부모 요소의 스크롤 영역 경계를 기준으로 위치를 설정합니다.
• 주로 inset: <top> 값이 사용됩니다. 다른 방향(right, bottom, left)은 스크롤 컨테이너와의 관계에 따라 제한적으로 작동하거나 무시될 수 있습니다.

예시 코드로 inset 속성 이해하기

1. HTML

<div class="wrap">
   <div class="box">item</div>
</div>

 

2. CSS

 

 

.wrap {
  position: fixed;
  height:100vh;
  inset:0;
  background-color:lightgray;
}
.box {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: green;
  display:flex;
  align-items:center;
  justify-content:center;
}

예시코드 Preview

 

 

 

이렇게 inset 속성의 기본 사용법과 실전 활용 팁을 알아보았습니다.

 

 

 

[Terminal] nvm 설치 방법 및 오류 해결 하기

 

[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)

 

[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자

 

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

 

[Server] QuickConnect로 외부에서 서버 접속하는 방법