Web 37

freegeoip.app API를 호출하여 IP 주소의 국가, 위도 및 경도를 가져오는 코드

무료 IP 지리 정보 서비스인 freegeoip.app를 사용하여 IP 주소로 국가 코드, 국가 이름, 지역 코드, 지역 이름, 도시, 위도 및 경도, 타임존 정보를 가져올수 있습니다. 아래 코드는 PHP를 이용한 코드입니다. 아래는 Python을 사용하여 예시를 보여드리겠습니다. 다음 코드는 requests 라이브러리를 사용하여 freegeoip.app API를 호출하여 IP 주소의 국가, 위도 및 경도를 가져오는 방법을 보여줍니다: import requests def get_ip_geo(ip_address): url = f"https://freegeoip.app/json/{ip_address}" response = requests.get(url) data = response.json() country..

Web/PHP 2024.03.18

CKEditor5 클립보드 이미지 업로드 하는 방법(Paste, Ctrl+v)

1. CKEditor5 클립보드 이미지를 서버에 업로드 CKEditor5의 clipboardInput 이벤트를 사용하여 붙여넣기된 콘텐츠에 이미지가 있는 경우 이미지를 서버에 업로드할 수 있습니다. 이미지가 있을 때 해당 이미지를 서버에 업로드하고, 서버에 업로드된 이미지의 URL을 콘텐츠에 삽입하는 방법을 살펴보겠습니다. ClassicEditor .create( document.querySelector( '#editor' ) ) .then( editor => { // clipboardInput 이벤트 리스너 등록 editor.editing.view.document.on( 'clipboardInput', async ( evt, data ) => { let clipboardData = data.dataTr..

Web/PHP 2024.03.07

PHP) 주어진 시작일자와 종료일자 사이의 남은 일 수를 계산하는 방법

아래 PHP 함수는 주어진 시작일자($s_date)와 종료일자($e_date) 사이의 남은 일 수를 계산하는 기능을 합니다. 함수는 다음과 같은 단계로 작동합니다: $e_date가 빈 문자열인 경우, 즉 종료일자가 제공되지 않은 경우에는 "0"을 반환합니다. 시작일자와 종료일자를 각각 연, 월, 일로 분리하여 배열로 저장합니다. (explode 함수를 사용하여 문자열을 구분자(여기서는 "-")로 분리합니다.) mktime 함수를 사용하여 시작일과 종료일의 타임스탬프를 생성합니다. 이 함수는 연, 월, 일, 시, 분, 초를 기반으로 타임스탬프를 반환합니다. 시작일의 타임스탬프($s_time)와 종료일의 타임스탬프($e_time)를 비교하여 시작일이 종료일보다 늦은 경우 0을 반환합니다. 즉, 시작일이 종료..

Web/PHP 2024.02.02

카운트하여 숫자 값에 애니메이션을 적용하여 데이터를 표시하는 CountUp.js

CountUp.js는 보다 흥미로운 방식으로 숫자 데이터를 표시하는 애니메이션을 빠르게 만드는 데 사용할 수 있는 종속성 없는 경량 Javascript 클래스입니다. 그 이름에도 불구하고 CountUp은 전달하는 시작 값과 끝 값에 따라 어느 방향으로든 계산할 수 있습니다. CountUp.js는 모든 브라우저를 지원합니다. https://github.com/inorganik/CountUp.js GitHub - inorganik/countUp.js: Animates a numerical value by counting to it Animates a numerical value by counting to it. Contribute to inorganik/countUp.js development by crea..

Web/JavaScript 2023.04.13

flex 속성을 이해하기 좋은 사이트... Flexbox Froggy

Flexbox Froggy에 오신 것을 환영합니다! Flexbox Froggy는 Froggy와 친구들 돕는 CSS 코드 게임입니다. 오른쪽의 justify-content 속성을 이용하여 개구리가 수련잎으로 이동할 수 있도록 도와주세요. 이 속성은 다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬합니다 flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. http://flexboxfroggy.com/#ko Flexbox Froggy A game for ..

Web/CSS 2022.04.19

포스트맨 사용시 url 변경할 때 사용하기 좋은 팁... 전역변수 설정

포스트맨 사용시 API url, token, 테스트 아이디를 변수화하여 처리하는 방법입니다. 최근 프로젝트 중에 개발자서버(cafe24)를 사용하다가 서버이전(AWS, NCloud 등)으로 이전시에 편하게 Url을 수정해서 사용할 수 있는 방법입니다 귀찮은 상황이 생길시 fix해두고 편하게 사용할 수 있습니다 (프로젝트 포스트맨을 생성할때 셋팅을 해두시면 두고두고 후회 안할 팁입니다) 1. 우선 'Collection'탭에서 프로젝트에 해당하는 폴더를 생성하면 우측 상단에 'No Environment'라고 표시가 됩니다. 2. 'Collection'탭 아래에 'Environments'탭을 클릭해주세요. 3. 기본으로 'Globals'가 있으며, '+'버튼을 눌러 새로 생성할 수 있습니다. 'Globals'..

Web 2022.03.25

jQuery FilePond - 파일업로드 및 이미지 최적화

jQuery FilePond는 JavaScript 라이브러리인 FilePond용 편리한 jQuery 어댑터로, 무엇이든 업로드할 수 있고, 더 빠른 업로드를 위해 이미지를 최적화하며, 훌륭하고 액세스 가능하며 매끄럽고 부드러운 사용자 경험을 제공합니다. 또한 이미지 편집이 필요하십니까? Pintura는 최신 JavaScript 이미지 편집기 를 찾고 있습니다. Pintura는 자르기 종횡비 설정 , 크기 조정 , 회전 , 자르기 및 이미지 뒤집기 를 지원 합니다. 무엇보다도 FilePond와 아름답게 통합됩니다. Learn more about Pintura Pintura Image Editor, a Powerful JavaScript Image Editor SDK A powerful JavaScript ..

Web/JavaScript 2022.02.22

컬러 팔레트를 찾는 데 시간을 낭비하지 말고... 그라디언트

완벽한 컬러 팔레트를 찾는 데 시간을 낭비하지 마십시오! 색상을 입력하기만 하면 됩니다! 그리고 멋진 색상 팔레트 생성 My Color Space 사용자가 입력한 16진수 코드로 알려진 한 가지 색상을 기반으로 색상 팔레트를 생성하는 첨단 색상 구성표 생성 도구입니다! 그 외에도 이 도구를 사용하여 배경 이미지에 대한 3색 그라디언트를 만들 수 있습니다. 색상을 선택하고 도구가 그라디언트를 생성하도록 하고 CSS 코드를 복사하여 사이트에 붙여넣습니다. https://mycolor.space/ ColorSpace - Color Palettes Generator and Color Gradient Tool Just Enter a Color! And Generate nice Color Palettes mycol..

Web/CSS 2021.12.29