Never ending story ...

맘이 따뜻해지는 스토리가 있습니다.
이곳에서 시작해보려는 이야기들은
어떤사람의 얘기일까요?

음악이나 들으며 준비를 해봅시다.
김민종 착한 사랑
얘기를 들으면서 정화된 마음을
하모니로 다져볼까 하죠.
멜로디가 하나하나씩 나의 귓가로 들어오기 시작하면
나는 환하게 미소 짓고 답을해주는 거에요.
그러면 흥나는 곡하나 들어보시죠?
환하게 웃으며 감상할 수 있는 그러한 음악입니다.
정겨운 노래를 들어볼까요? 김민종 착한 사랑
시작합니다.,



오늘 하루는 정말 좋은 책을 바라보면서 거닐었습니다.
파란 하늘을 올려다보며
왔다갔다거리는 사람을 보며
매일 거닐던 거리를 걸어온 나 자신인데
음, 오늘따라 걍 좋은 책을 읽고 읽으면서 걸어보고 싶었네요.

타인의 시선 따위는 신경 쓰지 아니하고…
어떤 책이든간에 넘 좋아서 딱~하고 필이 오는 책을
따악! 하고 집었었는데
마~침 아주 예~전에 읽어봤다 만 책이라…
나름 신이 나는구나~ 해가며 좋은 책을 읽으며
길거리를 거닐기 시작했어요.

물론~ 선율도 함께 들었습니다.
집중이… 잘 될 듯 잘 안될 듯 하는 그러한 미묘한 마음속이
오히려~ 날 활자에 집중시켜준 거 같죠.
하하하 타인들이 속닥속닥거리는 소리도
들려오지 않으니까 오히려… 더더더 좋았답니다.

그렇게! 진짜 풍족한 하루를 보냈죠.
이~런 식으로… 일상을 보내면…
좋겠군~이라는 상상들을 해봐요.
내 책을 보면서 거니는 뭘 바라보고 거니는
도전해보지 않은 일들을 해봤으니까
작은 용기도 생겨났어요.
다시 한번 이어폰을 꽂은 후 내 세상으로 빠져들어요.
노래와 글자가 나를 즐겁게 만들어주죠.
기분좋은 일상이 될 것 같군요.

하모니를 들어보아요.
정말로 괜찮은 노래가 계속해서 울려 퍼져요.
아~ 그래서~ 이 노래를
감상하려고 해요.
커피소년 니가 그리워
자자! 한번… 감상해보실까요?

하하… 안 들으면은 넘넘 서운할 거에영… ^0^
그럼… 이런 버튼을… 꾹…! 눌러봐주세요.
아아.. 노래가 정말정말 좋답니다^^
언제든… 감상해도 정말로 좋군요.
진짜~~ 넘넘 좋은 노래를 들어보죠.
이 노랜 즐겨듣는 노래 고른 것!! 커피소년 니가 그리워
함께 감상해보죠.,



정말 예쁘게 피어난 꽃을 보니까~
사진을… 찍고 싶었답니다.
오오^^ 그래서~~ 제가 들고 있던 스마트폰으로
사진을… 차알칵 찍어봤답니다.

으음~ 그…르고 원랜…
다른 곳에 올려보곤 하는데…
하하… 걍 남겨두고… 싶었어요^^
그런 날 있잖아요~~ ^ㅁ^
그래서~ 그..냥 담겨두었죠~~

그…리고 우리 집에 와가지고 보니까
정말로 좋고 좋았어요. 오오옹~~
내 자신이 이리 멋진 사진도 찍었군~~
하…고 말이죠~~ ^ㅁ^ 보는 내~내
넘넘 뿌듯해서 참을 수 없어서~~
결국엔 올렸지요. 왜 참았지^^?

글…은 뭘로 써볼까~~? 아아^^;;
정말 멋진 오늘의 시작!!!
들…판에 핀 생명~? 와^^ 오글…
그냥 멋~진 하모니 한가지랑
같이 올려야징~~! 하하하~~~

^ㅁ^ 저 음악 듣는거 진짜진짜 좋아좋아~~
노래를 감상해보며 찍은 사진들을
정리를해봐요. 그…러면 좋답니다.
아아.. 뭔가~! 뿌듯^^ 하모니를
계~속 감상해보니까 말이죠~~ 후후^^

