Kakao Postcode Service

https://postcode.map.kakao.com/guide
Admin
This project provides documentation and examples for the Kakao Postcode Service, allowing users to...
Tokens:22,089
Snippets:90
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Popup Address Search Example

Source: https://postcode.map.kakao.com/guide

An example showing how to display both road name and lot number addresses in input fields using a popup.

```html
<input type="text" id="sample4_postcode" placeholder="우편번호">
```

```html
<input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
```

```html
<input type="text" id="sample4_roadAddress" placeholder="도로명주소">
```

```html
<input type="text" id="sample4_jibunAddress" placeholder="지번주소">
```

```html
<span id="guide" style="color:#999;display:none"></span>
```

```html
<input type="text" id="sample4_detailAddress" placeholder="상세주소">
```

```html
<input type="text" id="sample4_extraAddress" placeholder="참고항목">
```

```html
<script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
```

```html
<script>
```

--------------------------------

### Customize Postcode Theme

Source: https://postcode.map.kakao.com/guide

Use the theme option within the kakao.Postcode constructor to modify the appearance of the search interface. This example demonstrates setting custom background and text colors for the search bar.

```javascript
//테마변경은 생성자 옵션 중, theme변수에 객체 형태로 넣으시면 됩니다.
new kakao.Postcode({
    oncomplete: function(data){...},
    theme: {
        searchBgColor: "#0B65C8", //검색창 배경색
        queryTextColor: "#FFFFFF" //검색창 글자색
    }
}).open();//or embed(target) - 테마변경은 팝업형, 레이어형 구분 없이 모두 이용가능합니다.
```

--------------------------------

### 주소 검색 및 지도 표시 구현

Source: https://postcode.map.kakao.com/guide

주소 검색 입력 필드, 지도 컨테이너, 필요한 API 스크립트 로드 및 좌표 변환 로직을 포함한 전체 구현 예제입니다. API 사용을 위해 카카오 개발자 센터에서 API Key를 발급받아야 합니다.

```html
<input type="text" id="sample5_address" placeholder="주소"> <input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br> <div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div> <script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API KEY를 사용하세요&libraries=services"></script> <script> var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표 level: 5 // 지도의 확대 레벨 }; //지도를 미리 생성 var map = new kakao.maps.Map(mapContainer, mapOption); //주소-좌표 변환 객체를 생성 var geocoder = new kakao.maps.services.Geocoder(); //마커를 미리 생성 var marker = new kakao.maps.Marker({ position: new kakao.maps.LatLng(37.537187, 127.005476), map: map }); function sample5_execDaumPostcode() { new kakao.Postcode({ oncomplete: function(data) { var addr = data.address; // 최종 주소 변수 // 주소 정보를 해당 필드에 넣는다. document.getElementById("sample5_address").value = addr; // 주소로 상세 정보를 검색 geocoder.addressSearch(data.address, function(results, status) { // 정상적으로 검색이 완료됐으면 if (status === kakao.maps.services.Status.OK) { var result = results[0]; //첫번째 결과의 값을 활용 // 해당 주소에 대한 좌표를 받아서 var coords = new kakao.maps.LatLng(result.y, result.x); // 지도를 보여준다. mapContainer.style.display = "block"; map.relayout(); // 지도 중심을 변경한다. map.setCenter(coords); // 마커를 결과값으로 받은 위치로 옮긴다. marker.setPosition(coords) } }); } }).open(); } </script>
```

--------------------------------

### Basic Integration of Kakao Postcode

Source: https://postcode.map.kakao.com/guide

Load the postcode.v2.js script and initialize the Postcode service to open the search popup.

```html
<script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
```

```html
<script>
```

```javascript
    new kakao.Postcode({
```

```javascript
        oncomplete: function(data) {
```

```javascript
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
```

```javascript
            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
```

```javascript
        }
```

```javascript
    }).open();
```

```html
</script>
```

--------------------------------

### kakao.Postcode Constructor Options

Source: https://postcode.map.kakao.com/guide

Configuration options for customizing the behavior and appearance of the Kakao Postcode search interface.

