인터랙티비티
resize
엘리먼트의 크기 조정 방식을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
resize-none | resize: none; |
resize | resize: both; |
resize-y | resize: vertical; |
resize-x | resize: horizontal; |
예제
모든 방향으로 크기 조정하기
resize를 사용해 엘리먼트를 가로와 세로로 크기 조정 가능하게 만들 수 있습니다:
데모에서 텍스트 영역의 핸들을 드래그해 예상 동작을 확인하세요
<textarea class="resize rounded-md ..."></textarea>세로 크기 조절
resize-y를 사용하면 엘리먼트의 세로 크기를 조절할 수 있습니다:
데모에서 텍스트 영역의 핸들을 드래그하여 예상 동작을 확인하세요
<textarea class="resize-y rounded-md ..."></textarea>가로 크기 조정
resize-x를 사용하면 엘리먼트의 가로 크기를 조정할 수 있습니다:
데모에서 텍스트 영역의 핸들을 드래그하여 예상 동작을 확인하세요
<textarea class="resize-x rounded-md ..."></textarea>크기 조정 방지
resize-none을 사용하면 엘리먼트의 크기 조정을 막을 수 있습니다:
텍스트 영역의 핸들이 사라진 것을 확인하세요
<textarea class="resize-none rounded-md"></textarea>반응형 디자인
접두사 a resize 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="resize-none md:resize ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
