F12
-
디자이너도 쓰는 크롬 개발자도구 — CSS 확인부터 모바일 미리보기까지툴 & 환경설정 2026. 4. 30. 08:30
크롬 개발자도구는 개발자만 쓰는 툴이 아니다. 디자이너 입장에서도 꽤 유용하게 쓸 수 있는 기능들이 있다. 처음엔 복잡해 보여서 손도 안 댔는데, 막상 쓰다 보니 디자인 작업할 때 없으면 불편할 정도가 됐다.단축키 F12 또는 Ctrl + Shift + I로 열 수 있다. 맥은 Cmd + Option + I다.요소 선택해서 CSS 값 확인하기레퍼런스 사이트나 작업 중인 페이지에서 특정 요소의 폰트 크기, 색상, 여백을 확인하고 싶을 때 가장 많이 쓰는 기능이다. 왼쪽 상단 화살표 아이콘(요소 선택 도구)을 클릭하고 확인하고 싶은 요소를 클릭하면 오른쪽 패널에 적용된 CSS 값이 쭉 나온다.1F12로 개발자도구 열기2왼쪽 상단 화살표 아이콘 클릭 (또는 Ctrl + Shift + C)3확인하고 싶은 요소 ..