1. 개념 부터...
웹페이지의 3대 요소, HTML, CSS, 콘텐츠를 일단 이해하자.
웹페이지의 3대 요소, HTML, CSS, 콘텐츠를 일단 이해하자.
우리가 보는 웹페이지는 HTML(HyperText Markup Language)이라고
불리는 언어로 작성되어 있습니다. 웹페이지 안에 있는 내용(콘텐츠)을 음식이라고 비유하면, HTML은 음식을 담은 식판 같은 것 입니다. 밥은 이 위치에 이만큼 공간에 담고, 김치는 옆에 칸에 담고하는 식판의 모양과 구조를 정해주는 언어가 HTML 입니다. 또한, 이 식판에 담은 반찬을 좀더 맛깔스럽게 보여주기 위해 (예를 들어 글씨를 파란색으로 보이게 하든지) 쓰는 툴(언어)를 CSS라고 하는데, 즉, 조미료나 포장 역할을 합니다. 실제 이 언어들을 html이라는 화일안에 적으면, 웹브라우저라는 소위 3D 프린터가 이 명령에 따라 실제 식판과 그 위에 음식, 그리고 조미료까지 넣어주는 것이지요. 그걸 우리는 화면을 통해 보는 겁니다.
이 비유를 가지고 이 세가지의 역할을 한마디로 표현하면 아래와 같습니다. 웹페이지 전체 구조 (식판)를 정해주는 것은 HTML이, 그 각 구역안에 콘텐츠(텍스트, 그림, 영상 등)를 담고, 또한 그 콘텐츠를 좀더 예쁘게 다양한 색과 글씨체로 보여주는 것은 CSS로 처리합니다.
2. 웹페이지의 구조와 소스코드를 이해하자.
웹페이지(즉, 식판)의 구조를 html로 표현하면 아래와 같습니다.
모든 식판의 각 공간은 태그(<>으로 표시된 것)들로 구성되는 데 크게 아래와 같이 iDOCTYPE, head, body 3가지로 구성됩니다.
<!DOCTYPE
html>
<head>
<meta
charset="utf-8">
<title>정재학교수의 빅데이타블로그</title>
</head>
<body>
<h1>정재학교수의 빅데이타블로그</h1>
<p>엡데이타 본문내용이 여기에 있어요</p>
</body>
</html>
위 구조를 웹페이지의 세부 요소와 언어를 웹크롤링시 필요한 만큼만 설명하겠습니다.
<!DOCTYPE html> 이 문서는 html로 작성되었음을 웹브라우저에게 표시
<html lang="en"> 파일의 시작 알리기. (언어는
영어다…)
<HEAD> 식판 만들기 전
(화면에 출력 전)에 웹브라우저에게 알려야 할 정보(아래 참조)를 담는 곳
<meta
charset="UTF-8"> <meta 속성="속성값"/> 속성별 값 결정
문자집합(character set)을 utf-8 형식으로 인코딩.
<title>문서의 제목</title>
페이지내 타이틀,헤드라인과 로고 이미지 가져올 주소
<link
href="https://chungbigdata.blogspot.kr/favicon.ico" >
이 페이지에 연결될 다른 사이트 링크 정보
<meta name="keywords" content="소개 내용"
/>
검색엔진들에게 알릴 이 페이지 주요 주제, topic등 정보 알리기
<meta name="robots" content="noindex, nofollow"
/>
검색로봇이 수집못함(noindex->반대 index)
검색로봇이 수집못함(noindex->반대 index)
</HEAD>
<BODY> 실제 콘텐츠가 표현되는 공간(블로그 글등이 이곳에 삽입됨.)
#blocking(특정 묶음을 만드는 포장지
<div> <span> </span> </div>
#글 제목
<h1>대
제목 </h1> 제목 만들기
<h2>소
제목</h2>
<h3>하위
제목</h3>
# 특정 문자를 클릭하면 어떤 웹사이트로 가게 하려면.
<link href="style.css" type="text/css" rel="stylesheet" />
예 <a href="http://google.com">Google it!</a>
페이지내 연결URL (우리가 주로 추출하는 내용)
<div id="myDiv" name="myDiv" title="Example">
<h2>타이틀</h2>
<p>이 문장 연습입니다...</p>
<p>그냥 <strong>써 본거에요</strong>..</p>
<a href="http://google.com">여기클릭하면 구글로간다!</a> </div>
# 글 올린 날짜, 세부 내용은 각 웹페이지마다 소스 코드를 보고 어느 부분인지
찾아 냅니다.
#기타 무시할 내용이지만 자주 나오는 표현
<script type="text/javascript">자바스크립트 코드 삽입 (이것 나오면 무시하자)
찾아 냅니다.
#기타 무시할 내용이지만 자주 나오는 표현
<script type="text/javascript">자바스크립트 코드 삽입 (이것 나오면 무시하자)
</script>
<style type="text/css">CSS 코드 삽입 (이것 조미료들이니 무시하자)
body{color:#333;}
</style>
</BODY>콘텐츠 끝
</HTML> 파일의 끝
3. 글 표현 방식
<요소 속성="속성값" /> 또는 <요소 속성="속성값">요소 내용</요소>
- 요소: Inline 요소와 block요소 이해 http://webberstudy.com/html-css/html-1/block-and-inline/p 요소는 문단을 나타내는 요소
- Br 줄바꿈
- <STRONG> </STRONG> 문자 굵게 (볼드) 처리.
<p>
빅데이타 정의 <br />
디지털 디바이스를 <STRONG>통해</STRONG>끊임없이 생성되고 있는 자료이다. <br />
<br />
반면에… <br />
</p>
4. HTML 소스에서 추출한 문자열 분석 전 특수문자(ESCAPE) 처리하기.
HTML에서 크롤링한 정보(그림, 문자)를 분석하기 전에 주의해야 할 것은 문자 속에 html 요소나 특수문자 표현들은 HTML에서 달리 표현되어 있다.
문구 강조로 들어가는 요소: 예)em과 strong 요소
<p> 열심히 사는 자는 <strong>아름답습니다. </strong> 즐기는 자는 <em> 행복합니다. </em></p>
위 html을 웹브라우저는 아래로 표현합니다.
열심히 사는 자는 아름답습니다. 즐기는 자는 행복합니다.
특수 문자를 나타내는 표현:
또한, 이해를 돕기 위해 예를 들면, 아래 추출한 문자열에서 굵게 쓰인 부분은 HTML문법으로 오인될 수 있다.
'x < 10' 이고 'x > 3'
때문에 <, >, 띄어쓰기 등 특수 문자의 경우 HTML에서는 &문자; 또는 &숫자; 로 표시되어 있다.
'x < 10' 이고 'x >
3'
예: '<'는 '<' (less than 의 줄임)이고, '>'는 '>' (greater than)
문제는 이 부분을 그대로 읽어 빈도 분석을 하면 기괴한 문자들이 빈도수 높은 표현으로 나오게 될 것이다. 때문에 본격적으로 내용 분석에 들어가기 전에 이 부분을 다시 일반 표현으로 수정하거나, 빈도 분석에서 나온 결과를 다시 수정해야 한다.
일반 문자 HTML HTML
공백(space)
|
|
 
|
|
&
|
&
|
&
|
|
<
|
<
|
<
|
|
=
|
-
|
=
|
|
>
|
>
|
>
|
|
©
|
©
|
©
|
이밖의 다양한 표현 요소들이 있으니 이것들을 전처리과정에서 일반적인 표현으로 변환 또는 제거 처리가 필요합니다.
자, 지금까지 설명한 내용만 알면, 웹 텍스트 크롤링을 하는데 필요한 내용은 모두 안 것입니다. 더 이상 알 필요없어요. (교육자가 이런 표현 쓰면 안되는데 ^^;)
그래도 더 알고 싶다 하시는 분은, 아래 HTML을 직접 수정해 보고 그 결과가 어떤지를 즉각 보여주는 사이트를 이용해서 HTML을 직접 만져보면서 익혀보세요.
