티스토리를 포함한 웹사이트 제작, 수정, 꾸미기에 도움이 되는 유용한 사이트

더 다양한 사이트들이 있지만 제가 알고 있는 곳, 제가 사용하는 곳 위주로 정리하였습니다.

---

웹폰트

URL	특징
https://fonts.google.com/	전세계 무료 폰트
https://noonnu.cc/	한글 무료 폰트

 

아이콘 폰트 = 폰트 아이콘

URL	특징
https://fontawesome.com/	폰트 어썸 가장 유명하고 지원하는 아이콘이 많음
https://fontawesome.com/v4/	위 사이트의 구버전
https://themify.me/themify-icons
https://fonts.google.com/icons	구글 머티리얼
http://xpressengine.github.io/XEIcon/index.html	구 제로보드 현 XE에서 제공
https://iconscout.com/unicons
https://www.s-ings.com/typicons/
https://icomoon.io/	자체 웹폰트도 있고 다른 웹폰트 중 필요한 것만 모아서 나만의 웹폰트 파일을 만들 수 있음 (App)

 

커서, 파비콘, 스크립트 등 꾸미기

URL	특징
https://www.cursors-4u.com/	마우스 커서
https://www.favicon.cc/	파비콘
https://www.convertico.com/favicon/	파비콘 만들기
http://www.mf2fm.com/rv/	자바스크립트를 이용한 마우스, 텍스트 등 꾸미는 용도
https://themediary.tumblr.com/	각종 귀여운 효과
http://ashprincesskawaii.blogspot.com/	상동

 

색상

URL	특징
https://htmlcolorcodes.com/	컬러 픽커 및 색상에 관한 각종 정보
https://color.adobe.com/ko/create/color-wheel https://color.adobe.com/ko/create/image	어도비 이미지에서 색상 추출
https://mycolor.space/ https://mycolor.space/gradient https://mycolor.space/gradient3	색상 하나 지정하면 어울리는 색상을 여러개 추천해줌(팔레트) 그라데이션(그라디언트)
https://www.colorhunt.co/	컬러 팔레트
https://www.webdesignrankings.com/resources/lolcolors/	상동
https://cssgradient.io/	그라데이션(그라디언트)
https://csshero.org/mesher/	그라데이션(그라디언트)
https://www.color-morph.com/	그라데이션(그라디언트)
https://uigradients.com/	그라데이션(그라디언트)

 

HTML, CSS, Java Script 연습 또는 테스트

URL	특징
https://jsfiddle.net/	태그 생성 시 자동으로 닫아줌, 코드 정리, 오류 알려줌
https://jsbin.com/	emmet 사용 가능
https://codepen.io/	여러 사람이 올려 놓은 작업물을 무료로 보고 참고할 수 있으며 테스트도 가능함 자료가 방대함

 

레퍼런스, 참고 자료 등

URL	특징
https://codepen.io/	여러 사람이 올려 놓은 작업물을 무료로 보고 참고할 수 있으며 테스트도 가능함 자료가 방대함
https://freefrontend.com/	여러 사이트에 올라온 자료를 카테고리 별로 정리해 둠
https://www.pinterest.co.kr/
https://dribbble.com/	포트폴리오
https://www.behance.net/	포트폴리오 - 어도비

 

이미지, 동영상 관련

URL	특징
https://www.freepik.com/	유무료 이미지 / 아이콘 / 폰트 / 일러스트 등
https://unsplash.com/ko	유 무료 이미지
https://pixabay.com/ko/	무료 이미지
https://www.pexels.com/ko-kr/	무료 이미지
https://www.flickr.com/	무료 이미지
https://www.splitshire.com/	무료 이미지 / 동영상
https://giphy.com/	GIF 짤

 

각종 변환

URL	특징
https://convertio.co/kr/	온갖거 다 변환함
https://www.adobe.com/express/feature	아래쪽에 보면 몇가지 이미지 변환을 제공함 무료 템플릿, 이미지 꾸미기도 있음 - 어도비
https://png2svg.com/	PNG 에서 SVG로 전환 ( 전환 사이트가 여러개 있으나 마음에 드는 결과물이 나오지 않을 때 여러 곳을 사용함 )
https://www.pngtosvg.com/	상동
https://pixelied.com/convert/png-converter/png-to-svg	상동
https://www.freeconvert.com/png-to-svg	상동
http://pxtoem.com/	px 단위를 em 으로 변환

 

라이브러리 또는 플러그인

URL	특징
https://bansal.io/pattern-css	CSS 패턴(background)
https://animate.style/	CSS 애니메이션
https://ianlunn.github.io/Hover/	CSS Hover
https://imagehover.io/	CSS 이미지 hover
https://elrumordelaluz.github.io/csshake/	CSS 흔틀리는 애니메이션
https://projects.verou.me/bubbly/	CSS 말풍선 만들기
https://www.ilikepixels.co.uk/bubbler/	상동
https://www.jqueryscript.net/	Jquery로 제작된 플러그인을 모아둔 사이트
https://vanillalist.top/	순수 자바스크립트로 제작된 플러그인을 모아둔 사이트
https://meyerweb.com/eric/tools/css/reset/	브라우저 기본 스타일 설정을 초기화
https://necolas.github.io/normalize.css/	상동
https://elad2412.github.io/the-new-css-reset/	상동
https://nostalgic-css.github.io/NES.css/	8bit

 

기초부터 개발자까지

URL	특징
https://developer.mozilla.org/en-US/	웹 표준과 모질라 프로젝트에 대한 개발 문서들이 담긴 모질라의 공식 웹사이트 html, css, java script 등 각종 레퍼런스와 설명, 예제, 어떤 브라우저의 버전이 몇 부터 지원되는 지 등 각종 정보
https://www.w3schools.com/	온라인으로 웹 기술을 배우는 교육용 웹 사이트
https://www.opentutorials.org/	웹 개발 = 프론트엔드 개발자 = html부터 하나씩 배우기 좋은 사이트 한국어!!!!! 한국 사람!!!!
https://caniuse.com/	지원 브라우저 및 버전 확인, 새롭게 적용이 가능한 기능도 알려준다
https://regex101.com/	정규식 테스트
https://github.com/	개발자의 자료가 다 모여있는 사이트, 개발자 커뮤니티
https://stackoverflow.com/	개발자 커뮤니티, 주로 질의 응답

 

기타

URL	특징
https://www.lipsum.com/	입숨(아무 의미 없는 글)
http://hangul.thefron.me/	한글 입숨 (아무 의미 없는 글)
https://hanipsum.com/	상동