```APIDOC
## kakao.Postcode Configuration Options

### Parameters
- **hideMapBtn** (boolean) - Optional - Hides the "Map" button in search results. Default: false.
- **hideEngBtn** (boolean) - Optional - Hides the "English View" button in search results. Default: false.
- **alwaysShowEngAddr** (boolean) - Optional - Displays English and Korean addresses simultaneously. Overrides hideEngBtn. Default: false.
- **submitMode** (boolean) - Optional - Uses "form submit" if true, or "location replace" if false. Default: true.
- **useBannerLink** (boolean) - Optional - Enables the guide page link in the bottom banner. Default: true.
- **theme** (object) - Optional - Customizes the color theme of the search interface. 

### Theme Configuration Example
```javascript
new kakao.Postcode({
    oncomplete: function(data) { ... },
    theme: {
        searchBgColor: "#0B65C8",
        queryTextColor: "#FFFFFF"
    }
}).open();
```
```

--------------------------------

### kakao.Postcode Constructor

Source: https://postcode.map.kakao.com/guide

Initializes the Postcode service. The constructor accepts an options object, most importantly the 'oncomplete' callback function which handles the address data returned after a user selection.

```APIDOC
## new kakao.Postcode(options)

### Description
Initializes the Kakao Postcode service instance. Use this to configure the behavior of the address search popup or layer.

### Parameters
- **options** (Object) - Required - Configuration object.
  - **oncomplete** (Function) - Required - Callback function executed when a user selects an address. Receives a 'data' object containing address details (e.g., zonecode, roadAddress, jibunAddress).

### Usage Example
```javascript
new kakao.Postcode({
    oncomplete: function(data) {
        // Handle the selected address data here
        console.log(data.zonecode);
        console.log(data.roadAddress);
    }
}).open();
```
```

--------------------------------

### kakao.Postcode Constructor

Source: https://postcode.map.kakao.com/guide

Initializes the Postcode search service with an oncomplete callback function to handle the selected address data.

```APIDOC
## new kakao.Postcode(options)

### Description
Initializes the Kakao Postcode search service. The `oncomplete` callback is required to process the address selected by the user.

### Parameters
- **options** (Object) - Required
  - **oncomplete** (Function) - Required - A callback function executed when a user selects an address. The function receives a `data` object containing address details.

### Request Example
```javascript
new kakao.Postcode({
  oncomplete: function(data) {
    console.log(data.zonecode);
    console.log(data.address);
  }
});
```

### Data Object Fields
- **zonecode** (String) - National basic area code (new postcode).
- **address** (String) - Primary address (Road name or Jibun based on search result).
- **addressEnglish** (String) - Primary English address.
- **addressType** (String) - Type of primary address: R (Road name), J (Jibun).
- **userSelectedType** (String) - Type of address selected by the user: R or J.
- **roadAddress** (String) - Road name address.
- **jibunAddress** (String) - Jibun address.
- **buildingName** (String) - Building name.
- **sido** (String) - Province/City name.
- **sigungu** (String) - District/County name.
- **bname** (String) - Legal Dong/Ri name.
```

--------------------------------

### sample4_execDaumPostcode 주소 처리 함수

Source: https://postcode.map.kakao.com/guide

Kakao Postcode 팝업을 열고 검색 완료 시 주소 데이터를 조합하여 화면의 입력 필드에 반영하는 함수입니다. 법정동 및 공동주택 정보를 포함한 참고 항목을 생성하고 예상 주소를 가이드 텍스트로 표시합니다.

