웹 크롤링? 웹스크래핑?
웹 크롤링
- 웹 페이지 내 허용데이터를 모두 가져오는 것
웹 스크래핑
- 웹페이지 내 필요한 내용만 가져오는 것
웹스크래핑을 따라할 때 주의할 점
웹 페이지의 html이 변경되어 따라했는데 다른 결과가 나올 수도 있다.
결과가 제대로 나오지 않는다면 이 점을 확인해볼 것.
웹을 구성하는 요소 - HTML (Hyper Text Markup Language)
HTML, CSS, JS 중 HTML은 필수적으로 이해해야한다.
1) 새로운 폴더 내 html 파일을 만든다.
2) extention 설치
VS 코드 안의 html 문서를 브라우저에서 열 수 있게 해준다.
3) html 파일을 열 때 브라우저 지정
open in default browser ... 사용자 pc의 기본브라우저로 열기
간단한 입력으로 웹페이지 만들어보기
<html>
<head>
<title>나도코딩 홈페이지</title>
</head>
<body>
<h1>안녕하세요, 나도코딩입니다. </h1>
</body>
</html>간단한 기능으로 웹페이지를 구현해본다.
아이디, 비밀번호, 로그인 하는 페이지 만들기
<html>
<head>
<meta charset="utf-8"> <!-- html에서 한글입력 -->
<title>나도코딩 홈페이지</title>
</head>
<body>
<input type ="text" value= "아이디를 입력하세요">
<input type="password">
<input type="button" value="로그인">
</body>
</html>
더 많은 html 공부가 필요하다면? w3schools
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
위 사이트에서 html 외에도 여러 공부를 할 수 있다.
html에 대해 더 공부하고 싶다면 참고!
Xpath
xpath는 html 내 특정 element를 지칭하는 주소.
이 주소(경로)는 전체 경로를 입력할 수도 있지만
id, class 등 특징만을 입력할 수도 있다.
크롬
XPath 등 주로 크롬을 사용한다.
개발자 도구 열기
크롬에서 네이버를 들어가서
우클릭을 해보면 '검사'버튼이 있다.
도구> 개발자도구
F12
로도 같은 기능을 나타낸다.
개발자도구 좌측 상단의 버튼을 클릭하고
웹페이지의 원하는 부분에 마우스를 갖다대면
위처럼 어떤 부분인지 표시가 된다.
개발자도구 카피하기
저 상태에서 클릭하고
해당 코드 우클릭 > copy > copy XPath
full XPath는 전체경로를 따온다.