Dev/Library 16

이미지 로딩 상황을 체크하여 이벤트를 주는 imagesLoaded.js

#1 서론 HTML 문서의 로드 이벤트 상태(HTML 문서의 생명주기)을 이용한 명령어는 매우 다양하게 있습니다. 그중 대표적인것들이 다음과 같은것들이 있습니다. (1) 이미지 파일()이나 스타일시트 등 자원의 로드는 기다리지 않으며, 브라우저가 HTML을 읽고 DOM 트리를 완성하는 즉시 발생하는 DOMContentLoaded. document.addEventListener("DOMContentLoaded", function(){ console.log(1) }); (2) 스타일, 이미지 등의 모든 리소스가 로드 되었을떄 실행되는 window 객채의 load 속성. window.onload = function(){ console.log(1) } 이 글은 이러한 이벤트에 관한 내용을 설명하기위해 작성하는 ..

Dev/Library 2022.08.04

팝업창(모달) 오픈 시 본문 스크롤 막기 - body-scroll-lock

body-scroll-lock modal, lightbox / flyouts / nav-menu 등의 요소에서 스크롤을 유지하면서 부모요소인 본문의 스크롤을 비활성화 시켜주는 js 라이브러리 입니다. iOS, 데스크탑 Safari 등에서도 지원되며, Vanilla JavaScript / React / Angular / VueJs 등의 프레임 워크에서도 작동합니다. 공식 사이트 body-scroll-lock Github > ※ 아래 내용 외 더욱 자세한 내용은 모두 이곳에. 사용 방법 공식 사이트에 각 프레임워크별 사용 예제가 포함되어있지만, 보기쉽게 한글로 간단히 정리해 보자면 Vanilla JS 기준 (1) 해당 Github 페이지에서 js 라이브러리를 다운 받습니다. 해당 js는 lib폴더 안에 있습..

Dev/Library 2022.07.30

심플한 아이콘이 필요할 때 - Simple Line Icons

웹사이트에 아이콘을 넣는 방법은 워낙 많기에 취향대로 하면 됩니다만, 심플한 몇개의 대표적인 아이콘들만 이용하고 싶다 + 폰트 어썸처럼 자신의 kit 번호같은 것을 넣는게 싫다 싶은 경우엔 Simple Line Icons도 하나의 대안이 될 수 있을 것입니다. #1 아이콘 샘플 이름과 같이 아래와 같은 매우 심플한 디자인은로 되어있습니다. #2 사용 방법 홈페이지 Simple Line Icons > 다운로드하여 사용하는 방법 (1) 홈페이지 오른쪽 위에 있는 Download icons pack 버튼을 눌러 파일을 다운 받습니다. (2) 자신이 작업하고 있는 폴더에 css와 fonts 폴더를 함께 넣어줍니다. ※ CSS 파일에 기본 설정 경로가 아래와 같이 되어있기 때문에 내부 파일만 같은 폴더로 옴기시면..

Dev/Library 2022.07.27

문자열이 랜덤으로 섞이면서 나타나는 효과

글자가 랜덤으로 섞이면서 나타나는 텍스트 셔플 효과 라이브러리 입니다. 일반 JavaScript만 사용하여 가볍고 라이브러리의 종속성이 없는것이 장점입니다. 샘플 페이지 Demo > 사용방법 1. JS 파일 다운받기 아래 공식 GitHub 레파지로티로 이동하여 shuffle-text 파일을 다운받습니다. GitHub 레파지토리 > 2. JS 파일 연결 다운 받은 파일을 사용할 문서에서 연결해줍니다. 3. 원하는 부분을 선택하여 .start()명령을 통하여 작동할 수 있습니다. This is a ShuffleText.js Examle 4. 그 외 공식 문서에도 다 나와있는 내용이지만 text.duration = 시간(밀리초); 로 텍스트 변환 시간을, text.sourceRandomCharacter = "..

Dev/Library 2022.07.15

LightWidget - 웹사이트에 인스타그램을 넣어보자