```javascript
  //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
  function sample4_execDaumPostcode() {
      new kakao.Postcode({
          oncomplete: function(data) {
              // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

              // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
              // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
              var roadAddr = data.roadAddress; // 도로명 주소 변수
              var extraRoadAddr = ''; // 참고 항목 변수

              // 법정동명이 있을 경우 추가한다. (법정리는 제외)
              // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
              if(data.bname !== '' && /[동로가]$/.test(data.bname)){
                  extraRoadAddr += data.bname;
              }
              // 건물명이 있고, 공동주택일 경우 추가한다.
              if(data.buildingName !== '' && data.apartment === 'Y'){
                 extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
              }
              // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
              if(extraRoadAddr !== ''){
                  extraRoadAddr = ' (' + extraRoadAddr + ')';
              }

              // 우편번호와 주소 정보를 해당 필드에 넣는다.
              document.getElementById('sample4_postcode').value = data.zonecode;
              document.getElementById("sample4_roadAddress").value = roadAddr;
              document.getElementById("sample4_jibunAddress").value = data.jibunAddress;
              
              // 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
              if(roadAddr !== ''){
                  document.getElementById("sample4_extraAddress").value = extraRoadAddr;
              } else {
                  document.getElementById("sample4_extraAddress").value = '';
              }

              var guideTextBox = document.getElementById("guide");
              // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
              if(data.autoRoadAddress) {
                  var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
                  guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
                  guideTextBox.style.display = 'block';

              } else if(data.autoJibunAddress) {
                  var expJibunAddr = data.autoJibunAddress;
                  guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
                  guideTextBox.style.display = 'block';
              } else {
                  guideTextBox.innerHTML = '';
                  guideTextBox.style.display = 'none';
              }
          }
      }).open();
  }
</script>
```

--------------------------------

### onresize

Source: https://postcode.map.kakao.com/guide

Defines a callback function to handle changes in the postcode service screen size. Note that height changes are frequent and recommended for use, while width is fixed based on the initial rendering.

```APIDOC
## onresize

### Description
Defines a callback function triggered when the postcode service screen size changes.

### Parameters
- **size** (object) - Contains width and height of the search result screen.

### Return Values
- **width** (number) - Search result screen width.
- **height** (number) - Search result screen height.
```

--------------------------------

### Implement Kakao Postcode Layer Logic

Source: https://postcode.map.kakao.com/guide

This script handles the execution of the postcode search, address parsing, and layer positioning. It includes the logic to display the layer, calculate its center position, and populate address fields upon selection.

```javascript
        // iframe을 넣은 element를 안보이게 한다.
        element_layer.style.display = 'none';
    }

    function sample2_execDaumPostcode() {
        new kakao.Postcode({
            oncomplete: function(data) {
                // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                if(data.userSelectedType === 'R'){
                    // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                    // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                    if(data.bname !== '' && /[동로가]$/.test(data.bname)){
                        extraAddr += data.bname;
                    }
                    // 건물명이 있고, 공동주택일 경우 추가한다.
                    if(data.buildingName !== '' && data.apartment === 'Y'){
                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                    if(extraAddr !== ''){
                        extraAddr = ' (' + extraAddr + ')';
                    }
                    // 조합된 참고항목을 해당 필드에 넣는다.
                    document.getElementById("sample2_extraAddress").value = extraAddr;
                
                } else {
                    document.getElementById("sample2_extraAddress").value = '';
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('sample2_postcode').value = data.zonecode;
                document.getElementById("sample2_address").value = addr;
                // 커서를 상세주소 필드로 이동한다.
                document.getElementById("sample2_detailAddress").focus();

                // iframe을 넣은 element를 안보이게 한다.
                // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
                element_layer.style.display = 'none';
            },
            width : '100%',
            height : '100%',
            maxSuggestItems : 5
        }).embed(element_layer);

        // iframe을 넣은 element를 보이게 한다.
        element_layer.style.display = 'block';

        // iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
        initLayerPosition();
    }

    // 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
    // resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
    // 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
    function initLayerPosition(){
        var width = 300; //우편번호서비스가 들어갈 element의 width
        var height = 400; //우편번호서비스가 들어갈 element의 height
        var borderWidth = 5; //샘플에서 사용하는 border의 두께

        // 위에서 선언한 값들을 실제 element에 넣는다.
        element_layer.style.width = width + 'px';
        element_layer.style.height = height + 'px';
        element_layer.style.border = borderWidth + 'px solid';
        // 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
        element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px';
        element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px';
    }
```

