[퀀트] R을 활용한 퀀트 투자 포트폴리오 만들기 (2)

Chapter 2 크롤링을 위한 기본 지식

2.1 인코딩의 이해와 R에서 UTF-8 설정하기

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

인코딩: 인간언어를 컴퓨터 언어(0, 1)로

디코딩: 인코딩의 반대

번역의 시초는 ASCII(American Standard Code for Information Interchange)

0~127까지의 숫자에 단어 및 특수문자를 부여한 체계로 영어 알파벳만을 지원함

2.1.2 한글 인코딩 방식의 종류

‘알’이라는 글자를 ‘알’로 표현하는 완성형, ‘ㅇ＋ㅏ+ㄹ’로 표현하는 조합형

1) EUC-KR

현대 한글에서 많이 쓰이는 문자엠나 번호를 붙임

모든 자모 조합을 표현하기 부족

2) CP949

EUC-KR을 보완하기 위해 MS가 개발

더 많은 한글을 표현할 수 있음

3) UTF-8

모음, 자음에 각각 코드를 부여해 조합

한글 뿐 아니라 다양한 언어에 적용할 수 있음

2.1.3 R에서 UTF-8 설정하기

Global Options에서 설정하면 됨

2.2 웹의 동작 방식

클라이언트 (요청) - 인터넷 - 서버 (응답)

인터넷의 주소를 URL이라고 함

2.2.1 HTTP

HyperText Transfer Protocol의 약자로 클라이언트의 요청 방식에 대한 표준을 정의한 것

HTTP 요청 방식으로는 특정 정보를 조회하는 GET과 새로운 정보를 등록하는 POST 방식이 있음

HTTP 상태 코드로 100번대 ~ 500번대가 있는데 그 중 404 error와 같은 400번대 반응은 클라이언트 요청이 잘못된 것

*２００대가 정상임

2.3 HTML과 CSS

응답 화면을 사용자인 사람이 보기 편하게 만들기 위한 디자인용 마크업 언어

HTML(HyperText Markup Language)는 사이트의 뼈대를 잡고, CSS(Cascading Style Sheets)는 배치 등 화면을 꾸며주는 역할

2.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>

2.3.3 h태그와 p태그

h태그는 폰트의 크기를(1~6까지, 작을수록 큰 폰트), p태그는 문단을 나타냄

<html> 

<body> 



<h1>Page heading: size 1</h1> 

<h2>Page heading: size 2</h2> 

<h3>Page heading: size 3</h3> 



<p>Quant Cookbook</p> 

<p>By Henry</p> 



</body> 

</html>

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

ul은 순서가 없는 리스트 (unordered list), ol은 순서가 있는 리스트 (ordered list)를 생성함

<html> 

<body> 



<h2> Unordered List</h2> 

<ul> 

<li>Price</li> 

<li>Financial Statement</li> 

<li>Sentiment</li> 

</ul> 



<h2> Ordered List</h2> 

<ol> 

<li>Import</li> 

<li>Tidy</li> 

<li>Understand</li> 

<li>Communicate</li> 

</ol> 



</body> 

</html>

2.3.5 table 태그

표를 만드는 태그

<html>

<body>



<h2>Major Stock Indices and US ETF</h2>



<table>

<tr>

<th>Country</th>

<th>Index</th>

<th>ETF</th>

</tr>

<tr>

<td>US</td>

<td>S&P 500</td>

<td>IVV</td>

</tr>

<tr>

<td>Europe</td>

<td>Euro Stoxx 50</td>

<td>IEV</td>

</tr>

<tr>

<td>Japan</td>

<td>Nikkei 225</td>

<td>EWJ</td>

</tr>

<tr>

<td>Korea</td>

<td>KOSPI 200</td>

<td>EWY</td>

</tr>

</table>



</body>

</html>

tr 태그는 각 행을 구분하고, th, td 태그는 각각 제목과 내용의 셀을 구분함

2.3.6 a태그와 src 태그 및 속성

<html>

<body>



<h2>a tag & href attribute</h2>

<p>HTML links are defined with the a tag.

The link address is specified in the href attribute:</p>



Henry's Quantopia



<h2>img tag & src attribute</h2>

