라즈베리파이 웹서버에서 jQuery Resizable 사용해 보기

안녕하세요. AkibaTV입니다.

이번에 소개할 내용은 jQuery Resizable 사용해 보기 입니다.

사이트를 개발을 하시다 보시면 div또는 iframe의 화면크기를 늘리거나 줄이는 방법을

필요로 할때가 있습니다.

그런 경우를 위해서 간단하게 리사이징을 하는 방법을 알아보도록 하겠습니다.

Visual Studio Code(비주얼 스튜디오 코드)로 실행하신후 jquery_Resizable.html로 파일을 추가해 주시기 바랍니다.

추가를 하셨으면 아래와 같이 코딩을 해주시기 바랍니다.

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AkibaTV</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
	#resizable {
		width: 150px;
		height: 150px;
		padding: 0.5em;
		border: 1px solid;
	}
	#resizable h3 {
		text-align: center;
		margin: 0;
	} 
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	$( function() {
		$( "#resizable" ).resizable();
	} );
</script>
</head>
<body>

<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">리사이징</h3>
</div>

</body>
</html>

image

실제로 제대로 동작을 하는지 확인을 해보도록 하겠습니다.

작성을 하신 소스파일을 라즈베리파이 웹서버 또는 개인서버, 호스팅서버에 업로드를 해주시기 바랍니다.

저는 라즈베리파이에 웹서버를 구축을 해두었기때문에 라즈베리파이 웹서버를 이용하도록 하겠습니다.

image

서버에 파일이 올라간것을 확인이 되셨으면 웹브라우저를 실행해 주세요.

웹브라우저의 URL에 http://각웹서버URL/jquery_Resizable.html 를 실행해 주세요.

image

초기에는 가로세로 150픽셀 사이즈의 박스형태가 나오게 됩니다.

image

마우스를 끝을 잡고 움직이시면 리상징이 되는것을 확인 하실수 있습니다.