CSS inset 속성(with 논리 방향 계열)

1. inset

1-1. 개요

• top, right, bottom, left 값을 한 번에 작성할 수 있는 단축 속성
• position: absolute나 fixed 요소의 위치 지정 시 코드 간결화에 유리
• 의미상 box를 사방에서 "안으로 밀어넣는" 개념

1-2. 기본 사용법

.selector {
  position: absolute;
  inset: 0;
}

→ top: 0; right: 0; bottom: 0; left: 0; 과 동일

1-3. 다양한 작성 예

.selector {
  inset: 10px;                     /* 네 방향 모두 10px */
  inset: 10px 20px;                /* top,bottom: 10px, left,right: 20px */
  inset: 10px 20px 30px;           /* top: 10px, left,right: 20px, bottom: 30px */
  inset: 10px 20px 30px 40px;      /* top, right, bottom, left 순 */
}

1-4. 퍼블리싱 포인트

• inset: 0 → 오버레이, 배경 전체 채우기에 유용
• 코드를 반복 없이 간결하게 작성 가능

1-5. 브라우저 호환성

2. inset-block, inset-inline

2-1. 개요

• inset: 물리 방향(top/right/bottom/left)의 단축 속성
• inset-block, inset-inline: 텍스트 흐름(writing-mode, direction 등)에 따라 달라지는 논리 방향 속성

2-2. 속성 정리

속성	설명	LTR 기준	RTL 기준
inset-block-start	세로 방향 시작	top	top
inset-block-end	세로 방향 끝	bottom	bottom
inset-inline-start	가로 방향 시작	left	right
inset-inline-end	가로 방향 끝	right	left

2-3. 사용 예시

2-3-1. LTR 기준 (왼 → 오)

2-3-2. RTL 기준 (오 → 왼)

2-4. 언제 유용할까?

• 다국어 대응이 필요한 UI (예: 아랍어, 히브리어 등 RTL 언어)
• left, right를 조건 분기 없이 처리하고 싶을 때

2-5. 브라우저 호환성