-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathresize.html
More file actions
37 lines (36 loc) · 1.85 KB
/
Copy pathresize.html
File metadata and controls
37 lines (36 loc) · 1.85 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<!-- 문서 타입 선언: HTML5 -->
<html lang="ko">
<!-- 문서 언어: 한국어 -->
<head>
<meta charset="utf-8">
<!-- 문자 인코딩: UTF-8 -->
<title>resize - 사용자가 요소의 크기를 조절할 수 있는지 설정합니다</title>
<!--
[시각 효과] resize
설명: 사용자가 요소의 크기를 조절할 수 있는지 설정합니다
구문: resize: none | both | horizontal | vertical | block | inline
팁: overflow가 visible이 아니어야 작동. textarea는 기본적으로 resize: both. min/max-width/height로 범위 제한 가능.
-->
<style>
/* .resizable: 사용자가 우하단 모서리를 드래그해 크기 조절 가능 */
.resizable {
resize: both; /* 가로/세로 모두 사용자 리사이즈 허용 - 우하단 모서리 핸들 표시 */
overflow: auto; /* resize 동작에 필수 - visible이면 작동 안 함 */
background: #f8fafc; /* 매우 연한 회색 배경 */
border: 2px solid #3b82f6; /* 파란 테두리 */
padding: 20px; /* 안쪽 여백 20px */
border-radius: 8px; /* 모서리 둥글게 */
font-size: 14px; /* 글자 14px */
color: #475569; /* 짙은 회색 글자 */
width: 220px; /* 초기 너비 220px */
min-height: 80px; /* 최소 높이 80px - 너무 작아지지 않게 */
margin: 30px auto; /* 위아래 30px, 가로 중앙 */
}
</style>
</head>
<body>
<!-- 사용자 리사이즈 가능한 박스 -->
<div class="resizable">우하단 모서리를 드래그하여 크기를 조절하세요</div>
</body>
</html>