Lpla 개발 블로그

etc

웹사이트에 유튜브 영상을 삽입하는 여러가지 방법

iframe embed 가장 기본적인 방식이며 컴알못도 사용 가능하다는 최고 장점이 있다. 예제 1. 간단하고 쉬운 embed 방식 See the Pen 유튜브 iframe embed (1) - 기본 by lpla (@lpla) on CodePen. 예제 2. 매개변수를 사용하여 자동재생과 반복재생 추가 뿐만 아니라 유튜브에서 지원하는 매개변수를 사용하면 간단하면서도 유용한 몇 가지 기능을 사용할 수 있다. See the Pen 유튜브 iframe embed (1) - 기본 by lpla (@lpla) on CodePen. 주로 사용하는 매개변수는 아래와 같다. 매개변수 값 기능 autoplay 1 자동재생 기능 사용 mute 1 음소거 controls 0 플레이어 컨트롤러 숨김 loop 1 반복재생 기..

etc

유튜브 iframe Player API 구간 반복 재생

유튜브 특정 구간을 반복 재생시켜 달라는 요청을 받았다. 처음엔 그게 될까 싶었는데 Youtube API에서 이 기능을 지원한다. 일반적으로 유튜브 영상을 첨부하는 iframe 태그를 사용하는 방식으로는 안되고 iframe Player API를 사용해야 한다. See the Pen 유튜브 구간 반복 자동재생 by lpla (@lpla) on CodePen. 전체 코드가 어떻게 동작하는지 궁금한 사람들은 공식 사이트를 참고하도록 하고, iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers Embed a YouTube player in your application. developers.google.com ..

etc

윈도우 터미널 설치

Mac의 터미널과 유사한 윈도우 터미널을 마이크로소프트 스토어에서 쉽게 다운받아 사용할 수 있다. Windows Terminal 구매 - Microsoft Store ko-KR Microsoft Store에서 이 Windows 10용 앱을 다운로드하세요. 스크린샷을 보고, 최신 고객 리뷰를 읽고, Windows Terminal에 대한 평점을 비교하세요. www.microsoft.com 만약 설치가 안된다면 윈도우 설정에서 개발자 모드를 켜고 다시 설치하면 된다. 설치가 끝났다면 윈도우키(Win) + wt로 윈도우 터미널을 실행시킬 수 있다.

etc

로컬 호스트에서 phpmyadmin 속도 문제 해결

phpmyadmin이 유독 로컬 서버에서 응답 속도가 많이 느린 문제가 있다. phpmyadmin이 설치되어 있는 폴더에서 confing.inc.php 파일을 아래로 수정한다. [수정 전] $cfg['Servers'][$i]['host'] = 'localhost'; [수정 후] $cfg['Servers'][$i]['host'] = '127.0.0.1'; 그리고 비트나미 서버를 재시작한다. 그리고 다시 phpmyadmin을 접속하면 평소와 같은 속도가 나온다. 참고 : https://community.bitnami.com/t/phpmyadmin-4-8-1-is-very-slow-how-do-i-upgrade-it/61965

etc

네이버 지도 API - 웹사이트에 네이버 지도 첨부

카카오 지도는 HTML 태그를 바로 복사하여 쓸 수 있지만 네이버 지도는 API를 사용해야 지도를 첨부할 수 있다. 따라서 카카오 지도를 써도 무방하면 이 글을 읽지 말고 카카오 지도를 사용하면 되고 반드시 네이버 지도를 써야 한다면 아래 내용을 따라하면 된다. 1. 회원가입 먼저 네이버 클라우드 플랫폼에 가입해야 한다. NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 네이버 클라우드 플랫폼은 부분유료 서비스로 무료 제공 한도를 초과할 경우 비용을 청구하기 때문에 결제수단 정보를 ..

etc

네이버 지도 API 길찾기 - 출발지와 도착지 입력