--------------------------------

### Apply themeObj to Postcode constructor

Source: https://postcode.map.kakao.com/guide

Pass the created themeObj to the kakao.Postcode constructor when opening or embedding the service.

```javascript
//위에서 생성한 themeObj객체를 우편번호 서비스 생성자에 넣습니다.
```

```javascript
//생성자의 자세한 설정은 예제 및 속성탭을 확인해 주세요.
```

```javascript
/*

new kakao.Postcode({

 	 theme: themeObj

}).open();



new kakao.Postcode({

 	 theme: themeObj

}).embed(target);

*/
```

--------------------------------

### Open standard popup

Source: https://postcode.map.kakao.com/guide

Opens the address search service in a new popup window.

```javascript
//일반적인 팝업 오픈
new kakao.Postcode({...}).open();
```

--------------------------------

### 주소 데이터 객체 예시

Source: https://postcode.map.kakao.com/guide

검색 결과 선택 시 반환되는 주소 정보 객체의 주요 속성 예시입니다.

```javascript
* `address` : "경기 성남시 분당구 판교역로 166"
* `addressEnglish` : "166 Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea"
* `addressType` : "R"
* `userSelectedType` : "R"
* `roadAddress` : "경기 성남시 분당구 판교역로 166"
* `roadAddressEnglish` : "166 Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea"
* `jibunAddress` : "경기 성남시 분당구 백현동 532"
* `jibunAddressEnglish` : "532 Baekhyeon-dong, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea"
* `buildingName` : "에이치스퀘어 엔동"
```

--------------------------------

### kakao.Postcode.open()

Source: https://postcode.map.kakao.com/guide

Opens the address search interface in a popup window.

```APIDOC
## kakao.Postcode.open()

### Description
Opens the address search service in a new popup window. This is the standard method for displaying the search interface to the user.

### Usage Example
```javascript
var element_postcode = new kakao.Postcode({ ... });
element_postcode.open();
```
```

--------------------------------

### Open popup with search query

Source: https://postcode.map.kakao.com/guide

Opens the address search popup pre-filled with a specific search term.

```javascript
//특정 검색어를 넘겨 팝업 오픈
new kakao.Postcode({...}).open({
    q: '판교역로 166'
});
```

--------------------------------

### 우편번호 서비스 HTML 구조 및 스크립트

Source: https://postcode.map.kakao.com/guide

주소 입력을 위한 HTML 필드와 iframe을 렌더링할 컨테이너, 그리고 카카오 우편번호 API를 로드하고 제어하는 JavaScript 코드입니다.

```html
<input type="text" id="sample3_postcode" placeholder="우편번호">
```

```html
<input type="button" onclick="sample3_execDaumPostcode()" value="우편번호 찾기"><br>
```

```html
<input type="text" id="sample3_address" placeholder="주소"><br>
```

```html
<input type="text" id="sample3_detailAddress" placeholder="상세주소">
```

```html
<input type="text" id="sample3_extraAddress" placeholder="참고항목">
```

```html

```

```html
<div id="wrap" style="display:none;border:1px solid;width:500px;height:300px;margin:5px 0;position:relative">
```

```html
<img src="//t1.kakaocdn.net/postcode/resource/images/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" onclick="foldDaumPostcode()" alt="접기 버튼">
```

```html
</div>
```

```html

```

```html
<script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
```

```html
<script>
```

