* 코알라 스터디 1주차 내용
HTML의 개념 이해하기
우리가 쉽게 사용하는 포털 사이트들의 홈페이지는 HTML 이라는 웹문서로 구성되어있고, 이 웹문서를 인터넷 브라우저(인터넷 익스플로러, 크롬, 파이어 폭스 등)로 실행하면 익숙한 홈페이지의 모습으로 나타나게 됩니다.
*웹브라우저에서 마우스 오른쪽 클릭 후 <소스보기>를 클릭하면 페이지의 소스코드를 확인할 수 있습니다.
이 HTML이라는 웹문서 안에 우리가 수집하기를 원하는 데이터가 저장되어 있습니다. 데이터 수집은 바로 이 웹뭉서 어딘가에 저장되어 있는 데이터를 찾아 저장하는 것입니다.
초간단 웹문서(HTML) 만들기
메모장으로도 간단하게 HTML 문서를 만들 수 있는데요. 메모장을 켜 "Hello World!"라고 적어봅시다. 그리고 저장할 때 확장자를 .html로 설정해 줍니다. 그러면 실행했을 때 웹 브라우저로 나타납니다.
· HTML과 태그(Tag)
HTML 문서는 태그로 구성되어 있습니다. 문서를 자세히 살펴보면 꺽쇠로 감싸져 있는 코드가 많습니다. 이 꺽쇠로 감싸져 있는 코드를 <태그>라고 부릅니다. HTML의 기본 구조는 태그가 데이터를 감싸고 있는 구조입니다.
<태그>데이터</태그>
데이터 수집은 1. 우리가 원하는 내용을 감싸고 있는 태그를 찾아, 2. 태그가 가지고 있는 데이터를 찾는 것입니다.
앞서 저장했던 메모장을 켜 태그에 관한 간단한 연습을 해보겠습니다.
<h1>Let's learn Tags</h1>
<h3>about text</h3>
HTML is a documant that consists of <b>tags.</b>
you can make <b>bold</b> text,
or <u>underline</u> it.
Please use a <br>br tag for spacing words :)<br>
<a href="https://naver.com> click here </a> moves to Naver.
가장 간단한 태그의 사용법은 크게 두가지가 있습니다.
1. 태그로 데이터가 둘러싸여 있는 형태 : <태그>데이터</태그>
2. 태그가 독립적으로 사용되는 경우 : <br> 줄바꿈 같은 경우 데이터를 감쌀 필요 없이 독립적으로 사용 가능합니다.
응용연습
<img src="http://bit.ly/구글로고이미지">
<div>
아이디 <input><br>
비밀번호 <input><br>
<textarea>내용을 입력해주세요.</textarea>
</div>
· 태그의 속성(attribute) 이해하기
<a href="https://naver.com">여기</a>를 클릭하면 네이버로 이동합니다.
<img src="http://bit.ly/구글로고이미지">
a 태그(링크연결)은 꺽쇠안에 href와 함께, img 태그(이미지 넣기)는 꺽쇠 안에 src와 함께 들어가 있습니다.
이와 같이 태그의 <>안에 함께 들어가서 해당하는 태그의 기능이나 모양을 결정하는 것을 속성이라고 부릅니다.
<img src="http://bit.ly/구글로고이미지" width="250px">
<div>
아이디 <input type="text" placeholder="아이디"><br>
비밀번호 <input type="password" placeholder="비밀번호"><br>
<textarea rows="15" cols="30">내용을 입력해주세요.</textarea>
</div>
* img 태그를 사용할 때는 이미지의 위치, 주소를 결정해주는 src 속성을 꼭 사용해야합니다! 이때 원하는 이미지의 주소를 웹에서 쉽게 가져오는 방법은 아래와 같습니다. (크롬 기준) 원하는 이미지를 마우스 오른쪽 클릭한 후 이미지 주소 복사 선택해주면 실제로 이미지가 저장되어 있는 서서버의 주소를 복사할 수 있습니다. 복사한 결과를 붙여넣고 img 태그의 src 속성에 넣어주면 됩니다!
challenge 1 : 간단한 웹 페이지 만들어 보기
<h1>다음부터</h1>
<h3>엄지용, 2014</h3>
<img src="http://bitly.kr/UlxuvOjOX" width="250px">
<br>
이번까지만 이렇게 하고<br>
다음부턴 이러지 말아야지<br>
<br>
라며 버려버린 시간들이<br>
언젠간 한데 모여
<br>
<u>우린 뭐 <b>네 <a href="https://google.com">인생</a> 아니었냐</b>고 따져 물어올 것만 같다.</u>
<br>
<img src="http://bitly.kr/TLjIXpl9P" width="125px">
<br>
시집을 받아보고 싶으면 메일주소를 써주세요!
<br>
<input type="text"><br>
선택자를 통해 원하는 데이터를 찾는 방법
다음으로, 태그를 이용해서 웹문서에서 원하는 데이터를 찾는 방법을 공부해보겠습니다.
#1 태그를 이용해 데이터 선택하기
challenge1에서 만든 페이지에서 데이터를 찾으려면 어떻게 해야할까요? 해당하는 데이터를 포함하고 있는 태그를 찾으면 원하는 데이터를 찾을 수 있습니다.
- 다음부터 : <h1>
- 엄지용, 2014 : <h3>
- 우린 뭐 네 인생 아니었냐고 따져 물어올 것만 같다. : <u> -> 여러 태그가 중첩되어 있지만, 데이터의 내용은 태그의 유무와 관계없으므로!
- 인생 : <a>
그러나 실제 홈페이지는 더욱 복잡한 모양으로 구성되어 있습니다.
일반적으로 <head>태그에는 웹페이지의 개략적인 정보, 요약 등이 담겨 있습니다.
주로 우리가 찾고자 하는 데이터는 <body> 태그 안에서 시작합니다.
예제 페이지의 코드를 살펴보면 크게
1단계 구분
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
</body>와 같이 <span>과 <div>로 나누어져 있습니다. 각각 큰 제목과 상품 박스를 표시하고 있습니다.
2단계 구분
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
<div class="itmes-row">
<div class="itmes-row">
</body>다음으로 크게 제품 박스의 행을 구분합니다. 제품의 두 줄은 서로 다른 <div>로 구분하고 있습니다.
3단계 구분
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
<div class="itmes-row">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="itmes-row">
</body>그다음 줄 안에서 각각 5개의 행으로 나뉘어져 있습니다.
4단계 구분
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
<div class="itmes-row">
<div class="item">
<img src="./notebook1.png">
<div class="metadata">
<a href="#">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="itmes-row">
</body>그리고 한 상품 칸 안에서
<img> : 각 상품에 대한 이미지
<div> : 제품 정보
<a> : 판매처 로 나뉘어져 있습니다.
5단계 구분
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
<div class="itmes-row">
<div class="item">
<img src="./notebook1.png">
<div class="metadata">
<span class="title">14U380-EU1TK</span>
<span class="price">최저 389,000원</span>
<span class="comments">상품평 599</span>
<a href="#">
<span>판매처 72</span>
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="itmes-row">
</body>마지막으로 각 세부 정보들은
<div class="metadata">
<span class="title">14U380-EU1TK</span>
<span class="price">최저 389,000원</span>
<span class="comments">상품평 599</span>
<a href="#">
<span>판매처 72</span>
각각 <span>태그로 포함되어 있습니다.
#2 태그를 통해 데이터 선택하기
1. 제품명
2. 가격
3. 상품평
4. 판매처 를 태그를 이용해서 찾아볼까요?
네가지 데이터 모두 <span> 태그로 둘러싸여 있습니다. 이 경우 컴퓨터에게 <span> 데이터만 찾아달라고 명형하면 구분 없이 데이터가 수집되겠죠.
이러한 문제때문에 태그를 구분할 수 있도록 각각의 태그에 id와 class라는 이름을 붙였습니다. id와 class는 일종의 속성(attribute)으로 태그의 깍쇠 안에 포함되어 있습니다.
☞ id - <태그이름 id="아이디"> : 하나의 웹 페이지에 하나만 쓸 수 있는 고유한 이름
☞ class - <태그이름 class="클래스"> : 비슷한 형태를 가진 요소에 여러번 사용할 수 있는 이름
특정한 태그를 선택해달라는 명령을 컴퓨터가 수행하기 위해서는 "선택자(Selector)"라는 약속된 명령어를 사용해아합니다. 선택자를 사용하면 원하는 class/id를 가진 태그를 쉽게 선택할 수 있습니다.
따라서, 선택자는 .을 이용하여 class를, #을 이용하여 id를 특정합니다.
선택자를 사용하여 위의 데이터들을 찾으면 다음과 같은 결과를 얻을 수 있습니다.
제품명 : class가 title인 span 태그 -> span.title
가격 : class가 price인 span 태그 -> span.price
상품평 : class가 comemnts인 span 태그 -> span.comments
판매처 : class, id가 없는 span 태그 -> span
* 이때 판매처는 class나 id가 없기 때문에 span태그를 가진 모든 데이터가 선택됩니다.
이때는 데이터의 상하관계를 통해 특정한 태그를 선택해야합니다.
#3 상하관계를 통해 데이터를 선택하는 방법: 자식(Child) / 자손(Descendent)
앞에서 사용된 html 코드에서는 div.item 아래에 다음과 같은 포함 관계를 가지고 있습니다.
따라서 판매처 데이터를 가지고 올때는 a 태그가 가지고 있는 span 태그만 선택해 달라고 하면 됩니다.
1. 자식(Child) - a>span : a태그가 직접 포함하고 있는 span 태그
2. 자손(Descendant) - a span : a태그가 포함하고 있는 모든 span 태그
'Computer Science > Crawling with Python' 카테고리의 다른 글
| 크롤링 기본 (0) | 2020.12.23 |
|---|
