AAtomic CSS

inset

top, right, bottom, left를 한 번에 설정하는 단축 속성입니다. in0은 positioned 부모를 완전히 채우는 가장 간결한 방법입니다.

클래스 패턴

in{N}{unit} 형태로 값을 지정합니다. inset: 0은 top: 0; right: 0; bottom: 0; left: 0과 동일합니다.

클래스CSS설명
in0inset: 0사방 0. positioned 부모를 완전히 채움
in8pxinset: 8px사방 8px 안쪽으로 여백
in2reminset: 2rem사방 20px 안쪽으로 여백
in50pinset: 50%사방 50% 안쪽 (크기 0)
inainset: auto기본값 (자동)

시각적 비교

inset 값에 따라 요소가 부모 안에서 어떻게 배치되는지 확인하세요.

in0 — 부모를 완전히 채움

in0 (부모 전체를 채움)

inset: 0은 top/right/bottom/left 모두 0으로 설정하여 부모를 완전히 채웁니다

in2rem — 사방 여백

in2rem

사방 20px 안쪽으로 배치

in0 vs t0 r0 b0 l0 — 동일한 결과

t0 r0 b0 l0

in0과 동일하지만 4개 클래스가 필요

클래스별 상세

in0inset: 0

positioned 부모를 완전히 채웁니다. 오버레이, 배경, 클릭 영역 확장 등에 가장 많이 사용됩니다. t0 r0 b0 l0의 단축형입니다.

<!-- 모달 오버레이 -->
<div class="pf in0 bg0-0-0-50 zi100 df jcc aic">
  <div class="bg18181B p3-2rem br12px w40rem">
    <h2>모달 제목</h2>
    <p>모달 내용</p>
  </div>
</div>

<!-- 이미지 오버레이 (그라데이션 효과) -->
<div class="pr br8px oh">
  <img class="w100p db" />
  <div class="pa in0 bg0-0-0-40"></div>
  <h3 class="pa b2rem l2rem cFFFFFF zi1">제목 텍스트</h3>
</div>

<!-- 클릭 영역 확장 -->
<a href="#" class="pr dib">
  <span class="pa in0"></span>
  작은 링크 텍스트
</a>

자주 쓰는 조합

pa in0부모를 완전히 채우는 오버레이
pa in0 bg0-0-0-50반투명 어두운 배경 오버레이
pa in0 df jcc aic부모 전체에서 가운데 정렬
pf in0 zi100전체 화면 고정 오버레이 (모달)
pa in0 br8px oh둥근 모서리를 따르는 오버레이

inainset: auto

inset을 기본값(auto)으로 되돌립니다. 반응형에서 in0을 해제할 때 사용합니다.

<!-- 반응형: 모바일에서 오버레이 해제 -->
<div class="pa in0 sm-ina sm-pr">
  데스크탑에서는 오버레이
  모바일에서는 일반 배치
</div>

in{N}{unit}inset: {value}

사방에 동일한 오프셋을 설정합니다. 부모보다 약간 작은 오버레이나 내부 여백이 있는 배경에 사용합니다.

<!-- 안쪽 여백이 있는 오버레이 -->
<div class="pr h20rem bg27272A br8px">
  <div class="pa in2rem bg6366F1 o20 br4px"></div>
  <div class="pa in2rem df jcc aic cFFFFFF fw600">
    사방 2rem 여백이 있는 영역
  </div>
</div>

<!-- 포커스 링 효과 -->
<button class="pr py8px px16px bg6366F1 cFFFFFF br8px bn cp">
  <span class="pa in-4px br12px b2pxsolid6366F1 pen"></span>
  버튼
</button>

in0 vs t0 r0 b0 l0

두 표현은 동일한 결과를 만들지만, in0이 훨씬 간결합니다.

방식클래스클래스 수
inset 단축in01개
개별 속성t0 r0 b0 l04개

팁 & 주의사항

오버레이 필수 패턴

pa in0은 모달 배경, 이미지 오버레이, 카드 호버 효과 등에서 가장 자주 사용되는 패턴입니다. 부모에 pr이 있어야 합니다.

클릭 영역 확장

작은 버튼의 클릭 영역을 넓히려면 pr을 주고 pa in0 (또는 음수 inset) 요소를 추가합니다.

position 필수

inset은 top/right/bottom/left의 단축이므로, position이 static이면 동작하지 않습니다.

toprightbottomleftposition