구글 MAP API는 JavaScript로 제어된다. 여기에서는 완전한 형태의 HTML 파일을 보여주지는 않을 것이다. 완전한 HTML 페이지를 만드는건 Map Key를 생성할 때 만들어지는 HTML 코드를 이해하는 것만으로 충분할 것이다.

한국은 위성사진만 제공하고 있어서, 부득이하게 일본과 미국 지도를 가지고 테스트했다.

3.1 기본

구글 Map을 불러오기 위한 가장 기본이 되는코드다. 서울주변을 보여준다.

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

setCenter을 이용해서 보여줄 위치를 지정한다. 첫번째 인자는 좌표를 지정하기 위해서 사용한다. 두번째 인자는 지도의 해상도를 결정하기 위해서 사용한다. 숫자가 클 수록 더 자세한 결과를 보여준다.
simple.html 예제

구글 맵은 맵, 위성, 합성의 3가지 모드를 제공된다. setMapType메서드를 이용하면 모드를 변경할 수 있다. 따로 지정하지 않을 경우 맵모드로 실행된다.

• setMapType(G_SATELLITE_TYPE) : 위성모드
  
• setMapType(G_HYBRID_TYPE) : 합성모드
  
  

3.2 Map에서의 이동

다음은 맵에서 중심을 이동하는 예제다. panTo 메서드를 이용하면 해당 중심으로 지도를 부드럽게 이동시킨다. 길찾기등의 기능구현에 유용하게 사용할 수 있을 거 같다.

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

window.setTimeout(function() {    

map.panTo(new GLatLng(42.615527631349245, 128.353515625));}, 2000);

animate.html 예제

3.3 Control 버튼 추가하기

맵을 확대기시커나 모드를 바꾸거나 하는등의 제어를 위한 컨트롤 버튼을 추가한다.

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

control.html 예제

3.4 Event Listener

event listener는 GEvent.addListener를 호출해서 생성한다. 이것은 맵에서 발생하는 이벤트를 알려준다. 아래의 예제에서 맵을 움직일 경우 변경된 좌표가 출력되는걸 확인할 수 있을 것이다.

var map = new GMap2(document.getElementById("map"));

GEvent.addListener(map, "moveend", function() {  

var center = map.getCenter();  

document.getElementById("message").innerHTML = center.toString();});

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

event.html 예제

3.5 정보창 열기

openInfoWindow를 이용하면 원하는 지역에 DOM정보를 출력할 수 있다. 다음은 맵중앙에 저는 여기에 살아요메시지를 출력하는 코드다.

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

map.openInfoWindow(map.getCenter(),document.createTextNode("저는 여기에 살아요"));

infowindow.html 예제

3.6 맵에 표시하기

이번 예제는 overlay기능을 이용해서 지도에 랜덤하게 10개의 마크를 표시한다. 마크에 사용되는 이미지는 기본 이미지이며, 사용자 정의 아이콘을 만들 수도 있다. 우리나라는 아직 상세지도가 제공되지 않은 관계로 일본의 동경시를 기준으로 예제를 만들었다.

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var bounds = map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() - southWest.lng();var latSpan = northEast.lat() - southWest.lat();// 랜덤 포인트를 만들고 각각의 포인트에 마킹을 한다.for (var i = 0; i < 10; i++) {  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),                          southWest.lng() + lngSpan * Math.random());  map.addOverlay(new GMarker(point));}// 랜덤 포인트를 만들고 이것을 연결한다. var points = [];for (var i = 0; i < 5; i++) {  points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),                          southWest.lng() + lngSpan * Math.random()));}points.sort(function(p1, p2) {  return p1.lng() - p2.lng();});map.addOverlay(new GPolyline(points));

overlay.html 예제

3.7 클릭 이벤트 제어

맵에 클릭을 할경우 이벤트를 받아서 마킹을 하는 예제다. 앞서 배웠던 addListenr메서드를 이용해서 click 이벤트를 기다리고, 클릭이 발생하면 addOverlay메서드를 이용해서 마킹을 한다.

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

GEvent.addListener(map, "click", function(marker, point) {  if (marker)   {    

map.removeOverlay(marker);  } else {    map.addOverlay(new GMarker(point));  }});

click.html 예제

3.8 마커에 정보 창 출력하기

