프론트앤드 개발시 유용한 사이트 모음

프론트앤드 웹스킬 한방에 정리한 사이트

• Web Skills
• 

HTML레이아웃 & CSS

• https://aperitif.io/builder/?
• https://csslayout.io/patterns/ : css 템플릿
• http://nthmaster.com/ : css선택자
• http://flukeout.github.io/ : css선택자를 이용한 게임(움직이는 사물의 선택자이름을 작성하면 통과됨)
• w3school CSS 효과 소스(힌트)얻기 : 웹에서 볼 수 있는 다양한 예시들 소스(슬라이드쇼,아코디언,모달,…)
• w3school 속성별 예시 소스
• w3school 개별요소에 w3c에서 만든 CSS를 그대로 적용하기
• colorzilla : 그라데이션
• css3generator
• 추천색상팔레트(이미지에서 색상 추출가능)

CSS 라이브러리

• https://tailwindcss.com
• https://bulma.io

부트스트랩 무료탬플릿 페이지

부트스트랩과 foundation을 사용하면 웹사이트가 다 비슷비슷해보이기 때문에 추천하지 않는다.
CSS라이브러리를 통해 나만의 사이트를 만들어보자.

• https://themehunt.com/
• https://startbootstrap.com/ㄴ
• https://onepagelove.com/templates/portfolio-templates
• w3school Template (바로 적용해서 확인가능)
• Free 부트스트랩 탬플릿1
• Free 부트스트랩 탬플릿2
• Free 부트스트랩 탬플릿3
• Free 부트스트랩 탬플릿4
• 홈페이지 템플릿 무료사이트

홈페이지 레퍼런스

• 우수 사이트 모음
• 이미지맵 소스 생성기

UI설계도구

UI목업툴	UI디자인툴
카카오 오븐: 프로토타이핑툴, QR코드 또는 URL로 공유가능	Figma 피그마 🌟 : 그래픽편집기, 프로토타이핑툴, 브라우저기반으로 실시간 협업가능
파워목업 : 파워포인트에 플러그인으로 목업 기능을 사용 가능	Sketch 스케치+Zeplin 제플린: 스케치는 맥 os기반 그래픽편집기, 프로토타이핑툴이기때문에 협업을 위해 제플린으로 파일공유해야하는 불편함있음

• 참고 : UI 디자이너 툴 총정리
• 참고 : Sketch에서 Figma로 환승 후기

서체 사이트

• 구글웹폰트
• naver : 한글서체 많음
• https://www.dafont.com/
• https://www.1001fonts.com

이미지 무료사이트

• https://pexels.com
• https://morguefile.com
• https://pixabay.com
• https://unsplash.com 🌟

호스팅 및 배포 사이트

정적사이트 배포

• https://pages.github.com/
• GitHub와 Netlify를 이용한 쉽고 빠른 HTTPS 무료 호스팅 : https://www.netlify.com/

추가

• 도움이 되는 영상 : 웹 서비스 구현의 모든 것! 무료 제작툴 39개 몽땅 알려드림! by 노마드코더