scroll-margin

scroll-margin

scroll-margin 유틸리티는 스냅 컨테이너 안의 아이템 주변에 스크롤 오프셋(간격)을 설정해 줘요. 스냅될 때 요소가 컨테이너 가장자리에 딱 붙지 않게 하고 싶을 때 유용하답니다.

출처: 문서

본문

클래스 스타일 (ClassStyles)

전체 (All sides)

클래스	CSS
scroll-m-<number>	scroll-margin: calc(var(--spacing) * <number>);
-scroll-m-<number>	scroll-margin: calc(var(--spacing) * -<number>);
scroll-m-px	scroll-margin: 1px;
-scroll-m-px	scroll-margin: -1px;
scroll-m-(<custom-property>)	scroll-margin: var(<custom-property>);
scroll-m-[<value>]	scroll-margin: <value>;

좌우 (Inline)

클래스	CSS
scroll-mx-<number>	scroll-margin-inline: calc(var(--spacing) * <number>);
-scroll-mx-<number>	scroll-margin-inline: calc(var(--spacing) * -<number>);
scroll-mx-px	scroll-margin-inline: 1px;
-scroll-mx-px	scroll-margin-inline: -1px;
scroll-mx-(<custom-property>)	scroll-margin-inline: var(<custom-property>);
scroll-mx-[<value>]	scroll-margin-inline: <value>;

상하 (Block)

클래스	CSS
scroll-my-<number>	scroll-margin-block: calc(var(--spacing) * <number>);
-scroll-my-<number>	scroll-margin-block: calc(var(--spacing) * -<number>);
scroll-my-px	scroll-margin-block: 1px;
-scroll-my-px	scroll-margin-block: -1px;
scroll-my-(<custom-property>)	scroll-margin-block: var(<custom-property>);
scroll-my-[<value>]	scroll-margin-block: <value>;

inline 시작 (Inline start)

클래스	CSS
scroll-ms-<number>	scroll-margin-inline-start: calc(var(--spacing) * <number>);
-scroll-ms-<number>	scroll-margin-inline-start: calc(var(--spacing) * -<number>);
scroll-ms-px	scroll-margin-inline-start: 1px;
-scroll-ms-px	scroll-margin-inline-start: -1px;
scroll-ms-(<custom-property>)	scroll-margin-inline-start: var(<custom-property>);
scroll-ms-[<value>]	scroll-margin-inline-start: <value>;

inline 끝 (Inline end)

클래스	CSS
scroll-me-<number>	scroll-margin-inline-end: calc(var(--spacing) * <number>);
-scroll-me-<number>	scroll-margin-inline-end: calc(var(--spacing) * -<number>);
scroll-me-px	scroll-margin-inline-end: 1px;
-scroll-me-px	scroll-margin-inline-end: -1px;
scroll-me-(<custom-property>)	scroll-margin-inline-end: var(<custom-property>);
scroll-me-[<value>]	scroll-margin-inline-end: <value>;

block 시작 (Block start)

클래스	CSS
scroll-mbs-<number>	scroll-margin-block-start: calc(var(--spacing) * <number>);
-scroll-mbs-<number>	scroll-margin-block-start: calc(var(--spacing) * -<number>);
scroll-mbs-px	scroll-margin-block-start: 1px;
-scroll-mbs-px	scroll-margin-block-start: -1px;
scroll-mbs-(<custom-property>)	scroll-margin-block-start: var(<custom-property>);
scroll-mbs-[<value>]	scroll-margin-block-start: <value>;

block 끝 (Block end)

클래스	CSS
scroll-mbe-<number>	scroll-margin-block-end: calc(var(--spacing) * <number>);
-scroll-mbe-<number>	scroll-margin-block-end: calc(var(--spacing) * -<number>);
scroll-mbe-px	scroll-margin-block-end: 1px;
-scroll-mbe-px	scroll-margin-block-end: -1px;
scroll-mbe-(<custom-property>)	scroll-margin-block-end: var(<custom-property>);
scroll-mbe-[<value>]	scroll-margin-block-end: <value>;

위 (Top)

클래스	CSS
scroll-mt-<number>	scroll-margin-top: calc(var(--spacing) * <number>);
-scroll-mt-<number>	scroll-margin-top: calc(var(--spacing) * -<number>);
scroll-mt-px	scroll-margin-top: 1px;
-scroll-mt-px	scroll-margin-top: -1px;
scroll-mt-(<custom-property>)	scroll-margin-top: var(<custom-property>);
scroll-mt-[<value>]	scroll-margin-top: <value>;

오른쪽 (Right)

클래스	CSS
scroll-mr-<number>	scroll-margin-right: calc(var(--spacing) * <number>);
-scroll-mr-<number>	scroll-margin-right: calc(var(--spacing) * -<number>);
scroll-mr-px	scroll-margin-right: 1px;
-scroll-mr-px	scroll-margin-right: -1px;
scroll-mr-(<custom-property>)	scroll-margin-right: var(<custom-property>);
scroll-mr-[<value>]	scroll-margin-right: <value>;

