개발자 도구 여는 방법
- 크롬에서 우클릭 - 검사 를 선택
- 오른쪽 상단 ••• - 도구더보기 - 개발자 도구
- 윈도우 = ctrl + shift + i
맥os = option + command + i
화면 캡쳐
- Elements 좌측에 디바이스모양 아이콘 선택
- 여러 디바이스에서 적용된 현재 페이지 모습을 볼 수 있다.
- ••• 를 클릭하면 캡쳐할 수 있다.
요소에 적용된 스타일 빠르게 보기
- Elements 좌측에 커서모양 아이콘을 클릭하고 웹페이지에 마우스를 갖다대면 적용된 스타일을 빠르게 확인할 수 있다.
적용된 서체 정확하게 확인하기
- 확인할 영역을 선택하고 Computed를 선택한다. 맨 밑까지 쭈욱~ 내리면 Rendered Fonts를 확인할 수 있다. 폰트를 설정했을 때 적용이 된것을 정확히 확인할 수 있다.
가상선택자 상태 확인하기
- 개발자 도구에서 Styles - Filter 입력란 우측에 :hov를 클릭하면 가상 선택자가 적용됐을 때 모습과 요소 크기를 알 수 있다.
좀 더 멋지게 작성하고 싶었는데...