```javascript
  // 우편번호 찾기 찾기 화면을 넣을 element
  var element_wrap = document.getElementById('wrap');

  function foldDaumPostcode() {
      // iframe을 넣은 element를 안보이게 한다.
      element_wrap.style.display = 'none';
  }

  function sample3_execDaumPostcode() {
      // 현재 scroll 위치를 저장해놓는다.
      var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
      new kakao.Postcode({
          oncomplete: function(data) {
              // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

              // 각 주소의 노출 규칙에 따라 주소를 조합한다.
              // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
              var addr = ''; // 주소 변수
              var extraAddr = ''; // 참고항목 변수

              //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
              if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                  addr = data.roadAddress;
              } else { // 사용자가 지번 주소를 선택했을 경우(J)
                  addr = data.jibunAddress;
              }

              // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
              if(data.userSelectedType === 'R'){
                  // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                  // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                  if(data.bname !== '' && /[동로가]$/.test(data.bname)){
                      extraAddr += data.bname;
                  }
                  // 건물명이 있고, 공동주택일 경우 추가한다.
                  if(data.buildingName !== '' && data.apartment === 'Y'){
                      extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                  }
                  // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                  if(extraAddr !== ''){
                      extraAddr = ' (' + extraAddr + ')';
                  }
                  // 조합된 참고항목을 해당 필드에 넣는다.
                  document.getElementById("sample3_extraAddress").value = extraAddr;
              
              } else {
                  document.getElementById("sample3_extraAddress").value = '';
              }

              // 우편번호와 주소 정보를 해당 필드에 넣는다.
              document.getElementById('sample3_postcode').value = data.zonecode;
              document.getElementById("sample3_address").value = addr;
              // 커서를 상세주소 필드로 이동한다.
              document.getElementById("sample3_detailAddress").focus();

              // iframe을 넣은 element를 안보이게 한다.
              // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
              element_wrap.style.display = 'none';

              // 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
              document.body.scrollTop = currentScroll;
          },
          // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
          onresize : function(size) {
              element_wrap.style.height = size.height+'px';
          },
          width : '100%',
          height : '100%'
      }).embed(element_wrap);

      // iframe을 넣은 element를 보이게 한다.
      element_wrap.style.display = 'block';
  }
```

```html
</script>
```

--------------------------------

### kakao.Postcode.open()

Source: https://postcode.map.kakao.com/guide

Opens the address search interface in a popup window. Allows configuration of search queries, popup positioning, titles, and auto-close behavior.

```APIDOC
## kakao.Postcode.open(options)

### Description
Opens the address search screen as a popup. You can specify an initial search query, popup position, title, and control whether the window closes automatically after selection.

### Parameters
- **options** (object) - Optional
  - **q** (string) - Initial search query.
  - **left** (number) - X coordinate of the popup.
  - **top** (number) - Y coordinate of the popup.
  - **popupTitle** (string) - Title of the popup window.
  - **popupKey** (string) - Unique identifier for the popup to prevent multiple windows.
  - **autoClose** (boolean) - Whether to close the popup automatically after selection (default: true).

### Example
```javascript
new kakao.Postcode({...}).open({
  q: '판교역로 166',
  autoClose: false
});
```
```

--------------------------------

### iframe 기반 우편번호 찾기 레이어 구현

Source: https://postcode.map.kakao.com/guide

우편번호 찾기 버튼과 주소 입력 필드, 그리고 레이어를 표시할 div를 포함한 전체 HTML 및 JavaScript 코드입니다. iOS 환경에서의 position:fixed 이슈를 고려하여 구현해야 합니다.

