웹페이지를 이미지로 저장하기는 여러 방법이 있겠으나, 

크롬의 개발자 도구를사용하는 방법이 제일 깔끔하다.  

(MS 엣지 브라우저도 동일한 방법으로 캡쳐가가능하다.)



1️⃣ 제일 쉬운 방법은

    Win+Shift+S를 누르고 필요한 영역을 선택해서 스크린 샷을 저장하는 방법이다. 


2️⃣ 모니터 화면을 넘어가는 길이라면 난감하다. 

     이럴때 개발자 도구로 캡쳐하는 방법을 사용한다.

  

3️⃣ F12를 눌러서 개발자 도구를 연다. 

     (Ctrl+Shift+C를 누르거나, 마우스 오른쪽 버튼을 누르고 메뉴에서 "검사"를 선택해도 된다.)


4️⃣개발자 도구 오른쪽상단의 설정 아이콘 옆에 있는점 세개 아이콘(:)을 클릭하고   

    명령어 실행을 선택한다. 나중에 익숙해지면 단축키 Ctrl+Shift+P를 누르는게 편하다.

    메뉴 표시 언어가 한글이면 "스크린샷"을 입력하고, 영어면 screenshot을입력한다.

    페이지 전체를 스크린샷으로 저장하는 것도 있고, 필요한 영역만 선택해서 저장해주는 것도 있다. 골라 쓰자. 


    노드 스크린샷 캡처 → 특정 노드만 선택해서 캡처

    스크린샷 캡처 → 현재 화면에 보이는 부분만 캡처 

    영역 스크린샷 캡처 → 선택한 영역만 캡처

    원본 크기 스크린샷 캡처 → 전체 웹페이지 캡처 




5️⃣ 아주 세밀하게 필요한 요소만캡쳐하고 싶다면, 개발자 도구 창에서 "Elements" 탭을 선택한다.

     왼쪽 위 모서리 쪽에 네모난 모양을화살표로 푹 찌른 아이콘을 클릭하고,

     웹페이지의 캡쳐할 부분에 가져가 본다.

     html 요소에서 마우스 오른쪽 버튼을 클릭하고 메뉴에서 "Capture node Screenshot"을 선택한다.

     선택한 html 태그에 해당하는 부분만 이미지로 저장해준다. 

     → 다운로드 폴더에 png로 저장해준다. 파일 이름은이따위로 저장해준다.         www.price.go.kr_tprice_portal_board_boardInfoDetail.do_topMenuId=MP050000&menuId=MP050001&boardTypeCode=010703000&actionType=read&boardSeq=37413.png


     <table> 태그를 선택했다면 표만 png로 저장해주고, <tr>태그를 선택했다면 해당 표 라인만이미지로 저장해준다.

     <body> 태그를 선택했다면 웹페이지 전체를 이미지로 저장해준다.    



⏹️ 아래 사이트에서 실습해보자. 

     생필품 가격 보고서를 고시하는 정부 공식 웹페이지다. 

     https://www.price.go.kr/tprice/portal/board/boardInfoDetail.do?topMenuId=MP050000&menuId=MP050001&boardTypeCode=010703000&actionType=read&boardSeq=37413#




이 게시물을...
profile