CSS : Flex 고정된 열 개수 지정하기 - flexbox, wrap, column 개수

CSS Flexbox 고정된 열의 개수대로 레이아웃 만들기 - wrap, column 개수 CSS Flexbox를 사용해서 열 개수를 지정하는 방법을 소개합니다. Flex 아이템에 width만 설정해서 간단히 사용하는 방법부터, width 및 gap의 비율을 조정해서 item의 개수와 무관하게 반응형으로 레이아웃을 구성하는 방법 에 대해 작성하였습니다. CSS Flex 찍먹 혹시나, Flex가 뭔지 모르는 분들을 위해 아주 짧게만 설명을 작성하였습니다. Flex가 뭔지 모르시는 분은 아래 짧은 글 정도만 보시고, 구글에 검색해서 좋은 양질의 글을 보시면 될 것 같습니다. Flex는? Flexible Box, Flexbox라고 불리는 Flex는 HTML 레이아웃을 배치하기 위해 사용되는 방법 중의 하나입니..

Programming/WEB 2022.04.19

카카오 지도 WEB API : 장소 ID 받아오기 및 지도 URL 생성

Kakao Maps API : 장소 ID 활용 장점 및 가져오는 방법 카카오 맵에서 지도 URL 생성 방법은 크게 좌표(위도, 경도)를 사용하거나 장소ID를 사용하는 방법이 있습니다. 좌표를 사용하면 단순위 위치만 전달하지만, 장소 ID를 사용하면 장소명이 선택된 지도가 표시됩니다. 이 포스트에서는 장소 ID를 사용하면 좋은 점과 장소 ID를 얻는 방법 에 대해 소개합니다. 지도 URL 생성 URL 생성 방법 및 결과 차이 카카오 맵 API 공식 문서를 보면 지도 URL을 생성하는 방법은 아래 3가지입니다. 아래 3가지의 URL을 접속하는 경우 아래 그림과 같은 결과가 브라우저 또는 카카오 지도 어플로 연결됩니다. /link/map/위도,경도 👉 map.kakao.com/link/map/37.402056..

Programming/WEB 2021.05.09

카카오 지도 WEB API : setBounds(bounds) 내부 영역 범위 조정하기

Kakao Maps API : setBounds로 지도 범위 재설정시 내부 영역 미세조정하기 이번 포스트는 지도에 표시되는 다수의 마커를 고려하여 지도 범위를 재 설정해주는 setBounds() 메서드 사용시 Padding 값을 사용하여 표시하는 지도 범위를 조정하는 법에 대해 소개합니다. 사전 참고사항 범위 재설정 하기 setBounds()를 사용하여 지도를 보여주는 범위를 재설정 하는 방법은 이전 포스트 또는 공식 가이드를 참고해주세요. 카카오 지도 API 기본 사용법 : 지도 범위 설정 카카오 지도 WEB API : 지도 그리기, 마커 표시, 지도 범위 설정 등 기본 사용법 정리 Kakao Maps API : 장소 ID 가져와서 지도 표시 하는 방법 카카오 지도 WEB API 가이드, 예제, 공식문..

Programming/WEB 2021.05.09

카카오 지도 WEB API : 여러 개의 지도 생성하는 방법

Kakao Maps API : 웹페이지 또는 블로그 포스트에 다수의 지도 생성하는 방법 이 포스트는 하나의 웹페이지 또는 하나의 포스트에 여러 개의 지도를 표시하는 방법 을 소개합니다. 알고 나면 간단하고 당연하지만, 처음에 당황한 기억이 있어 기록으로 남겨둡니다. 카카오 지도 API 기본적인 사용법은 이전 포스트 또는 공식 가이드를 참고해주세요. 카카오 지도 WEB API 지도 그리기 카카오 지도 WEB API : 지도 그리기, 마커 표시, 지도 범위 설정 등 기본 사용법 정리 Kakao Maps API : 장소 ID 가져와서 지도 표시 하는 방법 카카오 지도 WEB API 가이드, 예제, 공식문서는 웹 프로그래밍을 모르는 제가 봐도 쉽게 사용 할 수 있도록 정리가 잘 되어 있습니다. 이 포스트 jua..

Programming/WEB 2021.05.09

카카오 지도 WEB API : 지도 그리기, 마커 표시, 지도 범위 설정 등 기본 사용법 정리

Kakao Maps API : 장소 ID 가져와서 지도 표시 하는 방법 카카오 지도 WEB API 가이드, 예제, 공식문서는 웹 프로그래밍을 모르는 제가 봐도 쉽게 사용 할 수 있도록 정리가 잘 되어 있습니다. 이 포스트는 제가 다시 Kakao Maps API를 사용하게 될 때 빠르게 복기하거나, 저 처럼 웹 프로그래밍을 모르는 분들이 조금이라도 API를 응용해서 사용하는데 도움이 되고자 카카오 지도 API를 사용하는 기본 사용법 에 대해 작성하였습니다. 준비사항 API Key 수령하기 Kakao Maps API를 사용해 생성한 지도를 자신의 사이트 또는 블로그에 적용하고 싶은 경우, API Key를 받아야 합니다. API Key를 받고 적용하는 방법은 아래의 링크를 참조해주세요. 카카오 지도 WEB A..

Programming/WEB 2021.05.08

카카오 지도 생성기 WEB API : 여러 개 마커가 있는 지도 생성, 확인 후 임베드 하기 - 여행 경로 용도

Kakao Map API : 여러개 마커가 있는 지도 생성 후 임베드하기 - 여행 일정 짜기 도구 및 기타 티스토리나 웹페이지에 여러 개 마커가 있는 지도 쉽게 만들기 위해 Kakao Map API를 사용하여 생성한 코드를 공유 합니다. 지도 미리보기는 최대 5개까지 지원하도록 만들었습니다. 이 코드를 사용하기 위해서는 KakaoMAP API 키를 발급받아야 합니다. 사전 안내 사항 Kakao Map API 이 코드는 Kakao Map API를 사용합니다. 이 코드를 웹사이트나, 티스토리와 같은 블로그에서 사용하기 위해서 KaKaoMap API키를 받으셔야 합니다. API 키를 받는 방법은 아래의 링크를 참조해주세요. Kakao Maps API Key 받는 방법 및 시작하기 맵 스타일, 기능 이 포스트에..

Programming/WEB 2021.05.07

카카오 지도 WEB API : API KEY 받는 방법 및 시작하기

Kakao Map WEB API : API KEY 받고 시작하기 제가 운영하는 티스토리에 제가 원하는 형태의 지도를 넣어보고 싶어서 찾아보다가, 카카오맵 WEB API를 알게 되어 Kakao Map API KEY를 받고, 시작 하는 법 을 간단히 정리해보았습니다. API KEY 받기 카카오맵 API를 사용하기 위해서는 APP KEY를 발급받아야 합니다. 카카오지도 API KEY는 1일 300,000회 사용하는 한도 내에서 무료로 발급 가능합니다. 1일 300,000회를 사용한다는 말은, 지도 API를 사용하여 지도를 그리는 일을 300,000번 한다는 이야기입니다. 소규모 또는 개인적인 블로그 용도로는 충분히 무료로 사용 가능해 보입니다. 1. APP KEY 발급하기를 선택 Kakao 지도 API 2. ..

Programming/WEB 2021.05.07