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

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

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

웹크롤링을 하다보면,  HTML과 CSS에 대해서 약간의 지식이 필요합니다. 그 부분을 바탕으로 필요한 부분을 크롤링 하기 위해서입니다. 하지만, 모든 사람들은 HTML과 CSS의 전 영역에 대해서 알기 힘듭니다. 그래서 이번 포스팅에서는 CSS에서 Selector로 사용하기 위한 부분을 확인하는 방법에 대해서 살펴보겠습니다. 

 

이번 포스팅은 기본적으로 크롬(Chrome)브라우저를 사용하고 있습니다. 따라서, 크롬 브라우저를 기반으로 사용하고 있습니다. 혹, 크롬(Chrome)브라우저가 없는 분들은 다음 링크를 이용하여 크롬(Chrome)브라우저를 설치해주시길 바랍니다. 

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

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

먼저, 이 부분을 활용하기 위해서는 크롬(Chrome)브라우저에서 개발자 도구를 활성화 시켜야 합니다. 대부분 [F12]키를 이용하여 확인이 가능합니다. 

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

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

개발자 도구를 실행하셔서, CSS Selector로 사용하고자 하는 부분을 선택해주시길 바랍니다. 그럴 경우, 화면 좌측에서 HTML에 대한 부분이 표시가 될 것입니다. 

크롬(Chrome)에서 개발자 도구 실행

선택한 항목에서 마우스 오른쪽 버튼을 눌러 주시길 바랍니다. 그런 후에 [Copy] - [Copy Selector]부분을 선택하여 주시길 바랍니다. 

크롬(Chrome)에서 항목 CSS Selector로 추출

그리고 이 부분을 메모장등에서 붙여놓기를 하시면 다음과 같은 화면이 나타날 것입니다. 

롬(Chrome)에서 항목 CSS Selector로 추출 결과 

이와 같은 방법으로 CSS Selector로 활용할 수 있는 부분들을 추출할 수 있습니다. 

 

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

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

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