제작하는 웹사이트에 인스타그램의 사진들을 표기하기 위해선 인스타그램의 API를 사용하는 방법도 있지만, LightWidget을 사용하면 매우 간편하고 쉽게 구현할 수 있습니다. LightWidget을 사용하면 아래 이미지와 같이 하단에 가득차게 슬라이드 형식으로 배치한다거나, 사이드바 영역에 배치하거나, 특정 영역에 넣는 등 다양하게 구현 가능합니다. 또한 호버 효과나 눌렀을때 어떤 페이지가 연결될건지도 정할수 있죠. #1 LightWidget 회원가입 홈페이지로 이동한 후 오른쪽 상단의 'Sign up'을 클릭하여 회원 가입을 진행합니다. LightWidget 홈페이지로 이동 > #2 인스타그램 계정 연동 로그인을 한 후, 첫화면(Dashboard)에서 Connect account를 눌러 인스타 그램 ..

Dev/Library 2022.07.11

Typed.js - 키보드 타이핑 효과 자바스크립트 라이브러리

Typed.js는 입력한 문자열을 설정한 시간에 맞춰 직접 입력하는듯한 느낌으로 작성을 반복해주는 기능의 JavaScript Library 입니다. 흔히 말하는 타이핑 효과를 자바스크리븥로 쉽게 구현할 수 있게 도와줍니다. (1) 설정하기 CDN 방식 아래 코드를 문서의 닫는 body 태그 위에 작성합니다. 파일을 직접 첨부하고 싶다면 공식 페이지에서 다운받아 이용하시면 됩니다. Typed.js Github > (2) JavaScript 코드 작성 기본형은 다음과 같습니다. /* ===== typing animation ===== */ let typed = new Typed(".typing", { strings: ["", "Web Designer", "Web Developer", "Graphic Desi..

Dev/Library 2022.06.29

MixItUp - 애니메이션 필터링 라이브러리

MixItUp은 아래와 같은 포트폴리오의 프로젝트들 혹은 블로그의 포스트 목록, 제품들을 필터링 또는 정렬을 손쉽게 할 수 있도록 도와주는 라이브러리 입니다. 이 글에서는 필터링 기능만 설명하며 정렬등의 기능은 공식 페이지의 Get started 에서 확인 가능합니다. #1 파일 다운받기 (1) MixItUp 홈페이지로 이동한 후, 하단에 위치한 Download lastest 를 클릭하여 파일을 다운 받습니다. MixItUp 홈페이지 > (2) 압축을 풀어 dist 폴더에 있는 mixitup.min.js파일을 자식의 프로젝트 폴더로 이동합니다. #2 HTML 파일 설정 (1) 필터 기능을 컨트롤할 버튼 세팅 All Category A Category B Category C 해당 버튼들에게 data-fil..

Dev/Library 2022.06.29

EmailJS - 서버 없이 이메일 폼 구현하기 (포트폴리오 페이지에 유용)

EmailJS는 서버 구축없이 자바스크립트만을 이용해 이메일 전송 폼을 만들고 이용할 수 있게 도와줍니다. 무료 이용자는 다음의 제한이 있습니다. - 월 200건 요청 가능 - 사용가능한 이메일 템플릿 2개 - 최대 50Kb 요청 - contacts history 제한 하지만!? 포트폴리오 페이지 등에 사용되는 Contact Me 같은 페이지에 사용하기엔 차고 넘치는 기능이기에 매우 추천할만 한거 같습니다. #1 사용 준비 과정 (1) 회원가입 우선 회원 가입은 필수입니다. https://www.emailjs.com/ (2) 로그인을 하게되면 Email Services 페이지가 나오는데, + Add New Service 를 눌러 연결할 이메일 서비스를 선택합니다. 네이버 같은건 없으니 Gmail을 사용하..

Dev/Library 2022.06.20

CSS 애니메이션 라이브러리 - Animate.css

#1 기능 설명 웹 프로젝트에서 강조 등 다양한 용도로 사용하는데 적합한 애니메이션 CSS 라이브러리입니다. 간단하게 클래스명을 추가하는것으로 다양한 효과를 사용하실 수 있습니다. #2 효과 확인하기 다양한 효과들은 다음 공식 페이지에서 확인할 수 있습니다. 공식 페이지 : https://animate.style/ #3 적용 및 사용 방법 Animate.css 연결하기 ※ NPM 방식과 CDN 방식을 지원합니다. 혹시나 해서 download 방식으로도 만들어 보았지만 아래 내용은 CDN 방식으로 설명합니다. 다음 코드를 앞에 붙여 넣습니다. 사용 방법 기본적인 사용 방법은 효과를 주고싶은 곳에 animate__animated 클래스를 부여한 후, 뒤에 animate__[원하는 효과이름]을 추가해주면 됩니..

Dev/Library 2022.03.29
반응형