유용한 크롬 개발자 도구

개발자 도구 여는 방법

1. 크롬에서 우클릭 - 검사 를 선택
2. 오른쪽 상단 ••• - 도구더보기 - 개발자 도구
3. 윈도우 = ctrl + shift + i
   맥os = option + command + i

화면 캡쳐

1. Elements 좌측에 디바이스모양 아이콘 선택
2. 여러 디바이스에서 적용된 현재 페이지 모습을 볼 수 있다.
3. ••• 를 클릭하면 캡쳐할 수 있다.

요소에 적용된 스타일 빠르게 보기

• Elements 좌측에 커서모양 아이콘을 클릭하고 웹페이지에 마우스를 갖다대면 적용된 스타일을 빠르게 확인할 수 있다.

적용된 서체 정확하게 확인하기

• 확인할 영역을 선택하고 Computed를 선택한다. 맨 밑까지 쭈욱~ 내리면 Rendered Fonts를 확인할 수 있다. 폰트를 설정했을 때 적용이 된것을 정확히 확인할 수 있다.

가상선택자 상태 확인하기

• 개발자 도구에서 Styles - Filter 입력란 우측에 :hov를 클릭하면 가상 선택자가 적용됐을 때 모습과 요소 크기를 알 수 있다.

좀 더 멋지게 작성하고 싶었는데...