(웹크롤링) 1. 웹크롤링 Intro

Python/웹크롤링

(웹크롤링) 1. 웹크롤링 Intro

하방주인장 2023. 5. 17. 12:00

웹 크롤링을 할 때, 원하는 부분만 추출하기 위해서 HTML과 CSS 기본을 배워야한다. 오늘은 웹페이지의 기본 뼈대인 HTML의 간단한 태그들을 배우고 이 태그들을 선택하기 위한 CSS를 배울 예정이다. 또한, 파이썬의 웹크롤링 라이브러리는 BeautifulSoup과 Selenium 을 사용하는데 각자의 장점인 부분을 활용하여 보통 둘다 사용하기 때문에 모두 다뤄볼 예정이다.

1. 웹의 기초 개념: Overview

https://wikidocs.net/85426

01장-2 WEB이란

.list ol { border: 1px solid blue; width:100% height:50px; padding:20px 50px; margin-bottom…

wikidocs.net

앱은 OS마다 개발 언어가 다르고 사용자가 다운로드 및 업데이트를 해야 하는 반면에 웹은 웹브라우저만 있으면 동일한 화면을 볼 수 있다.

1-1. 웹페이지 개발자 도구 사용해보기

클라이언트 입장에서 웹의 데이터 수정해보기 네이버 메인 화면 접속 → F12 눌러서 DevTool 실행 → ctrl shift C 눌러서 네이버 페이지에서 하나 선택하여 내용 바꿔보기

1-2. 쿼리 스트링 살펴보기

네이버 블로그 접속 → 검색창에 수요일 입력 → url 주소에 수요일이 생김 https://section.blog.naver.com/Search/Post.naver?pageNo=1&rangeType=ALL&orderBy=sim&keyword=수요일 ⇒ url 주소창에 수요일을 목요일로 바꾸면 목요일이 검색된 화면으로 바뀐다.
get: url에 반영됨
post: url에 반영되지 않음

2. 기본 HTML 만들기

1. HTML의 기본 구조

https://wikidocs.net/86172

HTML 기본구조

code { color:red; font-weight:bold; } li { list-style:none; } 기본구조 HTML의 기본적인 구조 입니다. HTML을 작성하기…

wikidocs.net

<!DOCYTYPE HTML>
<html>
<head>
<title>HTML 기본구조</title>
<meta charset="UTF-8">
</head>
<body>
    HTML 5 구조를 공부합시다.
</body>
</html>

html은 태그를 열고 닫는 구조로 되어있다. 때문에, html 문서는 html 태그를 열고 닫아서 태그안에 내용을 적어야 한다.
<!DOCTYPE HTML> : HTML5를 사용함을 브라우저에 선언하는 역할을 합니다.
<html> : 전체 html 문서를 감싸는 태그입니다. 하나만 존재해야 하고 html 바깥에 DOCTYPE을 제외한 다른 태그가 있으면 안 됩니다.
<head> :html 문서에 대한 정보를 나타내는 부분입니다. 하나만 존재해야하고, html 바로 아래에 있어야합니다.
<title> : head 안에 들어가는 태그로 제목표시줄의 내용을 나타냅니다. 위의 예시를 보면 제목표시줄의 내용은 HTML 기본구조 입니다.
<meta> : meta 역시 head 안에 들어가는 태그로 문서에 대한 설명을 표시합니다. 사람에게는 보이지 않고 브라우저만 읽을 수 있습니다. 속성으로 charset="utf-8"이라고 한 것은 브라우저에게 한글 인코딩을 UTF-8로 설정하라고 지시합니다. 이 부분이 있어야 한글이 깨지지 않습니다.
<body> : html 문서에서 실제적으로 화면에 보여지는 부분을 나타냅니다. 하나만 존재해야 하고, html 바로 아래, head 다음에 위치해야 합니다.

⇒ 정리: head 태그 안에는 문서에 대한 정보 또는 제목 표시를 하고, body 태그 안에 있는 내용부터 실질적으로 화면에 보여지는 부분이다.

3. 기본 HTML 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹페이지 제목</title>
</head>
<body>
    <h1>제목</h1>
    <p>문단 1</p>
    <p>문단 2</p>
    웹페이지 본문1 <br>
    웹페이지 본문2 <br>
    웹페이지 본문3 <br>
    웹페이지 본문4 <br>
</body>
</html>

3-1. 기본 태그 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html 기본 태그</title>
</head>
<body>
    <h1>제목 1</h1>
    <h2>제목 2</h2>
    <p>문단을 적으세요.</p>
    <hr>
    <p>순서가 없는 리스트</p>
    <ul>
        <li>항목 1</li>
        <li>항목 2</li>
        <li>항목 3</li>
    </ul>
    <p>순서가 <b>있는 </b>리스트</p>
    <ol>
        <li>항목 1</li>
        <li>항목 2</li>
        <li>항목 3</li>
    </ol>
    <hr>
    <h3>링크 관련 태그</h3>
    <a href="https://wikidocs.net/86303">클릭해보세요</a>
    <hr>
    <p>
        문단 안에서 줄을 바꿀 때 <br> br 태그를 사용할 수 있음  
    </p>
</body>
</html>

3-2. 기본 테이블 실습 및 CSS

id)

특정한 Tag를 지정하기 위하여 HTML Tag의 id 속성을 사용한다.
id 속성은 하나의 HTML문서에서 고유(Unique)해야 한다. 즉, 하나의 Tag만 선택된다.
#id이름

class)

class 속성을 갖는 모든 Tag에 스타일 적용한다.
.클래스이름

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML table</title>
    <style>
        table { border-collapse: collapse; } 
        th, td{
            border: 1px solid black;
        }
        th { background-color: aqua;}
        #hong { color: blue; }
        #kim { color: pink; }
        .job{ color: green;}
        .bold-font{ font-weight: bold;}
    </style>
</head>
<body>
    <h1>html table 실습</h1>
    <table>
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>직업</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="hong">홍길동</td>
                <td>30</td>
                <td class="job bold-font">개발자</td>
            </tr>
            <tr>
                <td id="kim">김영희</td>
                <td>25</td>
                <td class="job">디자이너</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
</body>
</html>

id
특정한 Tag를 지정하기 위하여 HTML Tag의 id 속성을 사용한다.
id 속성은 하나의 HTML문서에서 고유(Unique)해야 한다. 즉, 하나의 Tag만 선택된다.
#id이름
class
class 속성을 갖는 모든 Tag에 스타일 적용한다.
.클래스이름

저작자표시 비영리 변경금지

티스토리