개발자 도구에서 간단하게 화면을 캡처하는 방법입니다. 업무 또는, 개발을 하다 보면 웹 사이트의 화면을 캡쳐해야 할 때가 있습니다. 별도의 프로그램이나 크롬 확장 프로그램(Go fullpage) 등을 사용해도 되지만 개발자 도구에서 별도의 프로그램 설치 없이도 간단하게 화면을 캡쳐할 수 있습니다.
윈도우를 사용 중이라면 F12나 Ctrl + Shift + I, 맥OS를 사용한다면 Command + Option + I를 눌러 개발자 도구를 열 수 있습니다. 개발자 도구에서 Ctrl + Shift + P(윈도우), Command + Shift + P(맥)를 누르면 위의 사진처럼 개발자 도구에서 기능을 검색할 수 있습니다.
Screenshot을 검색하면 크롬에서 사용할 수 있는 4가지 스크린 샷 방식을 확인할 수 있습니다. 각 방식은 아래와 같습니다.
Capture area screenshot : 마우스로 드래그한 영역을 스크린샷으로 저장할 수 있습니다.
Capture full size screenshot : 현재 페이지의 모든 영역을 캡쳐합니다.
Capture node screenshot : 개발자 도구의 element에서 선택되어 있는 영역을 캡쳐할 수 있습니다.
Capture screenshot : 현재 화면에 보여지는 영역(뷰포트)을 캡쳐할 수 있습니다.
요약
1. 개발자도구 (F12, Ctrl + sihft + I) 연 후 Ctrl + Shift + P
2. 검색어 입력창에 'screenshot' 입력
3. 4가지 항목 중 필요한 기능을 사용해 화면을 캡쳐
Capture area screenshot : 마우스로 드래그한 영역이 저장됨
Capture full size screenshot : 페이지의 전체 영역이 저장됨
Capture node screenshot : element에서 선택되어 있는 영역이 저장됨
Capture screenshot : 현재 화면에 보여지는 영역이 저장됨
댓글