TIL - CSS 삽입 특성 속기

반응형

나는 최근에 상, 우측, 좌측, 하단의 속성을 나타내는 CSS 속기인 inset에 대해 배웠다.

저는 이것을 "이것이 전체 화면이다"라는 좀 더 표현적인 표현으로요.

예를 들어 요소가 전체 화면을 차지하도록 하려면:

.fullscreen {
    position: fixed;
    inset: 0;
}

이는 사실상 다음과 같습니다.

 

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

// or, what I always used to do...

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
      height: 100vh;
}

MDN 문서: https://developer.mozilla.org/en-US/docs/Web/CSS/inset