AAtomic CSS

resize

사용자가 요소의 크기를 드래그로 조절할 수 있는지 제어합니다. textarea에서 리사이즈를 막거나, 패널에 리사이즈 기능을 부여할 때 사용합니다.

클래스 목록

클래스CSS설명
rznresize: none리사이즈 불가. textarea 고정에 사용
rzvresize: vertical세로로만 리사이즈 가능
rzhresize: horizontal가로로만 리사이즈 가능
rzbresize: both가로 세로 모두 리사이즈 가능

시각적 비교

각 resize 값이 적용된 요소를 직접 드래그해 보세요. 우측 하단 모서리에 리사이즈 핸들이 표시됩니다.

None — rzn

이 영역은 크기를 조절할 수 없습니다.

리사이즈 핸들이 표시되지 않습니다

Vertical — rzv

이 영역은 세로로만 크기를 조절할 수 있습니다. 우측 하단 모서리를 드래그하세요.

세로 방향으로만 핸들이 작동합니다

Horizontal — rzh

이 영역은 가로로만 크기를 조절할 수 있습니다. 우측 하단 모서리를 드래그하세요.

가로 방향으로만 핸들이 작동합니다

Both — rzb

이 영역은 가로 세로 모두 크기를 조절할 수 있습니다. 우측 하단 모서리를 드래그하세요.

양방향 리사이즈 가능합니다

textarea와 resize

textarea는 기본적으로 리사이즈가 가능합니다. rzn으로 막거나, rzv로 세로만 허용하는 패턴이 일반적입니다.

리사이즈 불가 — rzn

세로만 가능 — rzv

실전 예시

폼의 textarea 리사이즈 제어와 리사이즈 가능한 패널을 만드는 패턴입니다.

<!-- textarea 리사이즈 제어 -->
<textarea class="w100p rzn p12px br8px" rows="4"
  placeholder="리사이즈 불가">
</textarea>

<!-- 세로만 리사이즈 가능한 textarea -->
<textarea class="w100p rzv p12px br8px" rows="4"
  placeholder="세로로만 조절 가능">
</textarea>

<!-- 리사이즈 가능한 코드 패널 -->
<div class="rzb oh minw20rem maxw60rem minh10rem maxh40rem
            bg18181B b1pxsolid27272A br8px p2rem">
  <pre>코드 에디터 영역</pre>
</div>

클래스별 상세

rznresize: none

사용자가 요소 크기를 조절할 수 없습니다. textarea의 리사이즈 핸들을 제거하여 레이아웃 깨짐을 방지할 때 가장 많이 사용됩니다.

<!-- textarea 리사이즈 막기 -->
<textarea class="w100p rzn p12px br8px" rows="4"
  placeholder="크기 고정된 입력 영역">
</textarea>

<!-- 고정 크기 패널 -->
<div class="rzn oh w30rem h20rem bg18181B br8px p2rem">
  고정 크기 콘텐츠 영역
</div>

자주 쓰는 조합

rzn w100ptextarea 리사이즈 제거 + 전체 너비
rzn oh리사이즈 막기 + 넘침 숨김

rzvresize: vertical

세로 방향으로만 크기를 조절할 수 있습니다. 가로 레이아웃은 유지하면서 사용자가 입력 영역 높이를 조절할 수 있게 할 때 유용합니다.

<!-- 세로만 리사이즈 가능한 textarea -->
<textarea class="w100p rzv p12px br8px" rows="4"
  placeholder="높이만 조절 가능합니다">
</textarea>

<!-- 세로 리사이즈 + 범위 제한 -->
<textarea class="w100p rzv minh8rem maxh30rem p12px br8px"
  rows="4" placeholder="8rem ~ 30rem 사이에서 조절">
</textarea>

rzhresize: horizontal

가로 방향으로만 크기를 조절할 수 있습니다. 사이드바나 패널의 너비를 사용자가 조절할 수 있게 할 때 사용합니다.

<!-- 가로 리사이즈 가능한 사이드바 -->
<div class="rzh oh minw15rem maxw40rem h30rem
            bg18181B b1pxsolid27272A br8px p2rem">
  사이드바 영역 (가로 드래그)
</div>

rzbresize: both

가로와 세로 모두 크기를 조절할 수 있습니다. 코드 에디터, 노트 패널 등 자유로운 크기 조절이 필요한 요소에 사용합니다.

<!-- 자유 리사이즈 패널 -->
<div class="rzb oh minw20rem maxw60rem minh10rem maxh40rem
            bg18181B b1pxsolid27272A br8px p2rem">
  자유롭게 크기를 조절할 수 있는 패널입니다.
  코드 에디터, 노트 영역 등에 활용합니다.
</div>

<!-- 리사이즈 가능한 코드 블록 -->
<pre class="rzb oa minw20rem minh8rem maxh50rem
            bg18181B b1pxsolid27272A br8px p2rem fs14px">
  const hello = "world";
  console.log(hello);
</pre>

overflow 필수

resize는 overflow가 visible(기본값) 이외의 값일 때만 작동합니다. 반드시 oh 또는 oa와 함께 사용하세요.

팁 & 주의사항

overflow가 visible이면 작동하지 않음

resize는 overflow: visible인 요소에서는 무시됩니다. oh(hidden), oa(auto), os(scroll) 중 하나를 반드시 함께 지정하세요.

textarea에는 rzn 또는 rzv 권장

폼 내 textarea는 가로 리사이즈가 레이아웃을 깨뜨릴 수 있으므로, rzn으로 완전히 막거나 rzv로 세로만 허용하는 것이 일반적입니다.

min/max로 리사이즈 범위 제한

rzb나 rzv와 함께 minw, maxw, minh, maxh를 사용하면 리사이즈 가능 범위를 제한할 수 있습니다.

overflowmin-widthmax-widthmin-heightmax-height