1. Nclound 웹페이지에 길찾기 버튼을 만들고 클릭하면 네이버 지도 어플을 실행하여 출발지는 GPS상 내 현재 위치, 목적지는 미리 정해둔 어떤 장소로 하여 길찾기 기능을 만들고자 한다. 일반적인 지도 링크는 네이버 지도 사이트에서 URL을 가져오면 된다. 하지만 길찾기라면 이야기가 다르다. 길찾기 기능은 일반적인 네이버 지도로는 기능을 사용할 수 없고 Nclound의 Maps 서비스 중 "지도앱 연동 URL scheme"를 사용해야 한다. 지도앱 연동 URL Scheme - Maps 쿠키 제공 동의 당사는 고객님의 브라우징 기반 정보를 바탕으로 관련 정보 및 광고 제공을 위하여 지식 기반 쿠키를 사용합니다. guide.ncloud-docs.com URL Scheme를 잘 몰라도 어렵지 않게 사용할..

etc

[SVG] 애니메이션

SVG SVG로 애니메이션 효과를 만들어보도록 하겠다. 내가 원하는 결과물은 아래와 같다. 먼저 svg파일을 다운받거나 만들어야 한다. 나는 일러스트레이터 패스툴로 금방 그렸다. HTML Asset 2 먼저 svg를 HTML에 붙여넣는다. 코드가 길지만 결국에 선을 나타내는 건 이다. 는 그룹(group)의 약자로 여기선 사용할 일이 없으므로 지워도 상관 없다. Polyline, Path Polyline과 Path는 큰 차이가 없다. 곡선을 나타낼 때 Polyline이 Path보다 더 많은 개수가 사용된다고 하나 크게 의미 없다. 혹시라도 polyline를 path로 바꿔 쓰고 싶다면 아래처럼 코드를 수정하면 된다. 지금은 마지막과 처음을 연결할 일이 없으므로 사용하지 않는다. 어디까지나 설명을 위해서 ..

etc

VSCode CSS, SCSS 코드 한줄로 정렬하는 플러그인

비주얼 스튜디오 코드(Visual Studio Code)는 사용자의 취향에 따라 다양한 플러그인을 설치할 수 있다. 오늘은 그 중에 CSS와 SCSS에서 사용할 수 있는 Formatter를 추천하려고 한다. Formatter란 코드를 더 깔끔하고 가시성과 가독성이 좋게 자동정렬해주는 기능으로 대표적으로 Beautify와 Prettier 등이 있다. 나도 두 플러그인을 모두 사용해봤지만 Prettier는 내 취향과는 다른 형태로 강제 적용되다 보니 Beautify를 선호한다. Beautify를 한동안 쓰면서 큰 불편함은 없었지만 몇 달전부터 내 코드 정렬 방식에 변화가 생기면서 문제가 생겼다. .main_news_section .main_news_container { max-width: 1280px; ma..

etc

VSCode JQuery 코드힌트 안보이는 문제 해결

어느날부터 집에 설치된 VSCode에서 자바스크립트 코드힌트가 나오지 않았다. 아니, 자세히 살펴보니 자바스크립트는 문제 없었고 제이쿼리 코드힌트가 나오지 않았다. 문제 해결방법은 VSCode 터미널에 다음 명령어를 입력하면 된다. npm install @types/jquery --save 타입스크립트에서 제이쿼리를 사용하는 방법이라고 한다. ......난 타입스크립트를 쓸 줄 모르는데 뭘까? 예전에 node.js와 eslint를 설치하면서 문제가 생긴 모양이다. 결과적으로 제이쿼리 코드힌트가 아주 잘 보인다. 그런데 이번에는 제이쿼리 문법에 취소선이 생겼다. 실행은 문제없이 되지만 매우 거슬리는 관계로 없애는 방법을 찾아봤다. 원인은 on()이나 trigger() 방식을 사용하지 않아서였다. 그런데 j..

etc

VBA 기초

VBA 실행은 [개발 도구] > [Visual Basic] 혹은 Alt + F11 매크로 실행은 [개발 도구] > [매크로] 혹은 Alt + F8 혹은 VBA창에서 F5 //셀 A10 선택 Worksheets("Sheet1").Range("A10").Activate Sheets(1).Range("A10").Activate Range("a10").Activate [A10].Activate //Select과 Activate의 차이 Select은 새롭게 영역을 선택하기 때문에 기존의 Selection이 해제됨 Activate는 선택한 영역을 해제하지 않은 채 특정 셀을 선택 //메시지창 띄우기 MsgBox ("메시지 내용") //글꼴 변경 Range("B2").Font.Color = RGB(0, 174, 24..