AAtomic CSS

left

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

클래스 패턴

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

클래스CSS설명
l0left: 0좌측에 붙임
l8pxleft: 8px좌측에서 8px 오른쪽
l16pxleft: 16px좌측에서 16px 오른쪽
l2remleft: 2rem좌측에서 20px 오른쪽
l8remleft: 8rem좌측에서 80px 오른쪽
l50pleft: 50%부모 너비의 50% 오른쪽
laleft: auto기본값 (자동)
neg-l2remleft: -2rem좌측 밖으로 20px 벗어남

시각적 비교

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

absolute 요소의 left 오프셋 비교

l0
l2rem
l8rem
l50p

l0은 좌측에 붙고, 값이 커질수록 오른쪽으로 이동합니다

클래스별 상세

l{N}{unit}left: {value}

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

<!-- 드롭다운 메뉴 -->
<div class="pr">
  <button>메뉴 열기</button>
  <ul class="pa t100p l0 bg18181B b1pxsolid27272A br8px p16px mt4px lsn">
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
  </ul>
</div>

<!-- 전체 너비 오버레이 -->
<div class="pf t0 l0 w100p h100vh bg0-0-0-50 zi100 df jcc aic">
  <div class="bg18181B p3-2rem br12px">모달 콘텐츠</div>
</div>

<!-- 수평 가운데 정렬 -->
<div class="pr h10rem">
  <div class="pa l50p ttxneg-50p bg6366F1 cFFFFFF py8px px16px br4px">
    가운데 정렬
  </div>
</div>

laleft: auto

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

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

neg-l{N}{unit}left: -{value}

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

<!-- 좌측 밖으로 튀어나오는 장식 -->
<div class="pr oh bg18181B p2rem br8px">
  <div class="pa neg-l2rem t2rem w4rem h4rem bg6366F1 br100p"></div>
  카드 콘텐츠
</div>

팁 & 주의사항

position 필수

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

가운데 정렬 패턴

pa l50p와 transform: translateX(-50%)을 조합하면 수평 가운데 정렬이 됩니다. 또는 pa l0 r0에 mxa를 사용할 수도 있습니다.

left와 right 동시 설정

pa l0 r0은 요소를 부모의 전체 너비로 늘립니다. 오버레이나 전체 너비 배경에 유용합니다.

toprightbottominsetposition