본문 바로가기
Programming/Python

[Python] 파이썬으로 크롤링하기 / 웹 데이터 추출 / 업무자동화 - 1. 크롤링이란 무엇인가? HTML 기본문법 알아보기.

by EunjiBest 2022. 5. 17.

[Python] 파이썬으로 크롤링하기 / 웹 데이터 추출 / 업무자동화



크롤링이란?


웹상에 존재하는 콘텐츠들을 탐험하고 수집하는 작업이다.

웹상에는 수많은 데이터들이 존재한다.
내가 연구하고자하는 분야의 정보를 일일히 컴퓨터 앞에 앉아가며 데이터를 수집할 수 없기 때문에
웹 크롤링을 통해서, 자동으로 원하는 데이터를 수집할 수 있다.

크롤링을 하기에 앞서서
웹에대한 사전지식이 있어야한다.
왜냐하면, 앞서 말했듯이 웹상에 존재하는 콘텐츠를 탐험하고 수집하는 기술이기 때문이다.


웹은 무엇으로 구성이 되어있는가?
크게 html, css, javascript파일로 구성되어있다

html : 정보제공 및 웹페이지 설계 - 건물의 설계도
css : 디자인과 스타일링 - 인테리어 디자인
javascript : 기능과 효과 - 경비시스템, 자동 음식물 처리기 등의 기능



크롤링에서 가장 중요한 것은 html이다.
웹페이지를 만드는것이 아니라 웹으로부터 정보를 추출해야하기 때문에 html에 대해서 알 필요가 있다.

나머지에 대한 부분은 프론트엔드에 대한 포스팅을 할 기회가 있으면 자세히 포스팅해보도록 하겠다.



HTML(Hyper Text Markup Language) 기본


웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어이다.
웹사이트에서 F12키를 누르면 웹페이지의 정보를 나타내준다.

티스토리를 운영하는 사람이라면 잘 사용하지는 못해도, 스킨을 html로 꾸밀 수 있을것이다.

티스토리 스킨편집창


오른쪽에 보이는 것처럼 html이 있으면 왼쪽 화면 웹페이지가 구상되어있는 것을 볼 수 있다.

이처럼 html은 일련의 요소들로 이루어진 문서이다.
이때, 텍스트나 이미지들을 다른형식으로할지, 어떤 방식으로 동작하게 할지 만들어주는 것을 요소라고한다.


요소를 작성해보자.

<여는 태그 속성 ="속성값">텍스트컨텐츠</닫는태그>


태그는 열었으면, 꼭 닫아주어야한다.
예를 들어 <title>이라는 태그를 사용했으면 </title> 꺽새를 이용해서 닫아주는 태그를 꼭 넣어줘야한다.

태그 : 요소의 특징을 나타낸다.
텍스트 컨텐츠 : 요소가 나타낼 텍스트
속성="속성값" : 태그가 가진 기본 특징이나 동작을 변경. 기본값이 있지만 여러 속성 옵션을 속성값으로 지정해줄 수도 있다.

기본적으로 아래와 같은 틀을 가지고 있고

<!DOCTYPE html>

<html>

    <head>
    <meta charset = "UTF-8">
    <title>HTML 파헤치기</title>
    </head>
    <body>
    </body>

</html>


위에 쓰인 각 요소에 대해서 알아보도록하자.


<!DOCTYPE html>


이 문서가 HTML문서임을 선언하는 요소이다.
따라서 문서 맨 윗줄에 작성해야하며, html 태그안에 쓰지 않고, 단독 태그이다.

티스토리 스킨편집 html창



<html> ... </html>


HTML의 시작과 끝을 의미한다.
위 !DOCTYPE html을 제외한 모든 다른 요소들은
<html>요소 안에 들어가야한다.

당장 F12를 눌러서 확인을 해보면
<!DOCTYPE html> 바로 밑에 <html>이 있고,
가장 아래로 내리면 </html>로 닫혀있는 것을 확인할 수 있다.


<head> ... </head>


무조건 한개만 있어야한다.
head는 메타데이터가 들어가는 곳이다.
즉. 웹사이트에 대한 설명을 적어놓는 요소이다.


<head>안에 들어가는 대표적인 요소


1. <meta>

html의 특징이나 설명을 적으며
빈 요소이다.(닫는 태그가 없다)
charset라는 속성으로 문자 인코딩을 선언한다.

한글로 쓰였으니 utf-8인 속성값을 넣어주지 않으면
한글이 깨져서 보일 수 있다.


2. <title> ... </title>

head에는 무조건 한개의 <title>요소가 들어가있어야한다.

&lt;title&gt;은 사이트의 제목이다.

당연한 말이다. 한 페이지에서 title이 없어도, 2개여도 안되기 때문이다.


<body> ... </body>


실제로 눈에 보이는 내용, 화면을 넣어준다.
대부분의 요소는 body에 들어간다.

따라서..엄청나게 많은 요소들이 존재한다.
하지만 언제나 그랬듯이 외울 수 없다.

웹페이지를 만드는 것이 아닌 크롤링을 하는 것이기 때문에
대표적인 몇개만 알아보자.


