Lpla 개발 블로그

HTML&CSS

[SCSS] Live Sass Compiler 설정

vscode의 Live Sass Compiler를 사용하다보면 느끼는 두 가지 불편사항이 있다. 첫째는 불필요한 map 파일이 생성되고 css 파일 하단에 map 주석이 생성되는 점이다. 두번째는 컴파일된 css파일이 강제로 expanded 스타일로 생성되는 점이다. 다행히 설정에서 이 문제들을 해결할 수 있다. 먼저 vscode의 설정(ctrl + ,)에 들어간다. 그리고 Live Sass Compile를 검색하고 Settings: Generate Map을 settings.json에서 편집한다. 그러면 "liveSassCompile.settings.generateMap" 이 나타나는데 이 값을 false로 저장한다. 처음부터 false로 되어 있다면 그 상태 그대로 다시 저장한다. 그리고 map 파일을..

JavaScript/실전

[JavaScript] Tilt.js 사용하기

1. Tilt.js 소개 Tilt.js 라이브러리를 사용하면 요소에 마우스의 움직임에 따라 변하는 3D 틸트 효과를 부여할 수 있다. 1.71kb로 가볍고 사용법도 간단해서 쉽고 예쁜 효과를 빠르게 구현할 수 있는 장점이 있다. gijsroge/tilt.js A tiny 60+fps parallax tilt hover effect for jQuery. - gijsroge/tilt.js github.com See the Pen Tilt.js by lpla (@lpla) on CodePen. 2. Tilt.js 사용법 Tilt.js 라이브러리를 사용하기 위해서는 제이쿼리와 Tilt.js를 추가해야 한다. 틸트 효과를 부여하는 방법은 두 가지로 첫번째는 해당 요소에 data-tilt를 추가하는 것이다. 두번째..

JavaScript/기초

[JavaScript] 함수 (2)

이전 글에서 이어집니다. [JavaScript] 함수 1. 함수란? 자바스크립트에서 함수는 가장 중요한 문법 중 하나이다. 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아서 출력 lpla.tistory.com 6. 참조에 의한 전달과 외부 상태의 변경 엄연히 말해 자바스크립트에서 참조에 의한 전달은 존재하지 않고 값에 의한 전달만이 존재한다. 하지만 편의상 전달되는 값의 종류에 따라 값에 의한 전달과 참조에 의한 전달로 구분하여 부르기로 한다. 이 때 참조에 의한 전달은 다른 프로그래밍 언어에서 말하는 그것과 정확히 일치하지 않는다. // 매개변수 primitive는 원시값을 전달받고, 매개변수 obj는 객체를 전달받는다. function ..

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를 잘 몰라도 어렵지 않게 사용할..

JavaScript/실전

[JavaScript] 익스플로러 유튜브 로딩 문제 해결

익스플로러에서 iframe이나 object로 유튜브를 삽입하면 타 브라우저에 비해서 로딩 속도가 매우 느린 현상이 있다. 이미 이 자체만으로도 심각한 문제지만, 사이트에 페이드 등 일부 효과들이 렉을 동반한 버벅임으로 정상 실행되지 않는 것도 문제다. 크롬은 지연 로딩을 지원하고 있다. 이치럼 loading="lazy" 를 추가해주면 페이지를 로드할 때 유튜브를 읽지 않고 스크롤이 됐을 때 유튜브를 로드하여 페이지 로딩 시간을 단축시키고 렉도 줄인다. 하지만 아쉽게도 익스플로러는 지연로딩 기능이 없다. 지연로딩도 없지만 로딩 속도가 비정상적으로 느리다. 이 문제를 해결하기 위해서 익스플로러에서 페이지 로드시 유튜브를 읽지 않고 썸네일만 불러들인 다음, 썸네일을 클릭하면 유튜브 영상이 시작되도록 하는 방식..