Atelier BiCute

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

글을 시작하기에 앞서... 개인 프로젝트들을 진행하면서 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로 변경해준다. ..

구글맵을 이용해 특정 지점을 검색하면 주소창의 가장 뒤쪽에 d35.8538161!4d128.5918331 같은 형식으로 나타나는 것을 이용해 위도와 경도를 확인할수도 있지만, 설정을 조금만 바꿔주면 매우 편리하게 확인할 수 있는 방법이 있습니다. 설정방법 (1) 구글맵 오른쪽 아래에 있는 설정되어 지역(대한민국)을 클릭합니다. (2) 지역 설정을 대한민국이 아닌 해외로 설정합니다. *여기서는 일단 가나로 설정하였습니다 설정은 여기까지만 하면 끝입니다. 위도, 경도 확인 방법 (1) 지도의 원하는 위치를 클릭하게되면 좌표가 찍히면서 아래쪽에 위도와 경도가 나타납니다. (2) 마우스 오른쪽 버튼을 클릭할 경우 메뉴에 바로 좌표가 나타나며, 해당 좌표를 클릭하면 내용이 클립보드에 복사가 되어 다른곳에 바로 붙..

#1 console.log에 스타일 적용하는 방법 스타일을 주고싶은 위치에 %c라는 코드를 입력해줍니다. 그런 다음문자 끝에 쉼표(,)를 찍어주며 스타일을 지정해주면 되는데 스타일을 주고싶은 위치의 개수(%c)만큼 ,를 이용해 순서대로 각각의 스타일을 지정해주면 됩니다. 사용 방식은 일반 CSS의 코드 작성과 동일합니다. #2 console.log에 스타일 해제하는 방법 스타일을 해제하거나 공백이 필요하다면 ""로 스타일을 제거해 주는것도 방법입니다. #3 console.log에 복수의 스타일 적용하는 방법 스타일은 당연히 문자에 관한것 뿐만 아니라 패딩, 백그라운드 등 다양한 것들이 가능합니다. 또한 하나의 스타일 뿐만이 아니라 복수의 스타일도 줄 수 있는데, 이것 또한 CSS를 작성하듯이 하나의 스타..