어도비 무료 에디터 툴 브라켓 메뉴를 영어로


안녕하세요.
고코더 입니다.


브라켓은 기본적으로 시스템 언어에 따라서 메뉴가 나타납니다. 저는 당연히 한국어 OS를 설치해서 한국어 UI가 기본적으로 셋팅 되었습니다.
하지만 IDE에서 사용하는 영어는 기본적이고 공통적인 단어들입니다. 번역체로 도구를 찾기보다는 영어로 인터페이스를 바꾸어 사용하는게 좋아보입니다.


 1. 그래서 저는 영어로 UI를 변경해보겠습니다.
탑 메뉴바에서 디버그에서 언어 변경을 클릭 합니다. 


 2. 그리고 원하시는 언어를 선택하고 재시작을 클릭 합니다.
재시작은 시스템 내부에서 새로고침되며 프로그램 자체는 종료되지 않습니다. 


 3. 그러면 이제 익숙한 영어 UI가 나타납니다.



마무리


좀 불편하더라도 영어 UI에 익숙해지는건 어떨까요?




댓글을 달아 주세요


제이쿼리 이미지 드래그 드랍, 사이즈 조절


안녕하세요.
고코더 입니다.


jQuery UI를 쓸때 가장 많이 활용하게 되는
기능이 두가지가 있습니다.
바로 이미지 드래그와 리사이징 입니다. 

레이어 팝업을 만들거나
사용자에게 크기를 조절하게 
편의를 제공 하는 기능은 많이 씁니다.

그래서 이번 시간에
제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다.

1. 아래 소스를 웹사이트에서 실행해보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('#GoCoderImg1').resizable();        
            $('#GoCoderImg2').draggable();        
        });
    </script>
</head>
<body>
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg1">
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg2">
</body>
</html>
cs

gocoder_resizable_draggable.html


 2. 하나는 사이즈 조절이 가능하고
다른 하나는 드래그 드랍으로 이동이 가능 합니다. 



마무리


jQuery 덕분에 많은게 가능해졌네요


댓글을 달아 주세요


Div 반짝 거리게 하기 


안녕하세요.
고코더 입니다.


Div안에는 많은 것들을 담습니다.
사이트는 강조해야 할 Div가 존재하게 됩니다.

1. 얼마전에 만든 제가 만든 QR코드 만들기 사이트에
접속시에 해당 네모 DIV안에 이미지가 나타난다고 
알려주고 싶더군요


그래서 알아본 결과
jQuery UI에 제공하는 간단하고
강력력한 기능인 effect를 사용하는 방법이 있습니다.


 2. 아래에 코드를 웹에서 실행해보세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('#GoCoderDiv').effect("highlight"1000);        
        });
    </script>
</head>
<body>
 
        <div id="GoCoderDiv">
            DIV 강조
        </div>
 
</body>
</html>
cs

 3. 아래처럼 Div가 강조되고 효과가 사라집니다.



마무리


사용자를 위한 개발자 배려


댓글을 달아 주세요


div 크기 사용자가 조절 가능한 플러그인


안녕하세요.
고코더 입니다.

자바스크립트에서 사용자에게 특정 요소를
특히 div 를 자유로운 크기로 조절 할 수 있게 하는
기능을 소개하려고 합니다.

resizeble 이라는 UI 기능이빈다.

해당 기능은 다양한 곳에 사용이 가능합니다.
사용자 편의에 대시보드를 만들게 하는 곳에 특히 
많이 쓰입니다.

그래서 오늘은 이 기능에 대해 다루려고 합니다.

먼저 제가 정리한 간단 예제를 보시겠습니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function(){
    $("#resizeble").resizable();
  });
  </script>
</head>
<body>
<div id="resizeble" class="ui-widget-content">
    gocoder    Resizeble
</div>
</body>
</html>
cs

gocoder_resizeble.html





해당 페이지를 브라우저에서 실행하면
이렇게 오른쪽 아래에 크기 조절 창이 있고
이걸 사용하여 자유롭게 요소의
크기를 자유롭게 조절 가능합니다.



소스설명


▼ 3개의 참조 파일이 필요합니다.
jquery-ui.css 가 필요한 부분을 낯설어 하는 분들이 있겠네요
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

▼ 해당 함수를 원하는 요소에 실행합니다.
$("#resizeble").resizable();

▼ 그리고 .css 를 참조해야 하는 이야기
해당 "ui-widget-content"를
class 명에 넣어줘야 합니다.
<div id="resizeble" class="ui-widget-content">
    gocoder    Resizeble
</div>




마무리


실무에서도 많이 사용하는 함수이기에
한번 눈으로 손으로 익혀보세요


댓글을 달아 주세요