728x90
내컴퓨터 ip 확인하기 가져오기 ip가져오는 api 사이트
IP 확인 API 테스트
api.ipify.org
로딩 중...
ifconfig.me
로딩 중...
icanhazip.com
로딩 중...
ident.me
로딩 중...
checkip.amazonaws.com
로딩 중...
ipecho.net
로딩 중...
myexternalip.com
로딩 중...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IP 확인 API 테스트</title>
<style>
/* 기본 리셋 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 바디 스타일링 */
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
/* 컨테이너 */
.containerip {
max-width: 900px;
margin: 0 auto;
}
/* 헤더 */
.h1_ip {
text-align: center;
margin-bottom: 30px;
color: #333;
}
/* API 섹션 */
.api-section {
background: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.api-section h2 {
margin-bottom: 10px;
color: #007BFF;
}
.api-section a {
text-decoration: none;
color: inherit;
}
.api-section a:hover {
text-decoration: underline;
}
.result_ip {
margin-top: 10px;
padding: 10px;
background-color: #f9f9f9;
border-left: 4px solid #007BFF;
border-radius: 4px;
}
.error {
color: red;
}
/* 로딩 스피너 */
.spinner_ip {
border: 4px solid #f3f3f3;
border-top: 4px solid #007BFF;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 반응형 디자인 */
@media (max-width: 600px) {
.api-section {
padding: 15px;
}
.h1_ip {
font-size: 24px;
}
.spinner_ip {
width: 16px;
height: 16px;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="h1_ip">IP 확인 API 테스트</h1>
<!-- ipify 섹션 -->
<div class="api-section">
<h2><a href="https://api.ipify.org/?format=json" target="_blank">api.ipify.org</a></h2>
<p id="result_ipify" class="result_ip">
<span class="spinner_ip"></span>로딩 중...
</p>
</div>
<!-- ifconfig.me 섹션 -->
<div class="api-section">
<h2><a href="https://ifconfig.me/all.json" target="_blank">ifconfig.me</a></h2>
<p id="result_ifconfig" class="result_ip">
<span class="spinner_ip"></span>로딩 중...
</p>
</div>
<!-- icanhazip.com 섹션 -->
<div class="api-section">
<h2><a href="https://icanhazip.com/" target="_blank">icanhazip.com</a></h2>
<p id="result_icanhazip" class="result_ip">
<span class="spinner_ip"></span>로딩 중...
</p>
</div>
<!-- ident.me 섹션 -->
<div class="api-section">
<h2><a href="https://ident.me/" target="_blank">ident.me</a></h2>
<p id="result_ident_me" class="result_ip">
<span class="spinner_ip"></span>로딩 중...
</p>
</div>
<!-- checkip.amazonaws.com 섹션 -->
<div class="api-section">
<h2><a href="https://checkip.amazonaws.com/" target="_blank">checkip.amazonaws.com</a></h2>
<p id="result_checkip_aws" class="result_ip">
<span class="spinner_ip"></span>로딩 중...
</p>
</div>
<!-- ipecho.net 섹션 -->
<div class="api-section">
<h2><a href="https://ipecho.net/plain" target="_blank">ipecho.net</a></h2>
<p id="result_ipecho" class="result_ip">
<span class="spinner_ip"></span>로딩 중...
</p>
</div>
<!-- myexternalip.com 섹션 -->
<div class="api-section">
<h2><a href="https://myexternalip.com/raw" target="_blank">myexternalip.com</a></h2>
<p id="result_myexternalip" class="result_ip">
<span class="spinner_ip"></span>로딩 중...
</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 결과 요소 참조
const resultIpify = document.getElementById('result_ipify');
const resultIfconfig = document.getElementById('result_ifconfig');
const resultIcanhazip = document.getElementById('result_icanhazip');
const resultIdentMe = document.getElementById('result_ident_me');
const resultCheckipAws = document.getElementById('result_checkip_aws');
const resultIpecho = document.getElementById('result_ipecho');
const resultMyexternalip = document.getElementById('result_myexternalip');
/**
* ipify API를 통해 IP 주소를 가져오는 함수
*/
function fetchIP_ipify() {
fetch('https://api.ipify.org/?format=json')
.then(response => {
if (!response.ok) {
throw new Error(`ipify HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
resultIpify.innerHTML = `<strong>${data.ip}</strong>`;
})
.catch(error => {
console.error('ipify 오류 발생:', error);
resultIpify.innerHTML = '<span class="error">ipify를 통해 IP 주소를 가져오는 중 오류가 발생했습니다.</span>';
});
}
/**
* ifconfig.me API를 통해 IP 주소를 가져오는 함수
*/
function fetchIP_ifconfig() {
fetch('https://ifconfig.me/all.json')
.then(response => {
if (!response.ok) {
throw new Error(`ifconfig.me HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
const ip = data.ip_addr || data.ip;
resultIfconfig.innerHTML = `<strong>${ip}</strong>`;
})
.catch(error => {
console.error('ifconfig.me 오류 발생:', error);
resultIfconfig.innerHTML = '<span class="error">ifconfig.me를 통해 IP 주소를 가져오는 중 오류가 발생했습니다.</span>';
});
}
/**
* icanhazip.com API를 통해 IP 주소를 가져오는 함수
*/
function fetchIP_icanhazip() {
fetch('https://icanhazip.com/')
.then(response => {
if (!response.ok) {
throw new Error(`icanhazip.com HTTP error! status: ${response.status}`);
}
return response.text();
})
.then(data => {
const ip = data.trim();
resultIcanhazip.innerHTML = `<strong>${ip}</strong>`;
})
.catch(error => {
console.error('icanhazip.com 오류 발생:', error);
resultIcanhazip.innerHTML = '<span class="error">icanhazip.com을 통해 IP 주소를 가져오는 중 오류가 발생했습니다.</span>';
});
}
/**
* ident.me API를 통해 IP 주소를 가져오는 함수
*/
function fetchIP_ident_me() {
fetch('https://ident.me/')
.then(response => {
if (!response.ok) {
throw new Error(`ident.me HTTP error! status: ${response.status}`);
}
return response.text();
})
.then(data => {
const ip = data.trim();
resultIdentMe.innerHTML = `<strong>${ip}</strong>`;
})
.catch(error => {
console.error('ident.me 오류 발생:', error);
resultIdentMe.innerHTML = '<span class="error">ident.me를 통해 IP 주소를 가져오는 중 오류가 발생했습니다.</span>';
});
}
/**
* checkip.amazonaws.com API를 통해 IP 주소를 가져오는 함수
*/
function fetchIP_checkip_aws() {
fetch('https://checkip.amazonaws.com/')
.then(response => {
if (!response.ok) {
throw new Error(`checkip.amazonaws.com HTTP error! status: ${response.status}`);
}
return response.text();
})
.then(data => {
const ip = data.trim();
resultCheckipAws.innerHTML = `<strong>${ip}</strong>`;
})
.catch(error => {
console.error('checkip.amazonaws.com 오류 발생:', error);
resultCheckipAws.innerHTML = '<span class="error">checkip.amazonaws.com을 통해 IP 주소를 가져오는 중 오류가 발생했습니다.</span>';
});
}
/**
* ipecho.net API를 통해 IP 주소를 가져오는 함수
*/
function fetchIP_ipecho() {
fetch('https://ipecho.net/plain')
.then(response => {
if (!response.ok) {
throw new Error(`ipecho.net HTTP error! status: ${response.status}`);
}
return response.text();
})
.then(data => {
const ip = data.trim();
resultIpecho.innerHTML = `<strong>${ip}</strong>`;
})
.catch(error => {
console.error('ipecho.net 오류 발생:', error);
resultIpecho.innerHTML = '<span class="error">ipecho.net을 통해 IP 주소를 가져오는 중 오류가 발생했습니다.</span>';
});
}
/**
* myexternalip.com API를 통해 IP 주소를 가져오는 함수
*/
function fetchIP_myexternalip() {
fetch('https://myexternalip.com/raw')
.then(response => {
if (!response.ok) {
throw new Error(`myexternalip.com HTTP error! status: ${response.status}`);
}
return response.text();
})
.then(data => {
const ip = data.trim();
resultMyexternalip.innerHTML = `<strong>${ip}</strong>`;
})
.catch(error => {
console.error('myexternalip.com 오류 발생:', error);
resultMyexternalip.innerHTML = '<span class="error">myexternalip.com을 통해 IP 주소를 가져오는 중 오류가 발생했습니다.</span>';
});
}
// 모든 API 호출 함수 실행
fetchIP_ipify();
fetchIP_ifconfig();
fetchIP_icanhazip();
fetchIP_ident_me();
fetchIP_checkip_aws();
fetchIP_ipecho();
fetchIP_myexternalip();
});
</script>
</body>
</html>728x90
'javascript' 카테고리의 다른 글
| 구글 드라이브에 있는 이미지의 공유 링크 구글 시트로 한번에 가져오기 (0) | 2025.02.13 |
|---|---|
| 자바스크립트(JavaScript) 구글스프레드시트 데이터 가져오기 (0) | 2025.02.13 |
| 자바스크립트로 랜덤 문자열 생성하기 (0) | 2024.10.08 |
| 자바스크립트로 페이지네이션(pagination) 만들기 (0) | 2024.10.08 |
| vanilla javascript navigator로 사용자 언어, 배터리 상태, 위치, 기타 정보 가져오기 (1) | 2024.10.08 |
