sanguk.dev
작성완료
CSS 자식노드를 일정 간격 띄워서 배치 (inset)

CSS 자식노드를 일정 간격 띄워서 배치 (inset)

inset은 CSS에서 요소의 위치를 설정하는 축약 스타일 속성으로, top, right, bottom, left를 간편하게 지정할 수 있다. 사용 예로는 inset(상 우 하 좌)와 같은 문법이 있으며, 이를 통해 요소의 위치를 효율적으로 조정할 수 있다.

CSS & SASS & SCSS

개요

inset은 태그 요소의 위치를 결정하는 top, right, bottom, left의 축약 스타일 속성이다. 즉 상하좌우를 각각의 css 속성으로 설정하지 않고 inset 하나만 사용하는 것이 가능하다. 사실 inset을 사용하지 않더라도 top, right, bottom, left 등을 사용할 수 있다.

문법

css
inset(상 우 하 좌);
inset(상하 좌우);
inset(상하좌우);
  • margin, padding과 같이 축약식 선언을 사용할 수 있다.

활용사례

**top****, right, bottom, ****left**사용

css
div {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

**inset**사용

css
div {
  position: absolute;
  inset: 20px;
}