웹 개발 시 유용한 웹 도구 모음
HTML
HTML/CSS, JavaScript 연습 공간
codepen.io
HTML Documents가 잘 정리된 공간
devdocs.io
오래된 웹 사이트들을 가지고 연습하기
web.archive.org
사진을 동그랗게 CROP하고 싶다면
crop-circle.imageonline.co
Lorem Ipsum
Lorem Ipsum – Generator, Origins and Meaning
Lorem space (Lorem Ipsum 이미지 버전)
Icon 찾기
https://www.flaticon.com/ Font Awesome
HTML Save
HTML Save : Host HTML WebPage online
CSS
CSS 연습 게임
https://flukeout.github.io/
테마로 사용할 칼라 찾기
Color Palettes for Designers and Artists - Color Hunt
pesticide - element 구분하여 보기(크롬 확장프로그램)
사용자의 PC에 많이 설치되어있는 Font 알아보기(Web Safe Font)
CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.
버튼 디자인
CSS Button Creator - Imageless CSS Button Creator
Node.js
nodemon : 코드에서 바뀐 부분 모니터링하고, 바로 서버에 반영해줌
npm install -g nodemon
Error 발생 시 권한 요청 때문일 수 있음, sudo 사용 권장
실행문
nodemon server.js
Bootstrap
Bootstrap element : Bootsnipp
Home of free code snippets for Bootstrap
UI/UX
UI/UX Challenge
dailui.co
Canva (미리캔버스랑 비슷함)
canva.com
- Canva 에서 웹 디자인을 하고, 곧바로 WebSite에서 보는 것처럼 Preview해볼 수 있음
UI references
- ui-patterns.com
- https://dribbble.com/
빠른 Mock-Up
Balsamiq. Rapid, Effective and Fun Wireframing Software | Balsamiq
Mobile Friendly Test
https://search.google.com/test/mobile-friendly
이미지로부터 색상 추천
Design Seeds | for all who ♥ color | inspiration & color palettes
보색찾기 : 어도비 칼라
https://color.adobe.com/ko/create/color-wheel
ETC
키보드 타이핑 연습
keybr.com
Frontend Mentor - Challenge
흐름도(Flowchart) 그리기
www.draw.io
Stanford KAREL - 타일에서 로봇 움직이는 프로그램 만들기
JSON Viewr Pro : Chrome Extension
JSON Viewer Pro - Chrome 웹 스토어
POSTMAN
Download Postman | Get Started for Free
PlaceHolder Generator
https://via.placeholder.com/350x350
via.placeholder.com/가로x세로 (px단위)