10개의 마커를 랜덤하게 표시하고, 마커를 클릭하면 클릭이벤트에 대한 Listener가 작동하도록 해보자. Listener 함수는 openInfoWindowHtml메서드를 이용해서 정보창을 출력한다.

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

function createMarker(point, number) {  var marker = new GMarker(point);  

GEvent.addListener(marker, "click", function()   {    

marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");  });  return marker;}

var bounds = map.getBounds();var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() - southWest.lng();

var latSpan = northEast.lat() - southWest.lat();for (var i = 0; i < 10; i++) {  

var point = new GLatLng(southWest.lat() + latSpan * Math.random(),                        

southWest.lng() + lngSpan * Math.random());  map.addOverlay(createMarker(point, i + 1));}

markerinfo.html 예제

3.9 탭 사용하기

openInfoWindowsTabs메서드 와 GInfoWindowTab 클래스를 이용하면, 탭을 제어할 수 있다. 다음 예제는 마커를 클릭하면 2개의 tab을 가진 Info Windows를 띄운다.

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var infoTabs = [    new GInfoWindowTab("탭1", "안녕하세요.<br><img src=http://www.joinc.co.kr/images/joinc.png border=0>"),    new GInfoWindowTab("탭2", "반갑습니다."),];

var marker = new GMarker(map.getCenter());

GEvent.addListener(marker, "click", function() {    

marker.openInfoWindowTabsHtml(infoTabs);});

map.addOverlay(marker);marker.openInfoWindowTabsHtml(infoTabs);

tab.html 예제

3.10 사용자 정의 아이콘 사용하기

사용자 정의 아이콘을 사용하는 예제다. 아이콘은 구글에서 제공하는 mini marker이미지들을 사용하기로 했다. 완전한 사용자 정의 아이콘을 만들기 위해서는 원본이미지와 함께 그림자 이미지가 쌍으로 준비되어야 한다.

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var icon = new GIcon();

icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";icon.iconSize = new GSize(12, 20);icon.shadowSize = new GSize(22, 20);icon.iconAnchor = new GPoint(6, 20);icon.infoWindowAnchor = new GPoint(5, 1);// 10개의 랜덤위치를 찾아서 marking한다.

var bounds = map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() - southWest.lng();

var latSpan = northEast.lat() - southWest.lat();

for (var i = 0; i < 10; i++) {    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),                      southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point, icon));}

icon.html 예제

3.11 아이콘 클래스 사용하기

지도서비스를 하게 된다면, 여러개의 아이콘들이 사용될 것이다. GIcon클래스를 이용하면 아이콘을 쉽게 관리할 수 있다.

var map = new GMap2(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.setCenter(new GLatLng(37.4419, -122.1419), 13);// 아이콘에서 사용할 이미지/그림자 이미지, Info Windows등 객체의 // 속성을 결정한다.var baseIcon = new GIcon();baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";baseIcon.iconSize = new GSize(20, 34);baseIcon.shadowSize = new GSize(37, 34);baseIcon.iconAnchor = new GPoint(9, 34);baseIcon.infoWindowAnchor = new GPoint(9, 2);baseIcon.infoShadowAnchor = new GPoint(18, 25);function createMarker(point, index) {  // Create a lettered icon for this point using our icon class  var letter = String.fromCharCode("A".charCodeAt(0) + index);  var icon = new GIcon(baseIcon);  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";  var marker = new GMarker(point, icon);  GEvent.addListener(marker, "click", function() {    marker.openInfoWindowHtml("지역 <b>" + letter + "</b>");  });  return marker;}var bounds = map.getBounds();var southWest = bounds.getSouthWest();var northEast = bounds.getNorthEast();var lngSpan = northEast.lng() - southWest.lng();var latSpan = northEast.lat() - southWest.lat();for (var i = 0; i < 10; i++) {  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),                          southWest.lng() + lngSpan * Math.random());  map.addOverlay(createMarker(point, i));}

iconclass.html 예제

3.12 마커 드래그

마커는 클릭, 다른장소로의 드래그 등이 가능한 상호작용하는 객체다. 이 예제는 맵에서 마커를 클릭하고 드래그하는 이벤트를 처리하는 방법을 알려준다. 드래그는 click, dragstart, drag, dragend의 4가지 타입의 이벤트를 발생한다.

    var map = new GMap2(document.getElementById("map"));    var center = new GLatLng(37.51025350131836, 127.06023216247559);    map.setCenter(center, 16);    map.setMapType(G_SATELLITE_MAP);    var marker = new GMarker(center, {draggable: true});    GEvent.addListener(marker, "dragstart", function() {        map.closeInfoWindow();    });    GEvent.addListener(marker, "dragend", function() {        map.openInfoWindowHtml("여기를 약속장소로...");     });    map.addOverlay(marker);}