```html
<input type="text" id="sample2_postcode" placeholder="우편번호"> <input type="button" onclick="sample2_execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="sample2_address" placeholder="주소"><br> <input type="text" id="sample2_detailAddress" placeholder="상세주소"> <input type="text" id="sample2_extraAddress" placeholder="참고항목"> <!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 --> <div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;"> <img src="//t1.kakaocdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼"> </div> <script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> <script> // 우편번호 찾기 화면을 넣을 element var element_layer = document.getElementById('layer'); function closeDaumPostcode() { // iframe을 넣은 element를 안보이게 한다. element_layer.style.display = 'none'; } function sample2_execDaumPostcode() { new kakao.Postcode({ oncomplete: function(data) { // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. // 각 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. var addr = ''; // 주소 변수 var extraAddr = ''; // 참고항목 변수 //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다. if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우 addr = data.roadAddress; } else { // 사용자가 지번 주소를 선택했을 경우(J) addr = data.jibunAddress; } // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다. if(data.userSelectedType === 'R'){ // 법정동명이 있을 경우 추가한다. (법정리는 제외) // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다. if(data.bname !== '' && /[동로가]$/.test(data.bname)){ extraAddr += data.bname; } // 건물명이 있고, 공동주택일 경우 추가한다. if(data.buildingName !== '' && data.apartment === 'Y'){ extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName); } // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. if(extraAddr !== ''){ extraAddr = ' (' + extraAddr + ')'; } // 조합된 참고항목을 해당 필드에 넣는다. document.getElementById("sample2_extraAddress").value = extraAddr; } else { document.getElementById("sample2_extraAddress").value = ''; } // 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById('sample2_postcode').value = data.zonecode; document.getElementById("sample2_address").value = addr; // 커서를 상세주소 필드로 이동한다. document.getElementById("sample2_detailAddress").focus(); // iframe을 넣은 element를 안보이게 한다. // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.) element_layer.style.display = 'none'; }, width : '100%', height : '100%', maxSuggestItems : 5 }).embed(element_layer); // iframe을 넣은 element를 보이게 한다. element_layer.style.display = 'block'; // iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다. initLayerPosition(); } // 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는 // resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나, // 직접 element_layer의 top,left값을 수정해 주시면 됩니다. function initLayerPosition(){ var width = 300; //우편번호서비스가 들어갈 element의 width var height = 400; //우편번호서비스가 들어갈 element의 height var borderWidth = 5; //샘플에서 사용하는 border의 두께 // 위에서 선언한 값들을 실제 element에 넣는다. element_layer.style.width = width + 'px'; element_layer.style.height = height + 'px'; element_layer.style.border = borderWidth + 'px solid'; // 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다. element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px'; element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px'; } </script>
```

--------------------------------

### Define themeObj for Postcode customization

Source: https://postcode.map.kakao.com/guide

Create a theme object to define custom colors for various elements of the Postcode service. Colors should be provided in hex format like #F00 or #FF0000.

```javascript
//아래 코드처럼 테마 객체를 생성합니다.(color값은 #F00, #FF0000 형식으로 입력하세요.)
```

```javascript
//변경되지 않는 색상의 경우 주석 또는 제거하시거나 값을 공백으로 하시면 됩니다.
```

```javascript
var themeObj = {
```

```javascript
 	 //bgColor: "", //바탕 배경색
```

```javascript
 	 //searchBgColor: "", //검색창 배경색
```

```javascript
 	 //contentBgColor: "", //본문 배경색(검색결과,결과없음,첫화면,검색서제스트)
```

```javascript
 	 //pageBgColor: "", //페이지 배경색
```

```javascript
 	 //textColor: "", //기본 글자색
```

```javascript
 	 //queryTextColor: "", //검색창 글자색
```

```javascript
 	 //postcodeTextColor: "", //우편번호 글자색
```

```javascript
 	 //emphTextColor: "", //강조 글자색
```

```javascript
 	 //outlineColor: "" //테두리
```

```javascript
};
```

--------------------------------

### Define onresize callback

Source: https://postcode.map.kakao.com/guide

Defines a callback function to handle screen size changes of the postcode service. It is recommended to use the height value as it changes frequently, while width remains constant based on the wrapper DOM.

```javascript
new kakao.Postcode({ onresize: function(size) { //size는 우편번호 찾기 화면의 크기 데이터 객체이며, 상세 설명은 아래 목록에서 확인하실 수 있습니다. } });
```

```javascript
new kakao.Postcode({
    onresize: function(size) {
        //size는 우편번호 찾기 화면의 크기 데이터 객체이며, 상세 설명은 아래 목록에서 확인하실 수 있습니다.
    }
});
```

--------------------------------

### Define onsearch callback

Source: https://postcode.map.kakao.com/guide

Defines a callback function executed when an address search is performed. It runs before the onresize callback and receives search query information.

```javascript
new kakao.Postcode({ onsearch: function(data) { //data는 검색결과에 대한 검색어와 갯수를 가지고 있는 데이터 객체입니다. } });
```

