HTML/CSS 유용한 사이트 / 크롬 확장도구 모음

사이트 이름	용도	사이트 주소
mdn	웹 개발 메뉴얼	https://developer.mozilla.org/ko/
validator.w3.org	HTML 문법 검증기	https://validator.w3.org/#validate_by_input
css-tricks	CSS 가이드	https://css-tricks.com/guides/
material.io	CSS 색상 고르기	https://material.io/resources/color/#!/?view.left=0&view.right=0
herocoin	CSS SVG Icon 이미지 (Free)	https://heroicons.com/
fontawesome	CSS Icon 이미지 (Free)	https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free
google font	Font (Free)	https://fonts.google.com/
animista.net	CSS Animation 참고용	https://animista.net/
flukeout	CSS Selector 연습용 게임	https://flukeout.github.io/
codepip (flexboxfroggy)	CSS Flexbox 연습용 게임	https://flexboxfroggy.com/#ko
codepip (grid-garden)	CSS Grid 연습용 게임	https://codepip.com/games/grid-garden/
caniuse	브라우저 버전별 HTML/CSS 기능 사용가능 여부 확인	https://caniuse.com/

 

 

확장도구 이름	용도	확장도구 주소
page ruler redux	웹페이지의 pixel 크기 측정	https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal/related?hl=ko
color zilla	웹페이지의 색깔 알아내기 (color pick)	https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp/related?hl=ko