투케이2K

[환경 설정 및 설명] ​ 프로그램 : Intelij ​ 설 명 : [Web] 모바일 웹 브라우저에서 비디오 자동 재생 되지 않는 이슈 - video auto play not working [에러 원인] ​ 1. 모바일 브라우저 (크롬, 사파리) 및 웹뷰에서 비디오 자동 재생이 되지 않는 이슈 발생 ​ 지원 가능한 영상이 없습니다. ​ ​ 2. Chrome 의 자동재생 정책 : ​ >> 오디오 및 비디오 요소에 대한 자동 재생 정책은 Chrome 66에서 시작되었으며 Chrome에서 원치 않는 미디어 자동 재생의 약 절반을 효과적으로 차단합니다 ​ >> Web Audio API의 경우 Chrome 71에서 자동 재생 정책이 시작되었습니다. 이는 웹 게임, 일부 WebRTC 애플리케이션 및 오디오 기능을..

[타이틀] ​ 구 분 : Library / 라이브러리 ​ 제 목 : [라이브러리] [Web] html2canvas js (브라우저 화면을 캡쳐 (capture)) ​ 사용되는 곳 : 브라우저 화면 캡쳐 (capture) [설 명] ​ 1. html2canvas js 란 브라우저 화면을 캡처 (capture) 를 수행할 수 있는 라이브러리입니다 ​ 2. html2canvas js 는 화면 캡처를 할 영역을 지정하고 이벤트가 발생하면 지정된 영역을 캡처합니다 ​ 3. html2canvas js 를 사용해 에러 발생 시 자동 에러 화면 캡처 및 서버에 전송해서 에러 분석을 수행할 수 있습니다 [참고 사이트] ​ https://blog.naver.com/kkh0977/223042023217 258. (JavaS..

[설 명] ​ 제목 : 사파리 (safari) 브라우저에서 개발자 모드 (developer) 활성 및 콘솔 확인 방법 [방 법] ​ ​ ​ ​ ​ ​ ​

[설 명] ​ 제목 : 사파리 (safari) 브라우저에서 인터넷 사용 방문 기록 지우기 실시 [방 법] ​ ​ ​ ​ ​

[설 명] ​ 제목 : 크롬 브라우저 (chrome) 인터넷 사용기록 및 방문기록 삭제 방법 [방 법] ​ ​ ​ ​ ​ ​ ​

[방법 설명] ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [원인] >> 아이폰, 안드로이드 모바일에서 카카오톡 링크 접속 시 인앱 브라우저 실행 >> 주소 표시줄, 네이게이션 바 자동 숨김 현상으로 UI 화면이 망가지는 경우 ​ ​ ​ ​ [해결 방법] 공통 : - 가상 키보드 밀림 현상을 방지하기 위해서 각 컨테이너 position 속성을 fixed 로 지정한다 아이폰 추가 설정 : - 자바스크립트 onresize 함수에서 >> 각 컨테이너 height , top 비율을 다시 설정 (변경된 body 해상도 확인 후 다시 비율 설정 : 자연스럽게 full screen 만들기) - 자바스크립트 onready 함수에서 카카오 인앱 브라우저 접속 확인 >> 아이폰인..

/* =========================== */ [ 설명 ] ​ 1. 웹 브라우저에서 url 인코딩, 디코딩을 수행할 수 있는 방법입니다 /* =========================== */ ​ /* =========================== */ [방법 설명] 1. url 인코딩, 디코딩을 지원하는 사이트 접속​ https://www.convertstring.com/ko/EncodeDecode/UrlEncode URL 인코딩 - 온라인 URL 인코더 www.convertstring.com ​ ​ ​ 2. 인코딩, 디코딩 타입 선택 > 데이터 입력 > 변환 수행 실시 ​ ​ /* =========================== */

/* =========================== */ [ 설명 ] ​ 1. 웹 브라우저에서 base64 인코딩, 디코딩을 수행할 수 있는 방법입니다 /* =========================== */ ​ /* =========================== */ [방법 설명] 1. base64 인코딩, 디코딩을 지원하는 사이트 접속 http://base64online.org/encode/ Encode Base64 online base64online.org ​ ​ 2. 인코딩, 디코딩 타입 선택 > 데이터 입력 > 변환 수행 실시 ​ ​ /* =========================== */ ​

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. window.onload : html의 로딩이 끝난 후에 시작합니다 (이미지, 영상 등 모두 로드 완료 후 실행됨)..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. 로컬 스토리지 : 동일한 컴퓨터에서 동일한 브라우저를 사용할 때 데이터가 저장됩니다 (브라우저를 닫아도 유지됨..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체입니다 2. screen 객체의 wi..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. userAgent : 사용자가 접속한 정보를 확인할 수 있습니다 2. toLowerCase : 결과값을 소문자로..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /*=================== [브라우저 단 처리] ===================*/ /* 드랍할 위치 태그에 다른 이벤트가 발생하는 것을 방지 */ function allowDrop(evt) { evt.preventDefault(); }; /* 드래그 시 이벤트 함수 */ function drag(evt) { /* 선택한 div id 값 확인 */ dragId = evt.target.id..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : AndroidStudio 개발 언어 : java /* =========================== */ ​ /* =========================== */ [소스 코드] /** ========== [크롬 브라우저 사용해 외부 링크 이동 실시] ========== **/ public void callChromeBrowser(String url){ //TODO [안드로이드 OS 11 및 타겟 30 이상 필수 사항] /** * [AndroidManifest.xml 파일 > manifest 부분 > 특정 앱 패키지명 등록 필요] * * * * * */ //TODO [크롬 브라우저 패키지명] fi..

/* =========================== */ [ 설명 ] ​ 1. 크롬 브라우저에서 반응형 모바일 디자인 시 기기별 표시되는 디자인 형태를 확인할 수 있는 방법입니다 /* =========================== */ ​ /* =========================== */ [사용 방법] 1. 크롬 (chrome) 브라우저 실행 > [F12] 단축키 버튼을 누릅니다 ​ ​ ​ ​ 2. 상단에 표시된 [device toolbar] 버튼을 클릭합니다 ​ ​ 3. 상단에 있는 [디바이스 종류]를 선택 하신 후 > 반응형 모바일 형태를 확인합니다 ​ /* =========================== */