Resizable
크기 조절(resizable)은 콘텐츠를 감싸고 있는 컨테이너의 크기를 조절할 수 있는 기능입니다.
Type
Resizable의 Handler에 마우스를 over할 시 cursor 변경합니다. Horizontal 타입은 cursor : w-resize;로 지정하며, Vertical 타입은 cursor : s-resize;로 지정합니다.
여백 (Margin), 가로형 (Horizontal)
cursor : w-resize
여백 (Margin), 세로형 (Vertical)
cursor : s-resize
선 (Line), 가로형 (Horizontal)
cursor : w-resize
선 (Line), 세로형 (Vertical)
cursor : s-resize
State
Resizable의 Handler 상태는 Default / Hover / Active 3가지로 사용합니다.
여백 (Margin),
가로형 (Horizontal)
가로형 (Horizontal)
Default
Hover
Active
여백 (Margin),
세로형 (Vertical)
세로형 (Vertical)
Default
Hover
Active
선 (Line),
가로형 (Horizontal)
가로형 (Horizontal)
Default
Hover
Active
선 (Line),
세로형 (Vertical)
세로형 (Vertical)
Default
Hover
Active
사용 가이드
사용 관련
Do
좁은 영역에서 크기 조절 기능을 사용하지 않습니다.
Don’t
한 화면 내에서 가로형과 세로형을 중복하여 사용하지 않습니다.