아래 (Bottom)

클래스	CSS
scroll-mb-<number>	scroll-margin-bottom: calc(var(--spacing) * <number>);
-scroll-mb-<number>	scroll-margin-bottom: calc(var(--spacing) * -<number>);
scroll-mb-px	scroll-margin-bottom: 1px;
-scroll-mb-px	scroll-margin-bottom: -1px;
scroll-mb-(<custom-property>)	scroll-margin-bottom: var(<custom-property>);
scroll-mb-[<value>]	scroll-margin-bottom: <value>;

왼쪽 (Left)

클래스	CSS
scroll-ml-<number>	scroll-margin-left: calc(var(--spacing) * <number>);
-scroll-ml-<number>	scroll-margin-left: calc(var(--spacing) * -<number>);
scroll-ml-px	scroll-margin-left: 1px;
-scroll-ml-px	scroll-margin-left: -1px;
scroll-ml-(<custom-property>)	scroll-margin-left: var(<custom-property>);
scroll-ml-[<value>]	scroll-margin-left: <value>;

예시 (Examples)

기본 예시 (Basic example)

scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number>, scroll-ml-<number> 유틸리티(예: scroll-ml-4, scroll-mt-6)를 사용하면 스냅 컨테이너 안의 아이템 주변에 스크롤 오프셋을 설정할 수 있어요:

이미지 그리드에서 스크롤해 기대했던 동작을 확인해 보세요.

<div class="snap-x ...">
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-01.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-02.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-03.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-04.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-05.jpg"/>
  </div>
</div>

음수 값 사용하기 (Using negative values)

음수 스크롤 여백 값을 사용하려면 클래스 이름 앞에 대시(-)를 붙여 음수 값으로 변환하면 돼요:

<div class="snap-start -scroll-ml-6 ...">
  <!-- ... -->
</div>

논리 속성 사용하기 (Using logical properties)

scroll-ms-<number>와 scroll-me-<number> 유틸리티를 사용하면 텍스트 방향에 따라 왼쪽 또는 오른쪽에 매핑되는 scroll-margin-inline-start와 scroll-margin-inline-end 논리 속성을 설정할 수 있어요:

<div dir="ltr">
  <div class="snap-x ...">
    <div class="snap-start scroll-ms-6 ...">
      <img src="/img/vacation-01.jpg"/>
    </div>
    <!-- ... -->
  </div>
</div>

<div dir="rtl">
  <div class="snap-x ...">
    <div class="snap-start scroll-ms-6 ...">
      <img src="/img/vacation-01.jpg"/>
    </div>
    <!-- ... -->
  </div>
</div>

더 세밀하게 제어하려면 현재 텍스트 방향에 따라 특정 스타일을 조건부로 적용할 수 있는 LTR과 RTL 수정자(modifier)를 사용할 수도 있어요.

scroll-mbs-<number>와 scroll-mbe-<number> 유틸리티를 사용하면 쓰기 모드(writing mode)에 따라 위쪽 또는 아래쪽에 매핑되는 scroll-margin-block-start와 scroll-margin-block-end 논리 속성을 설정할 수 있어요:

<div class="snap-y ...">
  <div class="snap-start scroll-mbs-6 ...">
    <!-- ... -->
  </div>
</div>

커스텀 값 사용하기 (Using a custom value)

scroll-ml-[<value>]나 scroll-me-[<value>] 같은 유틸리티를 사용하면 완전히 커스텀한 값으로 스크롤 여백을 설정할 수 있어요:

<div class="scroll-ml-[24rem] ...">
  <!-- ... -->
</div>

CSS 변수의 경우 scroll-ml-(<custom-property>) 문법을 사용할 수도 있어요:

<div class="scroll-ml-(--my-scroll-margin) ...">
  <!-- ... -->
</div>

이것은 scroll-ml-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 추가해 주는 문법이에요.

반응형 디자인 (Responsive design)

scroll-margin 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<div class="scroll-m-8 md:scroll-m-0 ...">
  <!-- ... -->
</div>

테마 커스터마이징 (Customizing your theme)

scroll-m-<number>, scroll-mx-<number>, scroll-my-<number>, scroll-ms-<number>, scroll-me-<number>, scroll-mbs-<number>, scroll-mbe-<number>, scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number>, scroll-ml-<number> 유틸리티는 --spacing 테마 변수에 의해 구동되며, 우리만의 테마에서 커스터마이즈할 수 있어요:

@theme {
  --spacing: 1px;
}

spacing scale 커스터마이징에 대해 더 알아보려면 theme variable 문서를 참고하세요.

더 알아보기 (Learn more)

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.