• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 User Interface</title>
7
    <style>
8
        div {
9
            border: 3px solid orange;
10
            margin: 10px;
11
            padding: 20px;
12
            width: 300px;
13
            overflow: auto;
14
        }
15
        #width { resize: horizontal; }
16
        #height { resize: vertical; }
17
        #both { resize: both; }
18
    </style>
19
</head>
20
​
21
<body>
22
​
23
    <h1>resize 속성을 이용한 크기 조절</h1>
24
    <p>각 div 요소의 오른쪽 하단에 있는 크기 조절 핸들을 마우스로 드래그해서 요소의 크기를 조절할 수 있습니다.</p>
25
    <div id="width">이 요소는 너비만 조절할 수 있어요!</div>
26
    <div id="height">이 요소는 높이만 조절할 수 있어요!</div>
27
    <div id="both">이 요소는 둘 다 조절할 수 있어요!</div>
28
​
29
</body>
30
​
31
</html>