AAtomic CSS

right

위치가 지정된 요소의 우측 오프셋을 설정합니다. position이 relative, absolute, fixed, sticky인 요소에서만 동작합니다.

클래스 패턴

r{N}{unit} 형태로 값을 지정합니다. 음수는 neg-r{N}{unit} 패턴을 사용합니다.

클래스CSS설명
r0right: 0우측에 붙임
r8pxright: 8px우측에서 8px 안쪽
r16pxright: 16px우측에서 16px 안쪽
r2remright: 2rem우측에서 20px 안쪽
r5remright: 5rem우측에서 50px 안쪽
r50pright: 50%부모 너비의 50% 안쪽
raright: auto기본값 (자동)
neg-r2remright: -2rem우측 밖으로 20px 벗어남

시각적 비교

position이 설정된 부모 안에서 right 값에 따라 요소가 어떻게 이동하는지 확인하세요.

absolute 요소의 right 오프셋 비교

r0
r2rem
r5rem
r50p

r0은 우측에 붙고, 값이 커질수록 왼쪽으로 이동합니다

클래스별 상세

r{N}{unit}right: {value}

위치가 지정된 요소의 우측 기준점에서의 거리를 설정합니다. px, rem, % 단위를 지원합니다.

<!-- 우상단 닫기 버튼 -->
<div class="pr bg18181B p2rem br8px">
  <button class="pa t8px r8px bg27272A cFFFFFF w3-2rem h3-2rem br100p bn cp df jcc aic">X</button>
  <p class="cFAFAFA">모달 콘텐츠</p>
</div>

<!-- 우측 고정 알림 -->
<div class="pf t2rem r2rem bg6366F1 cFFFFFF p16px br8px zi50">
  알림 메시지
</div>

<!-- 부모 우측에 뱃지 -->
<div class="pr dib">
  <img class="w4rem h4rem br100p" />
  <span class="pa t0 r0 bg34D399 c000000 fs12px py2px px6px br4px">온라인</span>
</div>

raright: auto

right를 기본값(auto)으로 되돌립니다. 반응형에서 특정 breakpoint에서 right 위치를 해제할 때 유용합니다.

<!-- 반응형: 모바일에서 right 해제 -->
<div class="pa r2rem sm-ra sm-pr">
  데스크탑에서는 absolute + right: 2rem
  모바일에서는 위치 해제
</div>

neg-r{N}{unit}right: -{value}

음수 right 값을 설정합니다. 요소를 부모 우측 밖으로 이동시킬 때 사용합니다.

<!-- 우측 밖으로 튀어나오는 요소 -->
<div class="pr oh bg18181B p2rem br8px">
  <div class="pa t2rem neg-r2rem bg6366F1 cFFFFFF py8px px16px br4px fs14px">
    우측 밖으로 삐져나옴
  </div>
  카드 콘텐츠
</div>

팁 & 주의사항

position 필수

right는 position: static(기본값)에서는 동작하지 않습니다. 반드시 pr, pa, pf, ps 중 하나와 함께 사용하세요.

right vs left 우선순위

left와 right를 동시에 설정하면, LTR 환경에서는 left가 우선합니다. 양쪽 동시 설정은 요소의 너비를 늘리는 효과를 줄 수 있습니다.

닫기 버튼 패턴

pa t8px r8px는 모달이나 카드의 우상단 닫기 버튼에 자주 사용되는 패턴입니다.

topbottomleftinsetposition