[윈도우10 Windows10] 크롬(Chrome)에서 웹페이지 항목 HTML에서 확인하기

[윈도우10 Windows10] 크롬(Chrome)에서 웹페이지 항목 HTML에서 확인하기

[윈도우10 Windows10] 크롬(Chrome)에서 웹페이지 항목 HTML에서 확인하기

이전 포스팅에서는 개발자 도구를 통해서 HTML에 부분이 웹페이지에 어떤 부분을 표시하는 지에 대해서 확인한 적이 있습니다. 하지만, 실제 크롤링등의 작업을 할 경우에는 이와 반대로, 실제 웹페이지에서 각 부분들이 웹의 어떤 부분들을 참고하고 있는지에 대해서 확인이 필요로 하는 경우가 더욱 많습니다. 그래서 이번 포스팅에서는 웹페이지의 항목이 개발자 도구 내의 HTML의 어떤 부분을 가리키는 지에 대해서 확인하는 포스팅을 해보도록 하겠습니다. 

 

이번 포스팅은 기본적으로 크롬(Chrome)을 바탕으로 진행합니다. 만약 크롬(Chrome)이 설치되지 않으신 분들은 다음 링크를 참조하여 크롬(Chrome)브라우저를 설치하시길 바랍니다. 

[윈도우10 Windows10] 브라우저 크롬(Chrome) (온라인)설치하기&다운로드 받기(오프라인 다운로드 설치)

[윈도우10 Windows10] 브라우저 크롬(Chrome) (온라인)설치하기&다운로드 받기(오프라인 다운로드 설치

그리고, 추가적으로 다음의 링크에 있는 개발자 도구를 실행하는 방법에 대해서 필요로 합니다. 해당 부분에 대해서는 다음 포스팅을 통해서 참고하시길 바랍니다. 

[윈도우10 Windows10]크롬(Chrome)에서 개발자 도구 실행하기

[윈도우10 Windows10]크롬(Chrome)에서 개발자 도구 실행하기

그럼 개발자 도구가 실행되었따는 전제로, 개발자 도구 가장 상단 좌측에 네모에 화살표 표시가 되어 있는 아이콘이 있습니다. 이 부분을 클릭하여 주시길 바랍니다. 

웹페이지 개발자 도구 실행화면 

그러고 나서, 실제 웹페이지 부분을 확인하고자 하는 부분에 대해서 마우스 클릭을 눌려 주실 것입니다. 

[윈도우10 Windows10]크롬(Chrome)에서 개발자 도구에서 웹페이지 객체가 HTML 항목 선택하는 부분의 아이콘

그럼 저의 경우, 다음 보이는 항목을 클릭을 해보도록 하겠습니다. 실제 한번 클릭할 경우, 웹페이지로 이동하지 않고 해당 부분의 HTML에 선택 표시가 나타납니다. 

확인하고자 하는 항목의 Element  확인 

위와 같은 부분으로 각 부분의 해당 부분의 HTML을 확인할 수 있습니다. 그럼 여기에서, 추가로 관련된 부분만 HTML을 추출해보도록 하겠습니다. 우측 화면에서 선택된 부분에서 마우스 오른쪽 버튼을 클릭하도록 하겠습니다. 그런 후에 [Copy]를 선택하시고, [Copy Element]부분을 클릭하여 주시길 바랍니다. 

해당 부분에 대한 HTML 복사 

그런 후에 메모장 및 노트패드등을 통해서 붙여넣기 하시면 다음과 같이 해당하는 부분에 대한 HTML 부분을 추출할 수 있습니다. 

해당 부분에 대한 HTML 추출 결과 

이와 같은 방법으로 웹페이지 해당 부분에 대해서 HTML로 확인 및 추출할 수 있습니다. 

[윈도우10, windows10] 노트패드(NotePad++) 설치 하기

[윈도우10, windows10] 노트패드(NotePad++) 설치 하기

이번 포스팅에서는 [윈도우10 Windows10] 크롬(Chrome)에서 웹페이지 항목 HTML에서 확인하기라는 주제로 간단히 포스팅을 해봤습니다. 실제 이 부분을 크롤링을 할 경우에 매우 많이 사용이 됩니다. 혹 궁금하신 점이나 문의 사항이 있으시면 언제든지 댓글 및 방명록에 글 남겨주시길 바랍니다.