[Css] inset 속성에 대해 알아보자

포트폴리오를 제작하면서 기술 테크 UI를 구성하다가

inset이란 속성을 처음 접하게 되어 간단하게 정리해본다.

 

 

inset 속성이란?

 

먼저 inset 사전적 의미를 찾아보면

끼워넣다, 삽입하다 라는 의미를 알 수 있다.

 

Css 적으로 사용되는 inset 정의로는,

태그 요소의 위치를 결정하는 top, right, bottom, left의 '축약 스타일 속성'이다.

상하좌우를 각각의 css 속성으로 설정하지 않고 inset 하나로 사용하는 것이 가능하다.

 

 

 

 

그렇다면, 해당 속성은 '언제' 사용할까?

 

 

: 특정 엘리먼트의 위치를 조정하기 위한 방법 중 하나로 사용이 가능하다.

 

장점 : Css 애니메이션 구현 시, 이미 선언된 스타일 속성을 변경하지 않으면서

위치를 변경할 수 있다. // 비장의 카드 너낌,,

 

 

 

다음은 엘리먼트 위치 이동을 위해서 사용되는 속성들이다. 

 

1. top, bottom, right, left 속성

2. transform 의 translate 

3. inset 

 

등이 존재한다.

1번 2번을 이미 사용한 상황에서 엘리먼트를 조정해야 할 일이 생길 시에 요긴하게 사용이 될 것 같다.

기존의 스타일을 변경하지 않으면서도 위치를 변경하는 방법으로 사용될 수 있기 때문이다

 

 

사용방법

.a{
    inset(top right bottom left)
  }
.b{
    inset(50px 50px) //축약 식1
  }
.c{
    inset(50px) //축약 식2
  }