Atelier BiCute

Vue3 사용하면서 사용하기 가장 쉬웠던 원형 프로그래스 라이브러리 언젠가 또 사용하게 될 일이 있을지도 모르니 기록하기 위해 글을 남겨봅니다. 공식 페이지 Vue3 Radial Progress Official Website > 사용 방법 Step 1. 설치 npm install --save vue3-radial-progress // 또는 yarn add vue3-radial-progress Step 2. script 내부에 import import RadialProgress from 'vue3-radial-progress'; Step 3. import 했으니 components에 등록 components: { RadialProgress, }, Step 4. 진행률과 전체값 정의 data() { retu..

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

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폴더 안에 있습..

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

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

리액트에서 컴포넌트 형식으로 사용할 수 있는 둥글둥글한 스타일의 아이콘 세트입니다. MIT 라이선스로 배포되고 있기에 상업적으로도 사용 가능하며 리액트가 아니더라도 SVG와 PNG 형식으로도 사용할 수 있도록 배포하고 있습니다. Pebble Icons >

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

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..

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..

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