본문 바로가기

Open Source37

앱아이콘 한번에 만들기 https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(28%2C%2075%2C%20240)&crop=0&backgroundShape=square&effects=none&name=ic_launcher Android Asset Studio - Launcher icon generator romannurik.github.io 2024. 5. 21.
유튜브 영상을 배경으로 넣고 싶을 때 아래 오픈소스를 사용하면 된다. https://github.com/stamat/youtube-background GitHub - stamat/youtube-background: ESM / jQuery plugin for creating video backgrounds from YouTube, Vimeo or video file links.ESM / jQuery plugin for creating video backgrounds from YouTube, Vimeo or video file links. - stamat/youtube-backgroundgithub.com사용법 1. cdn으로 사용할 js파일을 가져온다. 2. 스타일 css와 js 코드를 넣는다. 2024. 5. 1.
티스토리 특정 카테고리에 클래스 주기 var category = decodeURI(window.location.pathname.split('/')[window.location.pathname.split('/').length-1]); if (category == "CSS" || category == "Js") { $("body").addClass("css");} 2024. 4. 29.
티스토리 js 파일 적용하기 1. 스킨편집에서 파일업로드 클릭만든 js 파일을 업로드한다. 2. html body 마지막에 주소 적어준다.  근데 바로 안먹히고 몇분 뒤에 먹힌다. 우연의 일치일수 있으나 파일을 업로드하고 html이나 css 파일가서 공백하나 넣어서 수정해준뒤 저장 해주면 업로드한 파일이 바로 먹힌다. 2024. 4. 27.
이미지 일부 지워주는 사이트 cleanup https://cleanup.pictures/ 2023. 7. 9.
노션페이지를 홈페이지로 변환 oopy https://www.oopy.io/ 1분 만에 만드는 노션 웹사이트, 우피!우피는 노션 페이지를 최적화된 웹사이트로 바꿔드립니다. 원하는 주소를 연결하여 나만의 홈페이지를 시작해 보세요.www.oopy.io그런데 유료다. 베이직 플랜: 5,900원 (기존과 동일) 프로 플랜: 9,900원 2023. 6. 5.
임시 이메일주소 생성기 smallpro https://smailpro.com/ SMAIL PRO | Temp mail - Temp Gmail - Disposable Fake EmailTemp Mail? Forget it, try Temp Gmail now. Protect yourself from spam, malware and trade user information by using disposable email or fake email of SMAILPROsmailpro.com일회용 또는 임시 Gmail 주소, 영구 또는 10분 이메일 주소 등과 같은 다양한 유형의 임시 이메일 주소를 만들 수 있다. 2023. 6. 5.
AI 스토리텔링 캔버스 사이트 https://tome.app/ Tome - AI-powered storytelling A new way to tell stories. Tome brings your ideas to life with video narration, live data, and AI-assisted content creation. tome.app 2023. 6. 5.
AI 아바타 말하는 동영상 만들기 https://studio.d-id.com/ D-ID Studio Create professional videos using just a still image with text or audio powered by AI. studio.d-id.com 1. 사이트에 접속해서 원하는 인물 이미지를 고르거나 생성하고, 원하는 텍스트와 억양, 목소리를 선택한다. 2. Create Video 버튼을 클릭하면 해당 아바타가 말을 하는 동영상이 몇초만에 만들어진다. 2023. 6. 5.
xmind, 마인드맵 생성 사이트 https://xmind.app/ Xmind - Full-featured mind mapping and brainstorming tool. Boost efficiency both in work and life. Millions of people love it. xmind.app https://xmind.app/xmind-works/ Xmind Works Your favorite mind toolbox now open on the web, experience the power of Xmind right in your browser with Xmind Works. xmind.app 사용법 Web : 웹에 접속만 되면 생성 수정이 가능하다. https://xmind.app/xmind-works/ Ctrl + .. 2023. 5. 29.
ai가 360도 배경 생성해주는 사이트 https://www.blockadelabs.com/ Blockade Labs Breaking down barriers between technology and creativity. Start building your own AI-powered 360° worlds today with Skybox AI. www.blockadelabs.com 360도 배경 이미지 만들어주는 ai 사이트이다. 입력창에 원하는 것을 입력하면 알아서 360 배경이미지가 만들어진다. 신기해서 막 만들어 보았다. 2023. 5. 27.
lottiefiles, 에펙 모션을 벡터로 웹에서 가볍게 사용하기 https://lottiefiles.com/ LottieFiles: Download Free lightweight animations for website & apps.Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!lottiefiles.com1. 에펙용 플러그인을 설치한다.설치된 플러그인은 에펙의 윈도우-> Extensions -> LottieFiles 클릭하여 사용한다.  2. 에펙에서 모션을 만든다. 유의할것은 .. 2023. 5. 3.
jquery-smooth-scroll https://github.com/kswedberg/jquery-smooth-scroll GitHub - kswedberg/jquery-smooth-scroll: Automatically make same-page links scroll smoothlyAutomatically make same-page links scroll smoothly - GitHub - kswedberg/jquery-smooth-scroll: Automatically make same-page links scroll smoothlygithub.com// smooth scroll $('a').click(function(event) { event.preventDefault(); var link = this;.. 2023. 4. 19.
AI 음악 생성 사이트, Soundraw https://soundraw.io/ Soundraw Your personal AI music generator. soundraw.io 음악 컨셉과 빠르기, 악기, 음악 길이 등 원하는 것을 클릭만으로 자신의 음악을 만들수 있고, 그것을 다양한 컨텐츠에 사용할 수 있다. 음악을 더 다듬고 다운 받으려면 유료 결제가 필요하다. 16.99 달러, 한달에 22,000원 정도이다. 사용법이 간단하고 인터페이스가 훌륭해서 3분도 안되어 원하는 느낌의 배경음악을 만들 수 있었다. 2023. 3. 24.
3D Real Glassmorphism, Vanilla-tilt https://micku7zu.github.io/vanilla-tilt.js/?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library  Vanilla-tilt.jsTilt change event The tilt change event will output the x,y & percentages of tilting. let eventBox = document.querySelector("#box-event"); let outputContainer = document.querySelector(".output"); VanillaTilt.init(eventBox); eventBox.addEventListener("tiltCmicku7zu.github... 2023. 3. 20.
Typed plugin https://github.com/mattboldt/typed.js GitHub - mattboldt/typed.js: A JavaScript Typing Animation Library A JavaScript Typing Animation Library. Contribute to mattboldt/typed.js development by creating an account on GitHub. github.com let typetext = new Typed('#text', { strings: ['First sentence.', '& a second sentence.', 'hohoho'], typeSpeed: 100, backSpeed: 50, backDelay: 1000, loop: true, }); 2023. 3. 19.
Parallax plugin https://github.com/wagerfield/parallax GitHub - wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device Parallax Engine that reacts to the orientation of a smart device - GitHub - wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device github.com 사용법 css #scene .layer { position: absolute; top:0; left:0; width: 100%; height: 100vh;} #sc.. 2023. 3. 14.
클릭이벤트 플러그인 hammer.js https://hammerjs.github.io/ Hammer.JS - Hammer.js hammerjs.github.io $(element).hammer(options).bind("pan", myPanHandler); var hammertime = new Hammer(myElement, myOptions); hammertime.on('pan', function(ev) { console.log(ev); }); hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL }); 2023. 3. 7.
Email Services - EmailJS https://www.emailjs.com/docs/ Documentation | EmailJS Well organized and easy to understand documentation with examples! www.emailjs.com 2023. 3. 7.
Scroll Plugin, AOS http://michalsnik.github.io/aos/ AOS - Animate on scroll libraryAOS Animate On Scroll Library Scroll downmichalsnik.github.io 사용법 커스텀[data-aos="new-animation"] { opacity: 0; transition-property: transform, opacity; &.aos-animate { opacity: 1; } @media screen and (min-width: 768px) { transform: translateX(100px); &.aos-animate { transform: tr.. 2023. 3. 7.
VS Code 단축키 모음 기본 설치 플러그인 단축키 ctrl+Enter아래에 행 삽입ctrl+shift+Enter위에 행 삽입alt+Down행을 아래로 이동alt+Up행을 위로 이동 Ctrl + Shift + k행 삭제shift+alt+f css 한줄로 (CSS-compact)Ctrl + K, Ctrl + F 차례대로들여쓰기 재정렬 기본 설치 플러그인 auto close tagauto rename taghtml snippetslive serverautoprefixercss-compact git graph html css support html boilerplate live sass compiler postcss sorting prettier.. 2023. 2. 20.
Figma 간단 사용법 정리 단축키 Frame F Auto layout Sht + A 캔버스화면 전체 Sht + 1 이름수정 Ctl + R 라이브러리 창 Alt + 3 프레임내 순서수정 프레임선택 + 방향키 image place Ctl + Sht + K 텍스트 속성빼고 복붙 Ctl + Sht + V 컴포넌트 Ctl + Alt + K 컴포넌트 위젯창 Sht + I 버전기록 Ctl + Alt + S 플러그인 https://www.figma.com/community/file/984106517828363349 https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols https://www.figma.com/community/file/10142415588984182.. 2023. 2. 12.
chatGPT 에게 bxslide 이용해서 코딩 해달랬더니 챗지피티 에게 bxslide 플러그인 이용해서 이미지 돌아가는 갤러리 페이지 코딩 해달랬더니 아래처럼 코드를 짜주었다. https://chat.openai.com/ 그러자 정말 3개씩 보이고 캐러샐로 돌아가며, 모바일에선 2개씩 보이는 반응형 갤러리가 만들어졌음. 2023. 2. 10.
github 초간단 사용법 깃허브, 좋긴 하지만 혼자선 잘 안쓴다. 그런데 협업할때는 어쩔 수 없이 써야 된다. 그럴 때를 대비한 간단 사용법이다. 깃설치 : https://git-scm.com/downloads 1. 내 컴퓨터에 git 처음 세팅할 경우 폴더 하나 만들어서 Shift + 우클릭 -> PowerShell 창열기 클릭 아래처럼 깃허브 이메일과 이름을 넣어준다. git config --global user.email "aaa@gmail.com" git config --global user.name "aaaname" VSCode에서 git graph 설치하면 편하다. 이제 원하는 폴더에서 git init 쓰고 사용하면 된다. git init => git 감시 시작 git add aa.html => 이 파일 기록 git .. 2023. 2. 4.

티스토리툴바