search

KevinFire2030 / Fire2025

0 stars 0 forks source link

7장 크롤링을 위한 웹 기본지식 #19

Open KevinFire2030 opened 1 year ago

KevinFire2030 commented 1 year ago

이번 장에서는 크롤링을 하기 위해 사전에 알고 있으면 도움이 되는 인코딩, 웹의 동작 방식, HTML과 CSS에 대해 알아보겠다.

KevinFire2030 commented 1 year ago

7.1 인코딩에 대한 이해

7.1.1 인간과 컴퓨터 간 번역의 시작, ASCII

7.1.2 한글 인코딩 방식의 종류

조합형의 대표적 방법인 UTF-8은 모음과 자음 각각에 코드를 부여한 후 조합해 한글을 나타낸다. 조합형은 한글뿐만 아니라 다양한 언어에 적용할 수 있다는 장점이 있어 전 세계 웹페이지의 대부분이 UTF-8로 만들어지고 있다.

KevinFire2030 commented 1 year ago

7.2 웹의 동작 방식

7.2.1 HTTP

KevinFire2030 commented 1 year ago

7.3 HTML과 CSS

클라이언트와 서버가 데이터를 주고받을 때는 디자인이라는 개념이 필요하지 않다. 그러나 응답받은 정보를 사람이 확인하려면 보기 편한 방식으로 바꾸어줄 필요가 있는데 웹페이지가 그러한 역할을 한다. 웹페이지의 제목, 단락, 목록 등 레이아웃을 잡아주는 데 쓰이는 대표적인 마크업 언어가 HTML(HyperText Markup Language)이다. HTML을 통해 잡혀진 뼈대에 글자의 색상이나 폰트, 배경색, 배치 등 화면을 꾸며주는 역할을 하는 것이 CSS(Cascading Style Sheets)다.

7.3.1 HTML 기본 구조

<html>
<head>
<title>Page Title</title>
</head>

<body>
<h2> This is page heading </h2>
<p> This is first paragraph text </p>
</body>
</html>

7.3.2 태그와 속성

HTML 코드는 태그와 속성, 내용으로 이루어져 있다. 크롤링한 데이터에서 특정 태그의 데이터만을 찾는 방법, 특정 속성의 데이터만을 찾는 방법, 뽑은 자료에서 내용만을 찾는 방법 등 원하는 값을 찾는 방법이 모두 다르기 때문에 태그와 속성에 대해 좀 더 자세히 살펴보겠다.

꺾쇠(<>)로 감싸져 있는 부분을 태그라고 하며, 여는 태그 <>가 있으면 반드시 이를 닫는 태그인 </>가 쌍으로 있어야 한다. 속성은 해당 태그에 대한 추가적인 정보를 제공해주는 것으로, 뒤에 속성값이 따라와야 한다. 내용은 우리가 눈으로 보는 텍스트 부분을 의미한다.

7.3.3 h 태그와 p 태그

h 태그는 폰트의 크기를 나타내는 태그이며, p 태그는 문단을 나타내는 태그다. 

<html>
<body>

<h1>Page heading: size 1</h1>
<h2>Page heading: size 2</h2>
<h3>Page heading: size 3</h3>

<p>Quant Portfolio</p>
<p>By Henry</p>

</body>
</html>

7.3.4 리스트를 나타내는 ul 태그와 ol 태그

ul과 ol 태그는 리스트(글머리 기호)를 만들 때 사용됩니다. ul은 순서가 없는 리스트(unordered list), ol은 순서가 있는 리스트(ordered list)를 만든다.

<html>
<body>

<h2> Unordered List</h2>
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>  

<h2> Ordered List</h2>
<ol>
  <li>List A</li>
  <li>List B</li>
  <li>List C</li>
  <li>List D</li>
 </ol> 

</body>
</html>

7.3.5 table 태그

table 태그 내의 tr 태그는 각 행을 의미하며, 각 셀의 구분은 th 혹은 td 태그를 통해 구분할 수 있다. th 태그는 진하게 표현되므로 주로 테이블의 제목에 사용되고, td 태그는 테이블의 내용에 사용된다.


<html>
<body>

<h2>Sample Table</h2>

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>    
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

</body>
</html>

7.3.6 a 태그와 img 태그 및 속성

