Atelier BiCute

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 파일에 기본 설정 경로가 아래와 같이 되어있기 때문에 내부 파일만 같은 폴더로 옴기시면..

자잘한 수정은 계속해서 있었지만 이번에 크게 눈에 띄진 않지만 소소게 많은 기능들에 수정이 있었습니다. 댓글창 관련 최신 댓글이 먼저 보이도록 정렬 댓글의 댓글은 가장먼저 달린(오래된) 댓글이 먼저 보이도록 지정 프로필 사진과 글 간격 재조정 댓글간의 간격과 수정 버튿들 위치 재조정 다크모드 다크모드 스위치 아이콘을 해와 달로 변경 자동 목차 목차로 사용할 내용이 없을경우 자동 목차 박스가 나타나지 않도록 변경 목차 박스 내부의 컨텐츠 높이 재조정 1단 서랍 사이드바의 간격 재조정 1단 서랍 사이드바 레이아웃 관련 전체적인 조정 기존에는 2단 우측 사이드를 우선 고려하여 설정하였었지만, 이제는 1단 서랍 사이드바 형식에서도 모두 문제없이 사용할 수 있도록 수정하였습니다. ※ 기존 스킨 사용자분들께서는 최..

글을 시작하기에 앞서... 개인 프로젝트들을 진행하면서 Github의 저장소에 작업물을 올리다보면 매번 반복적으로 나오는 패턴이 있습니다. (1) git add . (2) git commit -m "커밋할 내용" (3) git push origin master 혼자서 작업할때는 이정도로도 충분하기도 하지만, 이래저레 웹서핑을 하다보면 커밋을 하는 방법에 관한 글들을 많이 볼 수 있습니다. 수많은 사이트들이 대부분 동일한 내용의 글들을 작성하고 있는데 대략적인 내용은 다음과 같습니다. - 커밋의 기본 형식은 타입(제목) / 본문 / 꼬리말 3개로 나뉜다. - 제목과 본문, 꼬리말은 중간에 빈줄을 넣어 구분한다. - 제목은 50자 이내로, 본문은 72자마다 줄바꿈을 한다 등 - 제목의 첫글자는 대문자로, ..

헤로쿠(heroku)를 사용하다보면 매우 쉽게 만날 수 있는 H10 App Crashed의 다양한 오류 해결 방법 중 2가지에 관한 내용을 정리해 봅니다. #1 오류 메시지 확인 분명 local에서는 잘 작동하던 것들도 heroku에 업로드하면 위와 같이 어플리케이션 에러를 쉽게 만날 수 있는데, 위에서 알려주는 다음 명령어인 "heroku logs --tail"을 작업중인 터미널에서 입력하여 원인을 찾아봅니다. 날짜 어쩌구 저쩌구 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=sws-wiki.herokuapp.com request_id=4a1aba64-a4c0-4a1e-8bb4-231d3cc51bbb fwd="..

몇가지 간단한 코드만 입력해도 자동으로 완성해주는 플러그인 기능인 에밋(emmit)은 VS Code에서 추가적인 설정을 하지 않아도 자동으로 지원하고 있습니다. 이 글은 딱히 뭔가를 건든적이 없는거 같은데... 갑자기 에밋 기능이 작동하지 않을때 확인해 볼 수 있는 방법 중 하나입니다. #1. 설정으로 이동 VS Code에서 톱니모양 아이콘을 눌러 설정으로 이동합니다. 단축키 ctrl + , (맥은 command + ,) #2. Emmet: Trigger Expansion On Tab 검색창에 emmit을 입력하고 스크롤을 내려 Emmet: Trigger Expansion On Tab이라는 체크박스를 확인해 봅니다. 체크가 해제되어 있다면 체크를 해주게 되면 Emmit 기능이 활성화 됩니다.

글자가 랜덤으로 섞이면서 나타나는 텍스트 셔플 효과 라이브러리 입니다. 일반 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를 눌러 인스타 그램 ..

node.js를 이용하여 만든 개인 프로젝트를 웹상에 올리기위해서 heroku를 이용하는 방법에 대한 글을 남겨본다. *기본적인 사용법은 Github에 파일 올리는것과 거의 동일하다. #1 회원가입과 로그인 (1) 당연하게도 서비스를 이용하기 위해선 우선 www.heroku.com에 접속한 후 회원가입을 해야한다. (2) 로그인을 한 후, Create new app을 눌러 새로운 프로젝트를 생성한다. *Github에서 새로운 Repositories를 만드는것과 같다 App name은 소문자,숫자, 하이픈(-)만 사용 가능하며 언더바(_)같은건 사용할 수 없다. #2 업로드 하기 전 확인할 사항 몇가지 (1) nodemon을 사용하고 있다면... package.json을 확인하여 node로 변경해준다. ..