안녕하세요!
산뜻한 마음으로 크롤링을 배워볼 시간입니다.
원활한 파이썬 크롤링을 위해, HTML과 CSS도 알아두면 좋은데요.
파이썬 배우는것만 해도 머리아픈데, HTML이랑 CSS도 알아야 한다니요.
어쩔 수 없죠. 산뜻한 마음으로 HTML/CSS를 알아봅시다.
처음부터 >> [파이썬 크롤링] 01 - 개요
1 웹페이지
웹페이지는 HTML, CSS 등으로 이루어져 있는데요. 이는 우리가 웹페이지를 만들고자 할 때 HTML과 CSS를 익힐 가치가 있음을 의미하며, 홈페이지를 만든 선배들은 HTML과 CSS를 배우고 익혀 홈페이지를 만들어냈음을 의미할 수 있겠죠.
우리는 후배 된 도리로서, 선배님들의 홈페이지를 털어볼건데요. HTML/CSS를 간단하게나마 알고 있으면 좋습니다. 보물을 털려면 보물지도를 하나 챙겨야 하듯이요. 앞으로 3발 오른쪽으로 4발
2 HTML
기초적인 개념을 다루지는 않겠습니다. 다만 제가 HTML을 배울 당시에는 알아내기 어려웠던, 하지만 꼭 이해가 필요한 부분들을 공유해드릴게요.
...
<body>
<h1 color="red"> Apple </h1>
</body>
...
이 코드를 이해하게 되신다면 글을 계속 읽어나가셔도 좋습니다. Apple 이라는 글자가 빨간색으로 보이겠죠? 그렇다면 이 코드는 텍스트 정보와 스타일 정보를 동시에 지니고 있는 셈이네요. Apple(텍스트)과 red(스타일)의 조합인 셈이죠. 예전의 홈페이지 구성방식은 이랬다고 하네요. 반반치킨을 상자 하나에 담아낸 구성이었던거죠.
그런데, 문제가 발생합니다! 코드가 길어지면 길어질수록, 문제가 생겼을 때 처리하기가 어려워지는거죠. 예를들어 코드가 2만줄이 넘는데 에러가 발생했다면, 에러가 몇번째 줄에서 나온건지 찾아내는것조차 어렵겠죠. 한마디로 홈페이지의 유지보수가 어려워졌다는 것입니다.
그리하여 상자 하나에 담긴 반반치킨을 개별포장하기 시작합니다. 구조는 HTML에, 스타일은 CSS에 분리보관 하는거죠. 코드의 양이 반으로 줄어 1만줄 밖에 안되므로, 유지보수가 두배는 편해질 것 같은 느낌!
3 CSS
그리하여 index.html 파일과, style.css 파일의 합작을 통해 홈페이지의 일부를 구성하게 됩니다.
| ... <body> <h1> Apple </h1> </body> ... |
h1 { color : "red"; } /* 모든 h1 태그 텍스트를 빨갛게 만듬 */ |
코드를 분리하여 보관한다는 것은 이런 느낌이고요. 전체 코드의 양이 증가할수록, 분리하는 방식이 작성도 유지보수도 편합니다!
그리고 CSS로 클래스라는 개념을 활용할 수 있는데요. 글자를 파랗게 만드는 makeBlueBold 클래스를 예시를 통해 알아볼게요.
| ... <body> <h1 class="makeBlueBold"> Apple </h1> <h1 class="makeBlueBold"> 짜장면 </h1> </body> ... |
.makeBlueBold { color : "blue"; font : "bold"; } /* 모든 makeBlue 클래스 텍스트를 파랗게, 굵게 만듬 */ |
HTML 코드를 작성하다가, 파랗고 굵게 만들고 싶은 생각이 들면 언제든 class="makeBlueBold" 를 써넣기만 하면 되는거죠.
엥? 이게 무슨 의미가 있지? 라고 생각하실 수 있는데요. 클래스에 포함된 요소가 { 파랗고, 굵고, 투명하고, 움직이고, 오른쪽에 정렬하고, 등등 } 여러가지 속성이 있다고 하면, 이 긴 코드를 HTML에 매번 쓰는 것보다 개별포장 하여 이름만 써넣는게 좋을 수도 있겠습니다!
4 그래서 어떻게 활용하나?
우선 파이썬 크롤링을 배우기 전에, 웹페이지 제작에 대한 공부를 하시면 가장 좋습니다. 그게 크롤러 정신건강에 좋거든요. JavaScript까지 들어갈 필요는 없지만요.
차선책으로, HTML과 CSS를 각각 공부해보시면 좋겠습니다. 무료로 공부할 수 있는 사이트가 많은데요. 사실은 자료가 너무 많아서 뭘 공부해야 할지를 모른다는게 문제가 될 수 있어요. 크롤링을 위한 HTML/CSS 검색 키워드는 'CSS셀렉터' 입니다!
CSS셀렉터는, 홈페이지 화면에서 내가 원하는 부분을 선택할 수 있게 해주는 요소입니다. 예를들어, 네이버 화면에는 로그인을 위해 ID, PW를 입력하는 공간도 있고, 검색창도 있고 여러가지가 있는데요. 그중에서 검색창을 선택하고자 할때, CSS셀렉터를 활용하여 검색창을 선택할 수 있게 되는거죠! '내가 말한 검색창이 이거란다'를 컴퓨터에게 알려주는 방식이랄까요.
CSS셀렉터를 공부하신 후 홈페이지에서 원하는 부분을 짚어낼 수 있게 된다면, 그것으로 크롤링을 위한 HTML과 CSS는 마스터했다고 할 수 있겠습니다! 또, 그것이 우리의 크롤링 공부 방향이고요. 제 블로그에서 이를 디테일하게 다루지는 않겠으나, 간단하게 공부하는 흐름정도는 잡아보겠습니다! 또, 제가 제공해드리는 코드에 CSS셀렉터 관련 검색 키워드를 남겨놓을 것이니, 이를 공부해나가는 것도 좋겠네요.
다음 글 >> [파이썬 크롤링] 03 - requests
'코딩 > 파이썬' 카테고리의 다른 글
| [파이썬 크롤링] 04 - BeautifulSoup (0) | 2023.01.16 |
|---|---|
| [파이썬 크롤링] 03 - requests (2) | 2023.01.03 |
| [파이썬 크롤링] 01 - 개요 (0) | 2022.12.02 |
| 파이썬 딕셔너리 (0) | 2021.09.13 |
| 파이썬 break, continue (0) | 2021.09.09 |
댓글