a 태그와 img 태그는 다른 태그와는 다르게, 혼자 쓰이기보다는 속성과 결합해 사용된다. a 태그는 href 속성과 결합해 다른 페이지의 링크를 걸 수 있다. img 태그는 src 속성과 결합해 이미지를 불러온다.

7.3.7 div 태그

div 태그는 화면의 전체적인 틀(레이아웃)을 만들 때 주로 사용하는 태그다. 단독으로도 사용될 수 있으며, 꾸밈을 담당하는 style 속성과 결합되어 사용되기도 한다.


<html>
<body>

<div style="background-color:black;color:white">
  <h5>First Div</h5>
  <p>Black backgrond, White Color</p>
</div> 

<div style="background-color:yellow;color:red">
  <h5>Second Div</h5>
  <p>Yellow backgrond, Red Color</p>
</div> 

<div style="background-color:blue;color:grey">
  <h5>Second Div</h5>
  <p>Blue backgrond, Grey Color</p>
</div> 

</body>
</html>

7.3.8 CSS

CSS는 앞서 설명했듯이 웹페이지를 꾸며주는 역할을 한다. head에서 각 태그에 CSS 효과를 입력하면 본문의 모든 해당 태그에 CSS 효과가 적용된다. 이처럼 웹페이지를 꾸미기 위해 특정 요소에 접근하는 것을 셀렉터(Selector)라고 한다.

head의 style 태그에서 여러 CSS 효과가 정의되었다. 먼저 body의 전체 배경 색상을 powderblue로 설정했으며, h4 태그의 글자 색상은 파란색(blue)으로 설정했다. body 태그 내에서 style에 태그를 주지 않더라도, head에서 정의한 CSS 효과가 모두 적용된다.


<html>
<head>
<style>
body {background-color: powderblue;}
h4   {color: blue;}
</style>
</head>
<body>

<h4>This is a heading</h4>
<p>This is a first paragraph.</p>
<p>This is a second paragraph.</p>

</body>
</html>

7.3.9 클래스와 id

클래스 속성을 이용하면 특정 이름을 가진 클래스에 동일한 효과를 적용할 수 있다.

셀렉터를 클래스에 적용할 때는 클래스명 앞에 마침표(.)를 붙여 표현한다. 위 예제에서 language 클래스는 배경 색상이 tomato, 글자 색상은 흰색, 여백은 10px로 정의되다. desc 클래스는 배경 색상이 moccasin, 글자 색상은 검은색, 여백은 10px로 정의되었다. 본문의 첫 번째(Python)와 세 번째(R) 레이아웃의 h2 태그 뒤에는 language 클래스를, p 태그 뒤에는 desc 클래스를 속성으로 입력했다. 따라서 해당 레이아웃에만 CSS 효과가 적용되며, 클래스 값이 없는 두 번째 레이아웃에는 효과가 적용되지 않는다.


<html>
<style>
.language {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
.desc {
  background-color: moccasin;
  color: black;
  padding: 10px;
} 
</style>

<div>
<h2 class="language">Python</h2>
<p class="desc"> Python is a high-level, general-purpose programming language.</p>
</div>

<div>
<h2>SQL</h2>
<p>SQL is a domain-specific language used in programming and designed for managing data held in a RDBMS, or for stream processing in a RDBMS. </p>
</div>

<div>
<h2 class="language">R</h2>
<p class="desc">R is a free software environment for statistical computing and graphics.</p>
<div>
</html>

id 또한 이와 비슷한 역할을 한다. HTML 내에서 클래스는 여러 개가 정의될 수 있는 반면, id는 단 하나만 사용하기를 권장한다.

셀렉터를 id에 적용할 때는 id명 앞에 샵(#)를 붙여 표현하며, 페이지에서 한 번만 사용된다는 점을 제외하면 클래스와 사용 방법이 거의 동일하다. 클래스나 id 값을 통해 원하는 내용을 크롤링하는 경우도 많으므로, 각각의 이름 앞에 마침표(.)와 샵(#) 을 붙여야 한다는 점을 꼭 기억해야 한다.

<html>
<head>
<style>

#myHeader {
  background-color: lightblue;
  color: black;
  padding: 15px;
  text-align: center;
}

</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>