scroll-padding

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

출처: 문서

본문

클래스 스타일 (ClassStyles)

전체 (All sides)

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

좌우 (Inline)

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

상하 (Block)

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

inline 시작 (Inline start)

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

inline 끝 (Inline end)

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

block 시작 (Block start)

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

block 끝 (Block end)

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

위 (Top)

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

오른쪽 (Right)

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

아래 (Bottom)

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

왼쪽 (Left)

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

예시 (Examples)

기본 예시 (Basic example)

scroll-pt-<number>, scroll-pr-<number>, scroll-pb-<number>, scroll-pl-<number> 유틸리티(예: scroll-pl-4, scroll-pt-6)를 사용하면 스냅 컨테이너 안에서 요소의 스크롤 오프셋을 설정할 수 있어요:

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

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

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

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

<div dir="ltr">
  <div class="snap-x scroll-ps-6 ...">
    <!-- ... -->
  </div>
</div>

<div dir="rtl">
  <div class="snap-x scroll-ps-6 ...">
    <!-- ... -->
  </div>
</div>

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

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

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

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

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

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

<div class="scroll-pl-(--my-scroll-padding) ...">
  <!-- ... -->
</div>

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

반응형 디자인 (Responsive design)

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

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

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

scroll-p-<number>, scroll-px-<number>, scroll-py-<number>, scroll-ps-<number>, scroll-pe-<number>, scroll-pbs-<number>, scroll-pbe-<number>, scroll-pt-<number>, scroll-pr-<number>, scroll-pb-<number>, scroll-pl-<number> 유틸리티는 --spacing 테마 변수에 의해 구동되며, 우리만의 테마에서 커스터마이즈할 수 있어요:

@theme {
  --spacing: 1px;
}

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

더 알아보기 (Learn more)

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