음수값 (neg-)
neg- 접두사를 붙이면 음수값을 적용할 수 있습니다. 단, CSS 스펙상 음수를 허용하는 속성에서만 사용 가능합니다.
기본 문법
형식: neg- + 기존 클래스. 예: mt10px → neg-mt10px
<!-- margin-top: -10px -->
<div class="neg-mt10px">...</div>
<!-- transform: translateX(-50%) -->
<div class="neg-ttx50p">...</div>
<!-- z-index: -1 -->
<div class="neg-zi1">...</div>허용 속성
아래 속성에서만 neg-를 사용할 수 있습니다.
| 카테고리 | 속성 | 예시 | CSS |
|---|---|---|---|
| Margin | margin-top | neg-mt10px | margin-top: -10px |
| Margin | margin-right | neg-mr16px | margin-right: -16px |
| Margin | margin-bottom | neg-mb2rem | margin-bottom: -20px |
| Margin | margin-left | neg-ml8px | margin-left: -8px |
| Position | top | neg-t10px | top: -10px |
| Position | right | neg-r5px | right: -5px |
| Position | bottom | neg-b1rem | bottom: -10px |
| Position | left | neg-l50p | left: -50% |
| Typography | letter-spacing | neg-ls1px | letter-spacing: -1px |
| Typography | word-spacing | neg-ws2px | word-spacing: -2px |
| Typography | text-indent | neg-ti2rem | text-indent: -20px |
| 기타 | outline-offset | neg-oo2px | outline-offset: -2px |
| 기타 | z-index | neg-zi5 | z-index: -5 |
| 기타 | order | neg-order1 | order: -1 |
| Transform | translateX | neg-ttx50p | transform: translateX(-50%) |
| Transform | translateY | neg-tty50p | transform: translateY(-50%) |
| Transform | rotate | neg-tr90deg | transform: rotate(-90deg) |
사용 불가 속성
아래 속성은 CSS 스펙 자체가 음수를 허용하지 않으므로 neg-가 동작하지 않습니다.
paddingwidthheightmin-widthmax-widthmin-heightmax-heightfont-sizeline-heightgaprow-gapcolumn-gapborder-radiusborder-widthopacity사용 예시
<!-- ═══ 정중앙 배치 (가장 흔한 패턴) ═══ -->
<!-- absolute + translate(-50%, -50%) -->
<div class="pa t50p l50p neg-ttx50p neg-tty50p">
정중앙에 위치
</div>
<!-- 모달 다이얼로그 -->
<div class="pf t50p l50p neg-ttx50p neg-tty50p w40rem bg18181B br12px p3-2rem zi999">
<h2 class="fs2rem fw700 cFAFAFA mb16px">모달 제목</h2>
<p class="c71717A">모달 내용</p>
</div>
<!-- ═══ 요소 겹치기 (음수 마진) ═══ -->
<!-- 카드 겹침 효과 -->
<div class="df">
<div class="w8rem h8rem br50p bgFF6B6B zi3"></div>
<div class="w8rem h8rem br50p bg6366F1 neg-ml2rem zi2"></div>
<div class="w8rem h8rem br50p bg34D399 neg-ml2rem zi1"></div>
</div>
<!-- 이미지 위에 겹치는 텍스트 영역 -->
<div class="pr">
<img class="w100p" />
<div class="pr neg-mt6rem p2rem bg0-0-0-70 cFFFFFF">
이미지 위에 겹쳐지는 텍스트
</div>
</div>
<!-- 섹션 간 겹침 (시각적 연결) -->
<section class="bg6366F1 p4rem pb8rem cFFFFFF">상단 섹션</section>
<section class="neg-mt4rem mxa maxw80rem bgFFFFFF br12px p3-2rem">
위 섹션과 40px 겹쳐서 카드처럼 보임
</section>
<!-- ═══ z-index ═══ -->
<!-- 배경 장식 요소 -->
<div class="pa neg-zi1 t0 l0 w100p h100p o30">
배경 뒤에 깔리는 장식
</div>
<!-- ═══ 타이포그래피 ═══ -->
<!-- 타이트한 자간 -->
<h1 class="fs6rem fw900 neg-ls2px ttu">
BOLD TITLE
</h1>
<!-- 단어 간격 줄이기 -->
<p class="fs1-4rem neg-ws1px">
단어 사이가 좁은 텍스트
</p>
<!-- 내어쓰기 (hanging indent 반대) -->
<p class="neg-ti2rem pl2rem">
첫 줄이 왼쪽으로 튀어나온 텍스트 스타일
</p>
<!-- ═══ Position 미세 조정 ═══ -->
<!-- 테두리 바깥으로 뱃지 -->
<div class="pr">
<span class="pa neg-t8px neg-r8px bg-FF0000 cFFFFFF br50p w2rem h2rem df jcc aic fs12px">3</span>
알림 아이콘
</div>
<!-- 아웃라인 오프셋 안쪽으로 -->
<button class="b2pxsolid6366F1 neg-oo2px cp p12px-2rem">
포커스 링이 안쪽으로 들어감
</button>
<!-- ═══ order로 순서 변경 ═══ -->
<!-- 모바일에서 이미지를 먼저 표시 -->
<div class="df fdc">
<div class="neg-order1">이 요소가 먼저 보임 (order: -1)</div>
<div>원래 첫 번째였던 요소</div>
</div>