1. <p>...</p>
paragraph의 약자이다.
문단을 나타내고, 문단 간에는 한 줄의 간격을 생성한다.


2. <h>...</h>
heading의 약자이다.
제목과 부제목을 표현하는데, h만 단독으로 쓸 수 없고
1~6까지의 숫자로 나타낸다.

이는 폰트의 크기이고, 숫자가 클수록 폰트 사이즈가 작아진다.
디자인적으로 h태그는 한 번만 사용하는 것이 좋다.
왜냐하면, 제목을 나타내는데 한 페이지에 제목이 여러개이면 당연히 좋지 않겠다.


3. <a>...</a>
anchor의 줄임말로
다른 URL로 연결하는 하이퍼링크를 만들어준다.

<a herf = "naver.com" target="_blank">네이버</a>

위 문법으로 네이버로 연결되는 하이퍼링크를 만들 수 있다.

href : 연결하고자하는 URL을 나타내준다.
target : 해당 링크를 어디서 보여줄지 정하는 링크이다.
위 코드는 _blank라는 속성값으로 새로운 탭을 열어서 보여준다.


4. <img>
이름처럼 문서에 이미지를 넣고자할 때 사용한다.

<img src="logo1.png" alt="logo1">

<img>태그는 혼자쓰이는 빈요소이다. 닫을 필요가 없다.

src : 이미지를 어디서 가져올지 넣어주는 경로이다. 당연히 필수로 들어가야한다.
alt : 이미지가 깨졌을 때 대체해서 보여줄 텍스트를 넣어준다.


5. <div>...</div>
아무것도 표현되지 않는 컨테이너(캔버스)이다.
여러 요소를 하나의 구역으로 묶어서 그룹시켜준다고 생각하면 편하다.

div안에 있는 요소들은 하나로 그룹이 되어서
속성값을 주었을 때 요소들이 한번에 변화가된다.


6. <span>...</span>
span또한 div처럼 아무것도 표현이 되지 않는다.
div는 만들어진 컨테이너 자체를 꾸며준다면,
span은 문장 중간에서 일부분을 꾸며줄 때 사용한다.

<span style = "color: red">eunji</span>

이라고 하면,

문장 중간에 eunji라는 부분을 빨간색으로 바꿔라!는 뜻이다.



7. <ul>...</ul>
unordered list의 줄임말로 비정렬 목록이다.
순서가 없는 리스트를 표현할 때 사용한다.

사용을 하면,
● 이름
● 나이
● 주소

이런식으로 불릿으로 나타내고, 불릿의 형태 역시 다양하게 바꿀 수 있다.
ul안에 들어가야하는 요소가 있다.

<li>...</li>
list item의 줄임말로 목록의 항목을 나타낸다.
위에서 이름, 나이, 주소를 써주는 곳이다.
따라서 정렬태그(ul, ol) 안에서만 쓰이는 태그이다.



8. <ol>...</ol>
ordered list의 줄임말로 순서가 있는정렬 목록이다.
ul과 다르게 순서가 있으므로, 불릿이 아닌
숫자나 알파벳, 로마숫자 등 오름차 순으로 표현이 된다.

1.이름
2.나이
3.주소


전역속성(global attributes)


각 태그마다 가지고 있는 속성이 있다.
앞서 배운것처럼 img는 scr,alt와 같이 쓰이고, a는 href 랑 같이 쓰이는 것을 알 수 있었다.

img에 href를 적용하면 오류가 나는 것처럼 각 태그마다 가지고 있는 속성이 아닌,
모든 태그에 공통으로 쓸 수 있는 속성들을 전역속성이라고 한다.


1.style
요소에 css의 스타일을 적용할 수 있게 해준다.
디자인적인 것들을 넣어줄 수 있는 속성이다.
color나 font-size등 다양한 속성값이 있지만, 현재는 디자인을 할 것이 아니기 때문에 넘어가도록 하자.


2. class
css에서 class를 정의를 해두고
html에서 class속성을 가져올 수 있다.
마치 파이썬에서 import시키는 것과 비슷하다고 생각하면 된다.
각 요소는 여러개의 class를 가질 수 있다.

3.id
css에서 id를 만들고
html에서 css속성을 가져올 수 있다.
class와 매우 유사하지만 각 요소는 하나의 id만 가질 수 있다.

4.hidden
이름 그대로 요소를 보이지 않도록 해준다.
속성값 없이 hidden만 적어도 적용이 된다.

5.title
태그 title과는 완전히 다른 속성이다.

이렇게 마우스를 가져다대면 요소의 정보를 나타내주는 툴팁을 제공한다.




이렇게 본격적인 크롤링에 앞서 웹의 구조에 대해서 알아보았다.
사실 html을 필요할 때만 찾아보고 어깨넘어 배우는 형식으로만 알았기 때문에
이렇게 정리를 해보니 왜 진작에 정리를 해보지 않았을까?라는 생각이 들었다.

잠깐 찾아보고 공부하면 그리 어렵지 않게 알 수 있는 것들을
긴가민가 하면서 대~충 적용했던나... 반성해ㅎ후ㅜㅜ

다음 포스팅은 본격적으로
크롤링에 대해서 알아보도록 하자!











반응형

댓글