노트

inset 속성

CSS inset Property

프런트엔드#css · 연결된 개념 3개

쉽게 말하면

inset은 top, right, bottom, left를 한 번에 정하는 속성이에요. inset: 0을 주면 텐트 네 귀퉁이를 말뚝에 박듯 네 변이 기준 상자에 붙어서, 크기를 안 줘도 꽉 찬 오버레이가 돼요.

비유가 깨지는 곳 말뚝을 뽑는 inset: auto로 바꾸면 늘려 주던 힘이 사라져 내용만큼 쪼그라들어요. 반응형 다이얼로그를 데스크톱용으로 바꿀 때 width: 100%와 max-width를 같이 줘야 하는 이유예요.

top·right·bottom·left를 한 번에 지정하는 단축 속성. inset: 0은 네 방향을 모두 0으로 둔다. Tailwind의 inset-0·inset-auto 클래스가 이 속성이다.

  • position: absolute나 fixed 요소에 inset: 0을 주면 네 변이 기준 상자(absolute는 가장 가까운 positioned 조상, fixed는 뷰포트(Viewport))에 붙어서 width·height 없이도 꽉 찬다. 전체 화면 오버레이를 만들 때 쓴다
  • inset: auto는 기본값으로 돌린다. 늘어나는 효과가 사라지므로 크기는 콘텐츠로만 정해진다
  • inset: 0에 크기 제한과 margin: auto를 더하면 가운데 정렬이 된다 → CSS 가운데 정렬

반응형에서 함정

모바일에서는 전체 화면, 데스크톱에서는 가운데 뜨는 상자로 바꾸는 다이얼로그에서 자주 걸린다.

.dialog { position: fixed; inset: 0; }               /* 모바일: 꽉 참 */
@media (min-width: 640px) {
  .dialog {
    inset: auto;                                      /* 늘어남 해제 */
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; max-width: 48rem;                    /* 이게 없으면 콘텐츠 크기로 쪼그라든다 */
  }
}

inset: auto로 바꾸는 순간 요소를 늘려 주던 힘이 사라지므로, 너비를 직접 주지 않으면 내용만큼 좁아진다. width: 100%로 잡고 max-width로 상한을 두는 식으로 푼다.

참고: MDN — inset

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • CSS 박스 모델

    브라우저는 모든 요소를 사각형 상자로 보고, 그 상자를 안쪽부터 콘텐츠(content) → 안쪽 여백(padding) → 테두리(border) → 바깥 여백(margin) 네 겹으로 계산한다. 레이아웃에서 요소가 차지하는 크기와 요소 사이 간격이 모두 이 네 겹에서 나온다.

  • Tailwind CSS

    flex, px-4, text-sm처럼 속성 하나를 담은 유틸리티 클래스(Utility Class)를 마크업에 조합해 스타일을 입히는 CSS 프레임워크. 빌드할 때 소스를 훑어 실제로 쓰인 클래스의 CSS만 만들어 내는 빌드 도구이고, 런타임에 돌아가는 JS(JavaScript)는 없다.

  • CSS 명시도

    캐스케이드에서 레이어까지 비겼을 때, 선택자가 요소를 얼마나 구체적으로 가리키는지로 승부를 내는 점수. (A, B, C) 세 자리로 매기고 앞자리부터 비교한다.

  • Flexbox

    한 방향(행 또는 열)으로 아이템을 배치하고 남는 공간을 나눠 주는 1차원 레이아웃 방식. 부모에 display: flex를 주면 부모는 flex 컨테이너(Flex Container), 자식은 flex 아이템(Flex Item)이 된다. 아이템이 늘어서는 방향이 주축(Main Axis), 그에 수직인 방향이 교차축(Cross Axis)이다.

  • content-visibility

    화면 밖에 있는 요소의 렌더링을 건너뛰어도 된다고 브라우저에 알려 주는 CSS 속성. auto를 주면 뷰포트에서 멀리 있는 요소의 레이아웃·페인트를 생략하므로, 긴 페이지의 첫 렌더링과 스크롤이 빨라진다.

보기 옵션