drag.html 예제

3.13 SideBar를 통한 맵 링크

google map에서 검색을 해보면 지도 옆에 SideBar를 통해서 맵을 제어하는 걸 볼수 있다. 여기에서는 SideBar를 이용해서 map을 제어하는 방법에 대해서 알아보겠다.

우선 셈플을 테스트해보도록 한다.
sidebar.html 예제

<script language="JavaScript" type="text/javascript">    // 이 변수에 side bar에 이벤트가 발생했을 때 출력할 HTML코드가 저장된다.    var side_bar_html = "";    // side bar에는 여러개의 마커에 대한 HTML요소가 사용되므로    // 배열로 정의 한다.     var gmarkers = [];    var htmls = [];    var i = 0;    // marker을 만든다.     // 첫번째 인자는 위치, 두번째 인자는 이름, 세번째 인자는 설명이다.    function createMarker(point, name, html)    {        var marker = new GMarker(point);        // click 이벤트에 대한 listener 함수 정의        GEvent.addListener(marker, "click", function()         {            marker.openInfoWindowHtml(html);        });        gmarkers[i] = marker;        htmls[i] = html;        side_bar_html += '<a href="javascripｔ:myclick(' + i + ')">' + name + '</a><br>';        i++;        return marker;    }    function myclick(i)    {        gmarkers[i].openInfoWindowHtml(htmls[i]);    }    var map = new GMap2(document.getElementById("map"));    // GSmallMapControl대신에 GLargeMapControl을 사용했다.    map.addControl(new GLargeMapControl());    map.addControl(new GMapTypeControl());    map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336),14);    map.setMapType(G_SATELLITE_MAP);    // 테스트에 사용할 marker를 만든다.     var point = new GLatLng(37.508500299402435, 127.06263542175293);    var marker = createMarker(point, "반디엔 루인스", "제가 애용하는 서점 입니다");    map.addOverlay(marker);    var point = new GLatLng(37.50209991181568, 127.03652143478394);    var marker = createMarker(point, "시티문고", "가끔 강남에 갈일이 있으면 시간을 때우는 장소로..");    map.addOverlay(marker);    var point = new GLatLng(37.517802011991854, 127.0405125617981);    var marker = createMarker(point, "로터리 오락실", "드럼메니아 V2때문에 갑니다");    map.addOverlay(marker);    var point = new GLatLng(37.5056235973398, 127.0512306690216);    var marker = createMarker(point, onnet", "제가 다니는 회사지요");    map.addOverlay(marker);    // <div> side_bar에 side_bar_html 문서를 배치한다.    document.getElementById("side_bar").innerHTML = side_bar_html;</script>

1

4 XML과 비동기 HTTP를 이용한 지도 생성

이번 예제는 경도/위도와 지역정보를 포함한 data.xml을 다운로드 받아서, 지도에 마커를 표시한다. GDownloadUrl메서드를 이용해서 파일을 다운로드 받을 수 있다. 다운로드 받은 XML파일은 GXml메서드를 이용해서 처리한다. 마커를 클릭하면 지역정보가 표시된다.

<script language="JavaScript" type="text/javascript">function load() {    var map = new GMap2(document.getElementById("map"));    var center = new GLatLng(37.51030456483467, 127.05190658569336);    map.addControl(new GSmallMapControl());    map.addControl(new GMapTypeControl());    map.setCenter(center, 14);    map.setMapType(G_SATELLITE_MAP);    function createMarker(point, name)    {        var marker = new GMarker(point);        GEvent.addListener(marker, "click", function()         {            marker.openInfoWindowHtml("<b>" + name + "</b>");        });        return marker;    }    GDownloadUrl("data.xml", function(data, responseCode)     {        var xml = GXml.parse(data);        var markers = xml.documentElement.getElementsByTagName("marker");        for (var i = 0; i < markers.length; i++)         {            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),                            parseFloat(markers[i].getAttribute("lng")));            map.addOverlay(new GMarker(point));            map.addOverlay(createMarker(point, markers[i].getAttribute("name")));        }    });}

