메뉴 건너뛰기

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

<!DOCTYPE html>
<html dir="ltr" lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>우편번호 검색</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="//cdn.poesis.kr/post/search.min.js" charset="UTF-8"></script>
    <!--[if IE 6]><script type="text/javascript" src="http://cdn.poesis.kr/post/search.min.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="//cdn.poesis.kr/post/search.css" media="all" />
</head>
<body>
 
<!--
 *  Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제)
 * 
 *  Copyright (c) 2014-2015, Poesis <root@poesis.kr>
 * 
 *  이 프로그램은 자유 소프트웨어입니다. 이 소프트웨어의 피양도자는 자유
 *  소프트웨어 재단이 공표한 GNU 약소 일반 공중 사용 허가서 (GNU LGPL) 제3판
 *  또는 그 이후의 판을 임의로 선택하여, 그 규정에 따라 이 프로그램을
 *  개작하거나 재배포할 수 있습니다.
 * 
 *  이 프로그램은 유용하게 사용될 수 있으리라는 희망에서 배포되고 있지만,
 *  특정한 목적에 맞는 적합성 여부나 판매용으로 사용할 수 있으리라는 묵시적인
 *  보증을 포함한 어떠한 형태의 보증도 제공하지 않습니다. 보다 자세한 사항에
 *  대해서는 GNU 약소 일반 공중 사용 허가서를 참고하시기 바랍니다.
 * 
 *  GNU 약소 일반 공중 사용 허가서는 이 프로그램과 함께 제공됩니다.
 *  만약 허가서가 누락되어 있다면 자유 소프트웨어 재단으로 문의하시기 바랍니다.
 *
 *-->
 
<h1>우편번호 검색</h1>
 
<!-- 검색 기능이 표시되는 <div> -->
 
<div id="postcodify"></div>
 
<!-- Postcodify 셋팅 -->
 
<script type="text/javascript">
    $("#postcodify").postcodify({
        insertPostcode6 : "#entry_postcode6",
        insertAddress : "#entry_address",
        insertDetails : "#entry_details",
        insertExtraInfo : "#entry_extra_info",
        insertEnglishAddress : "#entry_english_address",
        insertJibeonAddress : "#entry_jibeon_address",
        useFullJibeon : true,
        mapLinkProvider : "google",
        ready : function() {
            $("#postcodify div.postcode_search_status.empty").hide();
        },
        beforeSearch : function(keywords) {
            $("#entry_box").hide();
        },
        afterSelect : function(selectedEntry) {
            $("#postcodify div.postcode_search_result").remove();
            $("#postcodify div.postcode_search_status.summary").hide();
            $("#entry_box").show();
            $("#entry_details").focus();
            /**
             *  만약 팝업창에서 주소를 검색한 경우, 창을 닫거나 다른 폼에 주소를 입력하는 작업은
             *  이곳에 자바스크립트 코드를 추가하여 사용하십시오.
             *  예:
             *  window.opener.document.getElementById("postcode").value = $("#entry_postcode6").val();
             *  window.opener.document.getElementById("address1").value = $("#entry_address").val();
             *  window.opener.document.getElementById("address2").value = $("#entry_extra_info").val();
             *  window.open("", "_self", "");
             *  window.close();
             */
        }
    });
</script>
 
<!-- 검색결과 입력란 -->
 
<div>
    <p><label for="entry_postcode6">우편번호</label><input type="text" id="entry_postcode6" /></p>
    <p><label for="entry_address">도로명주소</label><input type="text" id="entry_address" /></p>
    <p><label for="entry_details">상세주소</label><input type="text" id="entry_details" /></p>
    <p><label for="entry_extra_info">참고항목</label><input type="text" id="entry_extra_info" /></p>
    <p><label for="entry_english_address">영문주소</label><input type="text" id="entry_english_address" /></p>
    <p><label for="entry_jibeon_address">지번주소</label><input type="text" id="entry_jibeon_address" /></p>
</div>
 
<!-- 검색 도움말 -->
 
<div>
    <p>검색 요령</p>
    <ul>
        <li>도로명주소 검색 : 도로명과 건물번호를 입력하세요.   예: <span>세종대로 110</span></li>
        <li>지번주소 검색 : "동" 또는 "리" 이름과 번지수를 입력하세요.   예: <span>연산동 1000</span></li>
        <li>건물명 검색 : 빌딩 또는 아파트 이름을 입력하세요.   예: <span>방배동 래미안</span>, <span>수곡동 주공3차</span></li>
        <li>사서함 검색 : 사서함 이름과 번호를 입력하세요.   예: <span>광화문우체국사서함 123-4</span></li>
    </ul>
    <p>주의사항</p>
    <ul>
        <li>시·군·구·읍·면 등은 쓰지 않아도 되지만, 만약 쓰실 경우 반드시 띄어쓰기를 해 주세요.</li>
        <li>도로명에 "××번길" 등이 포함되어 있는 경우에도 잊지 말고 써 주세요.</li>
        <li>건물명보다는 도로명주소 또는 지번 주소로 검색하시는 것이 빠르고 정확합니다.</li>
    </ul>
