웹 페이지를 크롤링하기 위해서는 html과 css에 대해 이해를 해야 작성된 페이지에서 내가 원하는 정보를 가져올 수 있다.
간단한 코드를 통해 간략히 소개만 하고 넘어가도록 하겠다.
VS Code에 html_basic.html 파일을 추가하여 다음과 같이 내용을 작성했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>타이틀</title>
</head>
<body>
<h1>Hello, World!</h1>
<div>
메시지 작성 테스트 완료
<p>문단 태그</p>
<a href="https://www.naver.com">url 연동 태그</a>
</div>
<div>
<h2>텍스트 및 버튼 추가</h2>
<input type="text" placeholder="입력">
<button onclick="alert('메시지')">저장하기</button>
<ul>
<li><a href="#">테스트 1</a></li>
<li><a href="#">테스트 2</a></li>
<li><a href="#">테스트 3</a></li>
</ul>
</div>
</body>
</html>
위의 html과 실행한 web page를 비교해보자 <head></head>사이에 있는 <title></title>이 탭의 제목으로 쓰여진 것으로 볼 수 있다.
<body></body>가 이제 본문의 내용으로 작성된 것임을 볼 수 있다.
비교해보면서 간단하게 이해를 할 수 있을 것이다.
다음은 web page를 html로 만든 뼈대에 시각적 요소를 추가하여 스타일을 추가한 css의 코드를 살펴보도록 하자.
VS Code에 css_basic.html 파일을 추가하여 다음과 같이 내용을 작성했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>타이틀</title>
<style>
#main-title {font-weight: bold; color: blue;}
h1 {color: orange;}
h2 {color: deepskyblue;}
</style>
</head>
<body>
<h1 id="main-title">Hello, World!</h1>
<div>
<h1>메시지 작성 테스트 완료!</h1>
<p>문단 태그</p>
<a href="https://www.naver.com">url 연동 태그</a>
</div>
<div>
<h2>텍스트 및 버튼 추가</h2>
<input type="text" placeholder="입력">
<button onclick="alert('메시지')">저장하기</button>
<ul>
<li><a href="#">테스트 1</a></li>
<li><a href="#">테스트 2</a></li>
<li><a href="#">테스트 3</a></li>
</ul>
</div>
</body>
</html>
이렇게 글자에 색상을 추가할 수 있다.
위의 코드를 하나씩 다 설명하기는 어려우니 좀 더 자세한 설명이 필요하다면 html 및 css의 무료강의를 찾아보도록 한다.
작성한 html을 실행하고 확인하는 방법은 python에서 제공하는 가상 머신인 venv를 설정 후 웹 서버를 시작한 뒤에 Flask 코드를 작성 후 html 파일을 배치하여 실행하는 방법도 있지만,
더 쉬운 방법으로는 VS Code의 live server를 설치 후 동작하는 것이 좋다.
1. VS Code에서 확장 프로그램으로 Live Server를 설치한다.
2. html 파일에서 Live Server로 실행한다.
이와 같이 실행하면 위에서 실행한 예제 화면을 바로 볼 수 있다.
이 방법은 local 환경에서만 확인이 가능하므로, 외부 인터넷이 연결 된 다른 컴퓨터에서는 볼 수 없다.
물론, 같은 내부 네트워크로 되어있는 환경이라면 주소에 127.0.0.1 (localhost) 대신 live server가 실행 된 PC의 ip를 입력하여 확인이 가능하다.
다음으로
[Python] 파이썬으로 크롤링하기 part.4 (아이템 가져오기)
지금부터 실제 url에 있는 데이터를 가져와 python에서 결과를 받는 작업을 진행한다.http://jekyllthemes.org/ Jekyll Themes jekyllthemes.org위 페이지는 static webpage로 미리 정의된 html 및 css를 사용하여 고정
haku-s.tistory.com
'Python > Crawling' 카테고리의 다른 글
| [Python] 파이썬으로 크롤링하기 part.6 (네이버 자동 로그인 후 메일 보내기 with selenium) (0) | 2024.08.01 |
|---|---|
| [Python] 파이썬으로 크롤링하기 part.5 (여러 페이지에서 많은 아이템 가져오기) (0) | 2024.08.01 |
| [Python] 파이썬으로 크롤링하기 part.4 (아이템 가져오기) (0) | 2024.08.01 |
| [Python] 파이썬으로 크롤링하기 part.2 (오토 마우스, 오토 키보드) (0) | 2024.07.31 |
| [Python] 파이썬으로 크롤링하기 part.1 (설치 및 준비) (0) | 2024.07.31 |
