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>
JavaScript / JavaScript를 HTML 문서에 삽입하는 방법
HTML 문서에 직접 삽입 HTML 문서 안에 <script> 태그를 만들고, 그 안에 사이에 코드를 넣는 방법입니다. <script> alert ("Hello"); </script> 이 방법은 몇 개의 페이지에 JavaScript를 사용하거나, JavaScript 코드가 짧은 경우에 유용합니다. 스크립트 파일을 만든 후 불러오기 JavaScript 코드를 담은 파일을 만든 후 HTML 문서에 연결시키는 방법입니다. 다음과 같은 내용의 파일을 만들고 hello.js라는 이름으로 저장합니다. (스크립트 파일의 ...
Uncategorized html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리 imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리 Masonry - 벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리 Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리 turn.js - 책장을 넘기는 듯한 플립(flip) 효과를 만들어 주는 라이브러리
JavaScript / Object / document.write()
.write() .write()은 문서에 문자, 코드 등을 쓰는 메서드입니다. 문법 document.write( exp1, exp2, ... ) 예제 Hello와 World를 연달아 출력합니다. document.write( 'Hello', 'World' ); 2를 출력합니다. document.write( 1+1 ) 코드는 코드로 인식합니다. document.write( '<p style="font-size: 80px; text-align: center;">Hello</p>' ); 닫는 script 태그에는 \를 붙여서 <\/script>로 씁니다. document.write( '<script>document.write( "Hello" )<\/script>' ); JavaScript / Object / document.writeln()
현재 날짜와 시간 가져오기 Date()로 현재 날짜와 시간을 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; font-size: ...
변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 비교 연산자는 8가지가 있는데, 각 연산자의 의미를 알아보겠습니다. == ==는 '같다'입니다. 변수 타입과 상관없이 값이 같으면 참입니다. 즉 5 == 5 도 참이고 '5' == 5 도 참입니다. != !=는 '같지 않다'입니다. === ===는 '엄격하게 같다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐 아니라 ...
JavaScript / Object / document.URL / 문서의 URL을 반환하는 속성
.URL .URL 속성으로 문서의 URL을 가져올 수 있습니다. 문법 document.URL 예제 문서의 URL을 출력합니다. <!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>document.URL : " + document.URL + "</p>" ); </script> </body> </html> JavaScript / Object / Location - URL 정보 가져오는 객체
JavaScript / 함수 / eval() / 문자열을 코드로 인식하게 하는 함수
eval() eval()은 문자열을 코드로 인식하게 하는 함수입니다. 문법 eval( string ) 예를 들어 eval( '2+2' ) 는 문자열 2+2가 아니라 계산한 결과 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = '2+2'; document.write( '<p>' + jb + '</p>' ); document.write( '<p>' + eval( jb ) + '</p>' ); </script> </body> </html>
인코딩 함수, 디코딩 함수 인코딩 함수 escape() encodeURI() encodeURIComponent() 디코딩 함수 unescape() decodeURI() decodeURIComponent() IE8에서 last-child, nth-child 등 가상 클래스 적용시키는 방법 selectivizr HTML 문서의 style 태그 안에 넣은 CSS 코드에는 적용되지 않는다. 외부 CSS 파일에만 적용됩니다. jQuery, prototype 등 다른 자바스크립트 라이브러리가 필요하다.
JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드
window.matchMedia() CSS는 미디어쿼리를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할 수 있습니다. 자바스크립트에서도 window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드입니다. 문법 window.matchMedia( mediaQueryString ) mediaQueryString : CSS 미디어쿼리를 입력합니다. window는 생략할 수 있습니다. 예를 들어 window.matchMedia( '( min-width: 500px )' ) 는 500px 이상을 뜻합니다. 속성 .media : mediaQueryString을 ...
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> ...