</div>    
 
</body>
</html>




<!DOCTYPE html>
<html dir="ltr" lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>우편번호 검색</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="//cdn.poesis.kr/post/popup.min.js" charset="UTF-8"></script>
    <!--[if IE 6]><script type="text/javascript" src="http://cdn.poesis.kr/post/popup.min.js"></script><![endif]-->
</head>
<body>
 
<!--
 *  Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제)
 * 
 *  Copyright (c) 2014-2015, Poesis <root@poesis.kr>
 * 
 *  이 프로그램은 자유 소프트웨어입니다. 이 소프트웨어의 피양도자는 자유
 *  소프트웨어 재단이 공표한 GNU 약소 일반 공중 사용 허가서 (GNU LGPL) 제3판
 *  또는 그 이후의 판을 임의로 선택하여, 그 규정에 따라 이 프로그램을
 *  개작하거나 재배포할 수 있습니다.
 * 
 *  이 프로그램은 유용하게 사용될 수 있으리라는 희망에서 배포되고 있지만,
 *  특정한 목적에 맞는 적합성 여부나 판매용으로 사용할 수 있으리라는 묵시적인
 *  보증을 포함한 어떠한 형태의 보증도 제공하지 않습니다. 보다 자세한 사항에
 *  대해서는 GNU 약소 일반 공중 사용 허가서를 참고하시기 바랍니다.
 * 
 *  GNU 약소 일반 공중 사용 허가서는 이 프로그램과 함께 제공됩니다.
 *  만약 허가서가 누락되어 있다면 자유 소프트웨어 재단으로 문의하시기 바랍니다.
 *
 *-->
 
<h1>우편번호 검색</h1>
 
<!-- 주소 입력란 -->
 
<div>
    <p>
        <label>우편번호</label><input type="text" size="4" class="postcodify_postcode6_1" /> –
        <label></label><input type="text" size="4" class="postcodify_postcode6_2" />  
        <button id="search_button">검색</button>
    </p>
    <p><label>도로명주소</label><input type="text" class="postcodify_address" /></p>
    <p><label>상세주소</label><input type="text" class="postcodify_details" /></p>
    <p><label>참고항목</label><input type="text" class="postcodify_extra_info" /></p>
    <p><label>영문주소</label><input type="text" class="postcodify_english_address" /></p>
    <p><label>지번주소</label><input type="text" class="postcodify_jibeon_address" /></p>
</div>
 
<!-- Postcodify 셋팅 -->
 
<script type="text/javascript">
    $("#search_button").postcodifyPopUp();
</script>
 
</body>
</html>



postcodify (1).PNG




List of Articles
번호 제목 날짜 조회 수
119 검토하기: jQuery를 이용하여 form 처리하기 2017.03.02 7513
118 jquery 이용한 필수입력체크(input form) 2017.03.02 10559
117 jQuery 실행패턴 2017.03.02 6770
116 jQuery 입문: form 데이터 유효성 검사 2017.03.02 11799
115 예제로 만나보는 제이쿼리 - 비동기 파일업로드 file 2017.03.06 7344
114 파일 업로드 방법, 이미지 파일 업로드 예제 소스 2017.03.06 9028
113 Ajax 파일 업로드 샘플 코드 2017.03.11 7791
112 jquery를 활용한 입력폼 초기화하기 2017.03.27 8703
111 jquery css div, li 리스트 선택한 메뉴 변경 출처: http://okkks.tistory.com/1062 [이건없지] file 2017.07.05 5796
110 jquery 체크박스 배열 처리. 변수 하나에 담기. 2018.07.04 4666
109 jQuery 유효성 검사 2018.07.04 3362
108 jQuery selectBox 컨트롤. 2018.07.25 2558
107 jquery - select option 선택값 가져오기 2018.09.06 5330
106 jQuery 폼 입력값 체크 예제 2018.09.06 2098
105 입력폼에 입력되는 값의 유효성 체크하기 두번째 file 2018.09.06 1835
104 페이지 이동 제어 - href, replace, pushState() 2018.09.06 2620
103 외부 파일 드래그 드롭 구현 file 2018.09.06 1678
102 드래그 & 드랍 구현 - on()[이벤트리스너] file 2018.09.06 2891
101 [jQuery] 확인 창(confirm), 페이지 이동(location.replace) 2018.09.06 2652
100 [jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기 2018.09.06 1819
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved