프론트앤드 개발시 유용한 사이트 모음
💡 핵심 요약 (TL;DR)
프론트앤드 개발시 유용한 사이트 모음의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. * : css선택자를 이용한 게임(움직이는 사물의 선택자이름을 작성하면 통과됨)을 적용할 수 있다.
프론트앤드 웹스킬 한방에 정리한 사이트
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 라이브러리
부트스트랩 무료탬플릿 페이지
부트스트랩과 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기반 그래픽편집기, 프로토타이핑툴이기때문에 협업을 위해 제플린으로 파일공유해야하는 불편함있음 |
서체 사이트
이미지 무료사이트
호스팅 및 배포 사이트
정적사이트 배포
추가
- 도움이 되는 영상 : 웹 서비스 구현의 모든 것! 무료 제작툴 39개 몽땅 알려드림! by 노마드코더
프론트앤드 개발시 유용한 사이트 모음
https://sowon-dev.github.io/2020/07/14/freeToolListForFront/