<p>HTML images are defined with the img tag,

and the filename of the image source is

specified in the src attribute:</p>





width="180",height="140">



</body>

</html>

a태그는 href와 같은 속성과 주로 결합해 페이지의 링크를 거는데 쓰이고, src 태그는 img 속성과 결합해 이미지를 불러옴 (height, weight 속성으로 가로, 세로 길이 조절 가능)

페이지 내 링크된 주소 및 이미지를 모두 저장하고자 할 때 유용한 속성

2.3.7 div 태그

<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>

화면의 레이아웃을 만들 때 쓰임

단독으로도 쓰이며 style 속성과 결합되어서도 쓰임

2.3.8 CSS

웹 페이지를 꾸며주는 역할

head 부분에 입력하여 효과 적용

이런 접근 방식을 Selector라고 함

<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>

body 태그에 style 태그를 추가하지 않아도 head 태그에서 정의한 글자, 배경 색상이 적용됨

2.3.9 클래스와 id

특정 요소에만 동일한 효과를 주고 싶을 때 사용

<html>

<style>

.index {

background-color: tomato;

color: white;

padding: 10px;

}

.desc {

background-color: moccasin;

color: black;

padding: 10px;

}

</style>



<div>

<h2 class="index">S&P 500</h2>

<p class="desc"> Market capitalizations of 500 large companies

having common stock listed on the NYSE, NASDAQ,

or the Cboe BZX Exchange</p>

</div>



<div>

<h2>Dow Jones Industrial Average</h2>

<p>Value of 30 large, publicly owned companies

based in the United States</p>

</div>



<div>

<h2 class="index">NASDAQ Composite</h2>

<p class="desc">The composition of the NASDAQ Composite is

heavily weighted towards information technology companies</p>

<div>

</html>

셀렉터를 클래스에 적용할 때는 클래스명 앞에 ‘.’를 붙임

본문의 첫 번째, 세 번째 레이아웃에는 index 클래스를, p 태그 뒤에는 desc 클래스를 속성으로 입력하여 해당 레이아웃에만 CSS 효과가 적용됨

id도 이와 유사한 기능을 수행함

but HTML 안에서 단 한 번만 정의할 수 있음

<html>

<head>

<style>



/* Style the element with the id "myHeader" */

#myHeader {

background-color: lightblue;

color: black;

padding: 15px;

text-align: center;

}

</style>

</head>

<body>



<!-- A unique element -->

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



</body>

</html>

셀렉터를 id에 적용할 때는 클래스명 앞에 #을 붙여 표현함

2.4 파이프 오퍼레이터 (%>%)

다음 시간에~

Reference

w3schools: https://www.w3schools.in/html-tutorial/

웨버 스터디: http://webberstudy.com/

fastcampus, R을 이용한 퀀트 포트폴리오 만들기

https://hyunyulhenry.github.io/quant_cookbook/

I'm a Senior Student in Data Science !

데이터 사이언스를 공부하고 있는 4학년 학부생의 TIL 블로그입니다. 게시글이 도움 되셨다면 구독과 좋아요 :)

저작자표시

'Data Scraping > #Quant Portfolio' 카테고리의 다른 글

[퀀트] R을 활용한 퀀트 투자 포트폴리오 만들기 (6) (0)	2020.08.26
[퀀트] R을 활용한 퀀트 투자 포트폴리오 만들기 (5) (0)	2020.08.25
[퀀트] R을 활용한 퀀트 투자 포트폴리오 만들기 (3) (0)	2020.08.18
[퀀트] R을 활용한 퀀트 투자 포트폴리오 만들기 (4) (0)	2020.08.06
[퀀트] R을 활용한 퀀트 투자 포트폴리오 만들기 (1) (0)	2020.07.29

IDataU

[퀀트] R을 활용한 퀀트 투자 포트폴리오 만들기 (2)

'Data Scraping > #Quant Portfolio' 카테고리의 다른 글

티스토리툴바

[퀀트] R을 활용한 퀀트 투자 포트폴리오 만들기 (2)

'Data Scraping > #Quant Portfolio' 카테고리의 다른 글

'Data Scraping/#Quant Portfolio' Related Articles

티스토리툴바