F12 > Experiments 탭 - overview
또는 설정 옆 점 3개 - more tools - css overview
— 홈페이지에 사용된 컬러, 폰트 등 간편하게 확인 가능
— CSS 그림자나 폰트, 플렉스, 그리드 미리 적용해보기 가능
— Unused declarations 이용해서 css 정리하기 유용
그림자
- Google search : Box shadow css generator
→ 여러가지 그림자 효과 살펴볼 수 있음
F12 > 적용하고 싶은 요소 클릭 > element.style에 box/text-shadow 작성
작은 네모 아이콘 클릭하면 수정하면서 확인 가능 !
폰트
F12 > Experiments 탭 - enable new font editor
폰트 적용된 요소 오른쪽 하단 Aa 클릭
Flex / Grid (editor)
display : flex/grid 옆 작은 아이콘 클릭
-출처 드림코딩