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

안드로이드 코틀린 : CameraX 카메라 앱 - 수동 초점 Focus 기능 추가하기

Android Kotlin : CameraX - Tap to Focus CameraX 라이브러리와 PreviewView를 사용한 카메라 앱에서 수동 초점 기능을 추가하는 방법 을 소개합니다. 아래 전체 코드에 나와있는 기본 사진 찍기, 줌, 플래쉬, 타이머 설정방법은 이전 포스트를 참고해주세요. 상단의 CameraX 태그 또는 하단의 관련 포스트를 참고하시면 됩니다. 수동 초점 Focus 기능 추가하기 터치 한 곳에 수동 초점을 추가하는 방법은 여러가지가 있겠지만, 카메라 미리보기로 사용하는 PreviewView에 터치 이벤트가 할 때 초점을 맞추도록 리스너를 추가할 수 있습니다. 예시 코드 및 설정 아래 코드는 ViewBinding을 사용하여 작성한 코드 입니다. binding.previewView.s..

Programming/Android App(Kotlin) 2021.05.25

안드로이드 코틀린 : CameraX 카메라 앱 - 타이머 모드 추가하기

Android Kotlin : CameraX 카메라 앱 만들기 - Timer 적용하기 지난 포스트에서는 CameraX 라이브러리를 사용한 카메라 앱에서 플래시를 켜고 끄는 방법을 소개하였습니다. 이번 포스트는 CameraX 를 사용한 카메라 앱에 타이머 모드를 추가 하는 예제입니다. 이전 CameraX 관련 포스트의 코드에서 기능을 추가하는 것으로 기본적인 코드는 이전의 포스트들을 참고해주세요. 하단의 CameraX 관련 포스트를 클릭하면 CameraX 관련 포스트만 볼 수 있습니다. CameraX 카메라 앱 : 사진 찍기, 줌, 플래쉬 기능 추가 안드로이드 코틀린 : CameraX 카메라 앱 - Zoom In/Out 배율 확대 축소 조정하기 Android Kotlin : CameraX 카메라 앱 만들기..

Programming/Android App(Kotlin) 2021.05.23

안드로이드 코틀린 : CameraX 카메라 앱 - Zoom In/Out 배율 확대 축소 조정하기

Android Kotlin : CameraX 카메라 앱 만들기 - 카메라 줌 배율 조절하기 지난 포스트에서는 CameraX 라이브러리로 제작한 기본 카메라 앱에 플래쉬를 ON/OFF 하는 방법에 대해 작성하였습니다. 이번 포스트는 Zoom 기능을 추가하는 방법 에 대해 소개합니다. 이 포스트는 CameraX 관련된 이전 포스트의 연장선상에서 작성하였습니다. CameraX 관련 포스트 리스트는 상단의 태그를 클릭하시거나, 하단의 관련 포스트 링크를 참조해주세요. Zoom 확대/축소 카메라 줌 확대/축소를 위해 CameraControl, CameraInfo 인터페이스를 사용합니다. 이전 포스트에 CameraControl 와 CameraInfo를 간략히 소개하였으니, 참고해주세요. CameraControl을 ..

Programming/Android App(Kotlin) 2021.05.22

안드로이드 코틀린 : 쉬운 말로 설명하는 Thread 와 Handler 개념 이해 및 타바타 타이머 예시

Android Kotlin : 내마음대로 설명하는 Thread, Handler 와 예시 저는 새로운 것을 학습해야 할 때, 처음부터 익숙하지 않은 단어와 도표들을 보면 진입 장벽이 느껴져 어렵지 않은 것들도, 어렵게만 느껴집니다. 대부분의 지식은 이해하면 쉽다고 생각하지만, 쉽게 설명을 들을 수 있는 기회를 찾기 어렵습니다. 그래서 먼저 새로운 것을 학습할 때 나만의 언어로 변경해서 개념을 이해합니다. 이후에, 기술 용어나 이를 설명하는 다이어그램을 보면서 조금더 깊이 있게 학습을 하려 합니다. (이런 방식이 저에게만 맞는지 모르겠지만..) 이 포스트는 안드로이드와 같이 OS에서 실행되는 응용프로그램 개발할 때 필요한 Thread와 Handler의 개념을 제 방식대로 정리하고, 타이머 앱으로 구현한 예시..

Programming/Android App(Kotlin) 2021.05.21

안드로이드 코틀린 : CameraX, CameraControl - Flash(Torch) On/OFF

Android Kotlin : CameraX로 카메라 앱 만들기 - CameraController를 사용하여 플래시(Torch) 켜고 끄기 지난 포스트에서는 CameraX 라이브러리로 사진을 찍는 코드를 소개하였습니다. 이번 포스트는 CameraX 라이브러리와 PreviewView를 사용한 카메라 앱에서 플래시를 켜고 끄는 방법을 소개합니다. CameraX 라이브러리로 사진 찍기 앱 만들기 안드로이드 코틀린 : CameraX 로 사진 촬영하기 안드로이드 코틀린 : CameraX 라이브러리로 사진 찍기 CameraX 는 카메라 앱 개발을 쉽게 할 수 있도록 만들어진 Jetpack 지원 라이브러리 입니다. CameraX 라이브러리를 사용하여 Snow 어플과 같은 카메라 juahnpop.tistory.com ..

Programming/Android App(Kotlin) 2021.05.18

카카오 지도 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