Front-end
- HTML : 웹페이지의 뼈대를 구축
- CSS : 웹페이지에 디자인을 적용
- Javascript : 웹페이지의 동작을 구현
Back-end
- Server-side script
- DataBase
Web Scrapping을 이해하기 위해서는 HTML에 대해서 알아야 한다.
HTML은 웹페이지의 뼈대라고 말한다.
단순화해서 구조를 살펴보면 이렇게 되어있다.
<html>
<head>
# head 구성요소 : 제목, 파비콘 / CSS, JavaScript 파일경로 / 메타태그
<meta charset='utf-8'>
<title>제목</title>
</head>
<body>
# body 구성요소 : h, p, span, div, ol, ul, a, li
<h1>제목</h1> # headline 마크다운과 같은 기능
<p>단락</p> # paragraph, 주된 설명이 들어간다.
<p>이 부분은 <strong>주된 설명이 들어가는</strong> 문단입니다.
<span style="color:red;"></span> # 일부에 스타일 지정하는 기능
<div class="ex">...</div> # box, 박스 안에 박스 안에 박스 구성을 많이 한다.
<div class="ex def ghi"> # 여러 Tag는 동일한 Class를 가질 수 있으며, 2개 이상의 Class를 가질 수도 있다.
<div class="ex def ghi" id="first_item">
<ul> # unordered list
<li>첫번째 item</li> # o 첫번째 item
<li>두번째 item</li> # o 두번째 item
<li style='color:blue; font-size:1.5em;'>세번째 item</li> # o 세번째 item (파란색, 폰트 1.5배)
</ul>
<ol> # ordered list
<li>첫번째 item</li> # 1. 첫번째 item
<li>두번째 item</li> # 2. 두번째 item
<li class='main_item' id='first_item' style='color=orange;'>세번째 item</li> # 3. 세번째 item
</ol>
<a href="URL">링크로 이동</a> # anchor; hyperlink_reference, 링크나 하이퍼링크를 만들 때
<img src='이미지주소'/> # image; source
</body>
</html>
CSS (Cascading StyleSheet)
- 폭포수같이 계속 더 가까이 있는 옵션으로 덮어씌운다.
1. Tag's name :
- html, head, body, h1, p, span, li, ol, ul, div, a
2. Tag's Attribute :
- 태그 이름 뒤에 적힌 모든 것들 지칭하며, Name & Value로 구성된다.
- Name : class, id, style, href, src, attrs
- Value : Name = 'value'
- HTML 살펴볼 때 크롬 개발자모드 활용은 단축키 Ctrl+Shift+I를 활용한다. (또는 F12)
다음 글은 본 게시물에서 다룬 이론 지식을 활용하여 실전 웹스크래핑을 실습한 내용이다.
'멋쟁이 사자처럼 AI SCHOOL 5기 > Today I Learned' 카테고리의 다른 글
| [2주차 총정리] 자연어처리(NLP) _ 1. Preprocessing Text Data & Text Data Exploration (0) | 2022.03.25 |
|---|---|
| [2주차 총정리] Web Scrapping 실전 기초 (0) | 2022.03.25 |
| [2주차 총정리] folium.choropleth, CircleMarker을 활용한 지도 데이터 시각화 (기초) (0) | 2022.03.24 |
| [2주차 총정리] seaborn 활용한 데이터 탐색 (Data Exploration) - 한글데이터 시각화 / Scaling / heatmap 옵션으로 꾸미기 (0) | 2022.03.23 |
| [2주차 총정리] Feature Scaling (Feature Normalization) 이론 (0) | 2022.03.23 |