다음은 data.xml의 내용이다.

<markers><marker lat="37.508500299402435" lng="127.06263542175293" name="반디앤 루인스"/><marker lat="37.50209991181568" lng="127.03652143478394" name="시티문고"/><marker lat="37.50312128705489" lng="127.05825805664062" name="개미책방"/><marker lat="37.517802011991854" lng="127.0405125617981" name="로터리오락실"/><marker lat="37.5056235973398" lng="127.0512306690216" name="울회사"/></markers>

# by 쫑이® | 2007/07/04 16:49 | 트랙백 | 덧글(0)

prototype.js가 자바 스크립트 라이브러리를 프레임워크 수준으로 승격한 1세대였다면 지금은 마치 춘추 전국시대와 같다. YUI, jQuery, dojo, ext, mootools 등이 고루 인기를 얻고 있다. 특히 dojo와 jQuery에 관심이 갔는데, IBM DeveloperWorks 웹 개발 분류에 좋은 기사를 번역해서 게재했다.

jQuery 기사
jQuery로 작업하기, 3부: jQuery와 Ajax로 RIA 만들기
jQuery로 작업하기, Part 2: 내일 나올 웹 응용을 오늘 구현해보자
jQuery로 작업하기, Part 1: 브라우저로 데스크톱 응용 옮기기
Ajax로 사이트 전면 개편, Part 4: 기존 사이트를 jQuery와 Ajax forms를 사용하여 개선하기
Ajax로 사이트 전면 개편, Part 3: jQuery, Ajax 탭, 회전식 슬라이드쇼로 기존 사이트 개선하기
Ajax로 사이트 전면 개편, Part 2: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기
jQuery로 Ajax 개발을 단순화 하기

dojo 기사
Dojo Objective Harness를 이용한 웹 2.0 애플리케이션 단위 테스트
전문가다운 Ajax 애플리케이션 개발, Part 3: DWR, 자바, Dojo 툴킷을 사용하여 자바와 자바스크립트 통합하기
Dojo로 HTML 위젯 개발하기 (한글)
Dojo와 WebSphere Portal을 사용하여 클라이언트 측 포틀릿 간 통신 구현하기
Dojo와 DB2를 함께 Ajax로 사용하여 웹 애플리케이션 개발하기

자바 스크립트에 대해서는 잘 모르는 축에 속하지만, 시범적으로 사용해본 결과 jQuery는 문법의 간결함과 유용한 플러그인이 강점이고, dojo의 경우 자바 개발자에게는 API가 친숙했다. 상대적으로 무거운 느낌이 단점이다. 이유는 모르지만, Spring 웹 개발팀에선 dojo를 택했다.

한편, 오픈소스 Ajax 라이브러리 Method Chain 개발자 인터뷰를 보면 jQuery 아키텍처의 취약점을 설명하고 있다. 오는 2월 28일에 있을 JCO 콘퍼런스에서 Method Chain 개발자인 이벤트님이 "MethodChain과 Ajax 애플리케이션 아키텍처 구축 방안"이란 제목으로 70분간 강연을 할 예정인지라 관심 있는 분은 기억하시길.

출처 : http://younghoe.info/1078

출처 : http://blog.paran.com/fusion/29513118

키입력상자에서 key 이벤트를 이용합니다.

예를들어서

onkeyup= javascripｔ:keycontrol() //이라고 키 이벤트에 스크립트함수를 연결시키구요..

스크립트 함수에서는

function keycontrol()

{

   if(event.keyCode == 키코드값)

  {

       실행코드

  }

}

이렇게 사용하시면 됩니다..

참고로 키코드값은 아래와 같습니다.

=================================================================
키                | 코드(숫자)
=================================================================
←(백스패이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18
PAUSEBREAK = 19
CAPSLOOK = 20
한/영 = 21
한자 = 25
ESC = 27

스패이스 = 32
PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36

←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40

INSERT = 45
DELETE = 46

0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57

A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 93

0(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105

.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109

F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123

NUMLOCK = 144
SCROLLLOCK = 145
=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
\(중간) = 220

출처 : http://cafe.naver.com/fssy2k/64