JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법
다음(카카오)에서 우편번호 검색 서비스를 무료로 제공한다. 팝업 창에 Powerd by kakao가 표시되고, 기본 모양이 투박하다는 단점이 있지만, 빠르게 주소 검색 서비스를 구현해주는 고마운 서비스임에는 틀림이 없다.
자세한 사용법은 아래 링크에 있다.
https://postcode.map.daum.net/guide
너무 상세한 설명이라 이해가 어렵다면, 최소한의 코드로 만들고, 필요한 것을 하나씩 추가하는 게 좋다.
기본 예제와 작동 방식
아래는 최소한의 코드로 작성한 것이다. [우편번호 찾기]를 클릭하면 팝업이 뜨고, 검색 후 주소를 클릭하면 우편번호와 주소가 입력된다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
* {
box-sizing: border-box;
}
input {
height: 40px;
vertical-align: middle;
border: 1px solid #dadada;
padding: 0px 15px;
}
</style>
</head>
<body>
<p>
<input type="text" id="zip-code" placeholder="우편번호">
<input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
<p>
</p>
<input type="text" id="address-1" placeholder="도로명주소" style="width: 500px">
<p>
</p>
<input type="text" id="address-2" placeholder="상세주소" style="width: 500px">
</p>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function execDaumPostcode() {
new daum.Postcode( {
oncomplete: function( data ) {
document.getElementById( 'zip-code' ).value = data.zonecode;
document.getElementById( 'address-1' ).value = data.address;
}
} ).open();
}
</script>
</body>
</html>
작동 순서는 다음과 같다.
- 우편번호 찾기를 클릭하면 execDaumPostcode() 함수를 호출한다.
- 팝업이 뜬다.
- 주소를 검색하고 결과 목록에서 주소를 클릭하면, 주소 정보를 양식에 전송한다.
가져올 정보와 어떤 양식에 값을 넣을지는 아래와 같은 코드로 정한다. 우편번호(data.zonecode)를 ID가 zip-code인 양식에 넣으라는 뜻이다.
document.getElementById( 'zip-code' ).value = data.zonecode;
가져올 수 있는 정보 목록은 아래 링크에 있다.
https://postcode.map.daum.net/guide#attributes
상세 주소에 포커스 맞추고, 전송 받은 정보는 읽기 전용으로 만들기
주소 검색 후 상세 주소에 바로 입력할 수 있게 하려면 아래와 같은 코드를 추가한다.
document.getElementById( 'address-2' ).focus();
가져온 값을 변경하지 못하게 하려면 input에 readonly를 추가한다.
<input ... readonly>
아래는 지번 주소를 추가하고, 가져온 정보는 읽기 전용으로 만들고, 상세 주소에 포커스를 맞춘 것이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
* {
box-sizing: border-box;
}
input {
height: 40px;
vertical-align: middle;
border: 1px solid #dadada;
padding: 0px 15px;
}
</style>
</head>
<body>
<p>
<input type="text" id="zip-code" placeholder="우편번호" readonly>
<input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
<p>
</p>
<input type="text" id="address-1" placeholder="도로명주소" style="width: 500px" readonly>
<p>
</p>
<input type="text" id="address-1-1" placeholder="지번주소" style="width: 500px" readonly>
<p>
</p>
<input type="text" id="address-2" placeholder="상세주소" style="width: 500px">
</p>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function execDaumPostcode() {
new daum.Postcode( {
oncomplete: function( data ) {
document.getElementById( 'zip-code' ).value = data.zonecode;
document.getElementById( 'address-1' ).value = data.address;
document.getElementById( 'address-1-1' ).value = data.jibunAddress;
document.getElementById( 'address-2' ).focus();
}
} ).open();
}
</script>
</body>
</html>
초기화 버튼 만들기
input에 readonly를 추가한 경우 값을 지울 수 없다. 초기화 기능을 넣고 싶다면 다음과 같이 한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
* {
box-sizing: border-box;
}
input {
height: 40px;
vertical-align: middle;
border: 1px solid #dadada;
padding: 0px 15px;
}
</style>
</head>
<body>
<p>
<input type="text" id="zip-code" placeholder="우편번호" readonly>
<input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
<input type="button" onclick="execDaumPostcodeReset()" value="초기화">
<p>
</p>
<input type="text" id="address-1" placeholder="도로명주소" style="width: 500px" readonly>
<p>
</p>
<input type="text" id="address-1-1" placeholder="지번주소" style="width: 500px" readonly>
<p>
</p>
<input type="text" id="address-2" placeholder="상세주소" style="width: 500px">
</p>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function execDaumPostcode() {
new daum.Postcode( {
oncomplete: function( data ) {
document.getElementById( 'zip-code' ).value = data.zonecode;
document.getElementById( 'address-1' ).value = data.address;
document.getElementById( 'address-1-1' ).value = data.jibunAddress;
document.getElementById( 'address-2' ).focus();
}
} ).open();
}
function execDaumPostcodeReset() {
document.getElementById( 'zip-code' ).value = null;
document.getElementById( 'address-1' ).value = null;
document.getElementById( 'address-1-1' ).value = null;
document.getElementById( 'address-2' ).value = null;
}
</script>
</body>
</html>
Related Posts
JavaScript / 요소 추가하기 / .createElement(), .createTextNode(), .appendChild()
자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다. .createElement() .createTextNode() .appendChild() .createElement()는 요소를 만듭니다. 예를 들어 .createElement( 'h1' ) 은 다음과 같은 코드를 생성합니다. <h1></h1> .createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어 .createTextNode( 'My Text' ) 는 My Text라는 문자열을 만듭니다. .appendChild()는 선택한 요소 안에 자식 요소를 추가합니다. 다음은 Click이라는 텍스트를 가진 button 요소를 추가하는 예제입니다. <!doctype html> <html ...
현재 날짜와 시간 가져오기 Date()로 현재 날짜와 시간을 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; font-size: ...
Uncategorized html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리 imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리 Masonry - 벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리 Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리 turn.js - 책장을 넘기는 듯한 플립(flip) 효과를 만들어 주는 라이브러리
JavaScript / Object / document.querySelectorAll() / 특정 CSS 선택자를 가진 모든 요소 선택하는 메서드
.querySelectorAll() .querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드입니다. 문법 document.querySelectorAll( 'selector' ) 예를 들어 document.querySelectorAll( '.abc' ) 는 클래스 값이 abc인 모든 요소를 가져옵니다. document.querySelectorAll( '.abc, .def' ); 클래스 값이 abc 또는 def인 모든 요소를 가져옵니다. 예제 1 클래스 값이 abc인 요소 중 두번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / Object / document.title / 문서의 제목을 가져오거나 변경하는 속성
.title .title 속성으로 문서의 제목을 가져오거나 변경할 수 있습니다. 문법 1 document.title 문서의 <title> 태그의 내용을 반환합니다. 문법 2 document.title = 'ABC' 문서의 <title> 태그의 내용을 ABC로 바꿉니다. 예제 문서의 제목 JavaScript를 출력하고, 제목을 CODING FACTORY로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write ( '<p>' ...
JavaScript / Object / String.match() / 정규표현식에 맞는 문자열을 찾아 가져오는 메서드
.match() .match()는 정규표현식에 맞는 문자열을 찾아서 배열 객체로 반환합니다. 문법 string.match( regexp ) 만약 정규표현식에 맞는 문자열이 없다면 null을 반환합니다. 예제 Lorem Ipsum Dolor 문자열에서 Lo가 있는지, Lo를 포함한 단어가 있는지, Loi가 있는지 검색하고, 그 결과를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | match</title> </head> ...
JavaScript / Object / Array.concat() / 기존 배열에 원소 또는 배열을 추가하여 새 배열 만들기
.concat() .concat() 속성을 이용하여 기존 배열에 원소 또는 배열을 추가하여 새 배열을 만들 수 있습니다. 문법 var jbAry2 = jbAry1.concat( 'abc' ); jbAry1 배열에 문자열 abc를 추가하여 jbAry2 배열을 만듭니다. var jbAry3 = jbAry1.concat( jbAry2 ); 두 배열 jbAry1과 jbAry2를 합하여 새로운 배열 jbAry3을 만듭니다. 예제 다음의 두 예제는 같은 결과를 만듭니다. <!doctype html> <html lang="ko"> <head> ...
JavaScript / JavaScript를 HTML 문서에 삽입하는 방법
HTML 문서에 직접 삽입 HTML 문서 안에 <script> 태그를 만들고, 그 안에 사이에 코드를 넣는 방법입니다. <script> alert ("Hello"); </script> 이 방법은 몇 개의 페이지에 JavaScript를 사용하거나, JavaScript 코드가 짧은 경우에 유용합니다. 스크립트 파일을 만든 후 불러오기 JavaScript 코드를 담은 파일을 만든 후 HTML 문서에 연결시키는 방법입니다. 다음과 같은 내용의 파일을 만들고 hello.js라는 이름으로 저장합니다. (스크립트 파일의 ...
JavaScript / Object / String.split() / 문자열 분할하는 메서드
.split() .split()은 문자열을 분할하는 메서드입니다. 문법 string.split( separator, limit ) separator에는 분할의 기준을 넣습니다. 예를 들어 쉼표를 기준으로 분할할 때는 ',' 와 같이 합니다. limit로 최대 분할 개수를 정합니다. 선택 사항으로, 값을 정하지 않으면 전체를 다 분할합니다. 예제 1 쉼표를 기준으로 문자열을 분할하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> ...
JavaScript / Object / .innerText, .innerHTML
.innerText .innerText은 특정 요소의 텍스트를 가져오거나, 특정 요소의 텍스트를 변경한다. 문법 1 - 내용 가져오기 element의 내용을 가져온다. element.innerText id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다. var jb = document.getElementById( 'xyz' ).innerText; 예제 1 id의 값이 jb인 요소의 텍스트를 가져와서 출력한다. 태그 등은 제외한 텍스트만 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...