```javascript
new kakao.Postcode({
    onsearch: function(data) {
        //data는 검색결과에 대한 검색어와 갯수를 가지고 있는 데이터 객체입니다.
    }
});
```

--------------------------------

### iframe 방식 우편번호 찾기 구현

Source: https://postcode.map.kakao.com/guide

우편번호 찾기 화면을 특정 요소 내에 삽입하고, onresize를 통해 iframe 높이를 조절하는 HTML 및 JavaScript 코드입니다.

```html
<input type="text" id="sample3_postcode" placeholder="우편번호"> <input type="button" onclick="sample3_execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="sample3_address" placeholder="주소"><br> <input type="text" id="sample3_detailAddress" placeholder="상세주소"> <input type="text" id="sample3_extraAddress" placeholder="참고항목"> <div id="wrap" style="display:none;border:1px solid;width:500px;height:300px;margin:5px 0;position:relative"> <img src="//t1.kakaocdn.net/postcode/resource/images/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" onclick="foldDaumPostcode()" alt="접기 버튼"> </div> <script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> <script> // 우편번호 찾기 찾기 화면을 넣을 element var element_wrap = document.getElementById('wrap'); function foldDaumPostcode() { // iframe을 넣은 element를 안보이게 한다. element_wrap.style.display = 'none'; } function sample3_execDaumPostcode() { // 현재 scroll 위치를 저장해놓는다. var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop); new kakao.Postcode({ oncomplete: function(data) { // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. // 각 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. var addr = ''; // 주소 변수 var extraAddr = ''; // 참고항목 변수 //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다. if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우 addr = data.roadAddress; } else { // 사용자가 지번 주소를 선택했을 경우(J) addr = data.jibunAddress; } // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다. if(data.userSelectedType === 'R'){ // 법정동명이 있을 경우 추가한다. (법정리는 제외) // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다. if(data.bname !== '' && /[동로가]$/.test(data.bname)){ extraAddr += data.bname; } // 건물명이 있고, 공동주택일 경우 추가한다. if(data.buildingName !== '' && data.apartment === 'Y'){ extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName); } // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. if(extraAddr !== ''){ extraAddr = ' (' + extraAddr + ')'; } // 조합된 참고항목을 해당 필드에 넣는다. document.getElementById("sample3_extraAddress").value = extraAddr; } else { document.getElementById("sample3_extraAddress").value = ''; } // 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById('sample3_postcode').value = data.zonecode; document.getElementById("sample3_address").value = addr; // 커서를 상세주소 필드로 이동한다. document.getElementById("sample3_detailAddress").focus(); // iframe을 넣은 element를 안보이게 한다. // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.) element_wrap.style.display = 'none'; // 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다. document.body.scrollTop = currentScroll; }, // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다. onresize : function(size) { element_wrap.style.height = size.height+'px'; }, width : '100%', height : '100%' }).embed(element_wrap); // iframe을 넣은 element를 보이게 한다. element_wrap.style.display = 'block'; } </script>
```

--------------------------------

### Open popup with custom title

Source: https://postcode.map.kakao.com/guide

Sets the title displayed in the popup window's status bar.

```javascript
//팝업창의 상태표시줄에 나오는 Title 값을 지정할 수 있습니다.
//지정하지 않을시 기본값은 'Kakao Postcode Service'로 들어가게 됩니다.
new kakao.Postcode({...}).open({
    popupTitle: '우편번호 검색 팝업' //팝업창 타이틀 설정 (영문,한글,숫자 모두 가능)
});
```

--------------------------------

### Open popup with unique key

Source: https://postcode.map.kakao.com/guide

Assigns a key to the popup window to prevent multiple windows from opening. Defaults to '_blank'.

```javascript
//여러개의 팝업창이 뜨는 것을 방지하기 위해 팝업창의 Key값을 지정
//지정하지 않을시 기본값은 '_blank'로 설정되어 계속 새창으로 열리게 됩니다
new kakao.Postcode({...}).open({
    popupKey: 'popup1' //팝업창 Key값 설정 (영문+숫자 추천)
});
```
Tokens:
Raw