[코드잇-웹자동화 시작하기] 1. 웹의 기본 요소

본 게시물은 코드잇의 웹자동화 시작하기라는 강의를 듣고 정리한 게시물임을 알려드립니다.

---

1. 웹 자동화 소개

- 웹자동화를 통해 업무에 활용하거나 데이터를 수집하고, 특정인에게 메일을 보내거나 기사를 만들어내거나 하는 등의 효율적인 작업이 가능.

- 웹의 작동 원리와 python 기반의 웹자동화 방식을 배울 예정

 

2. 하이퍼텍스트란?

- 책에 보면 참고문헌이 있음. 즉, 한 자리에서 정보를 바로 모아볼 수 없음

   → 여러 텍스트를 하나로 엮어낼 수 있다면? : 하이퍼텍스트 탄생

- 하이퍼텍스트 : 텍스트 그 이상의 텍스트라는 뜻으로, 하나의 페이지 안에서 여러개의 다른 페이지들과 연결고리(하이퍼링크)가 있음

- 우리가 이용하는 많은 웹사이트들이 다 하이퍼 텍스트의 일종

 

3. 하이퍼텍스트 구현

하이퍼텍스트 구현을 위해서 필요한 두 가지

1) 웹 브라우저 : 하이퍼텍스트를 보여줄 수 있는 전용 소프트웨어

2) HTML(hypertext markup language : 하이퍼텍스트를 만드는 언어) :하이퍼텍스트를 만들 수 있는 방법(페이지간 연결) 

   →  태그 : 꺽쇠로 표시하며, 수백개의 태그가 있고, 하이터텍스트 작동시키는 표시, 국제 표준이 존재

 

4. 하이퍼텍스트 구현 실습

4-1) 실습 도구 및 파일

IDE(통합개발환경)

 

- vscode (강의에서는 pycharm)

 

웹브라우저

 

- chrome

 

4-2) VS code 로  HTML 파일 만들기

① 파일 만들기

 

 

② romeo.html 생성

 

최상단 탐색창에 romeo.html 입력

 

 

만들어진 파일에 아래 내용 입력

 

로미오와 줄리엣은 <a href="william.html">윌리엄 셰익스피어</a>의 초기 희극이다. 서로 원수인 가문에서 태어난 로미오와 줄리엣이 사랑을 하게 되고 그들의 비극적인 죽음이 가문을 화해하게 만드는 이야기이다. 아름다운 대사와 극적 효과로 많은 칭송을 받는 셰익스피어의 대표작 가운데 하나이다. 셰익스피어 당대에서부터 햄릿과 함께 가장 많이 공연되었으며 지금도 공연되고 있다. 두 주인공은 젊은 연인의 전형으로 자리 잡았다.

 

③ william.html 생성

 

②과 마찬가지로 아래 내용 입력 후 파일 생성

 

윌리엄 셰익스피어(William Shakespeare)는 영국의 극작가이자 시인이다. 잉글랜드 유복한 집안에서 태어나 런던으로 이주하고서 본격 작품 활동을 시작하여 일약 명성을 얻었고, 생전에 '영국 최고의 극작가' 지위에 올랐다. 《로미오와 줄리엣》, 《햄릿》처럼 인간 내면을 통찰한 걸작을 남겼으며, 그 희곡은 인류의 고전으로 남아 수백 년이 지난 지금도 널리 읽히고 있다. 당대 여타 작가와 다르게 대학 교육을 받지 못하였음에도 자연 그 자체에서 깊은 생각과 뛰어난 지식을 모은 셰익스피어는 당대 최고의 희곡 작가로 칭송받는다.

 

5. 웹의 확장

source = codeit

 

- 하이퍼텍스트 = 통합자료라면, url을 통해 다른 사람들이 만들 하이퍼텍스트들까지 서로 연결

- 이 url을 사람들이 찾기 쉽게 해주기 위해 구글, 네이버와 같은 검색엔진이 탄생

- 웹크롤링 : 흩어진 url을 수집

 

6. 웹크롤링 vs 웹스크래핑

- 웹 크롤링(web crawling): 수많은 웹사이트를 체계적으로 돌아다니면서 URL, 키워드 등을 수집하는 것으로, 보통 검색 엔진이 웹사이트를 인덱싱하기 위해서 사용됨. 즉, A라는 url에 매칭되는 키워드를 a,b,c B 라는 url에 매칭되는 키워드를 a,c,d로 정리한 후에 a라는 키워드를 검색엔진에 입력 시 A,B 사이트가 표출되도록 하는식으로 작동하는데, 이 때 url과 키워드를 수집하는 행위를 웹크롤링이라고 함
- 웹 스크래핑(web scraping): 웹사이트에서 필요한 데이터를 긁어 오는 것으로, 많은 사람들이 웹 크롤링과 웹 스크래핑을 혼용해서 사용하지만 엄밀히 말해서는 다른 의미. 

 

7. 웹의 발전

html로 하이퍼텍스트를 만들 수 있고, 브라우저로 이 하이퍼텍스트를 사용할 수 있고, 검색엔진을 통해 서로의 문서를 연결시킴.

다만 html에 CSS와 JavaScripts, 웹브라우저가 융합 및 디벨롭되면서 웹이 발전됨

 

source = codeit

 

- CSS (Cascading Style Sheets) : 하이퍼텍스트에 디자인 요소를 넣을 수 있음. 위처럼 html이 같아도 css를 통해 다르게 꾸밀 수 있음. scss, less 등을 통해 더욱 손쉽게 사용할 수도 있음

- JavaScript : 웹페이지에 동작을 넣어줌. html/css 는 일반적인 프로그래밍언어는 아니지만, JavaScript는 다양한 목적으로 활용할 수 있는 프로그래밍 언어

- 웹 브라우저 : html에 css와 js가 첨가되면서 웹 브라우저도 이에 맞춰서 발전했으며, 북마크/이전 페이지로가기/지문인식 로그인/개발자도구와 같은 사용자 편의 기능이 추가

 

---

Reference

- https://zabefofoon.tistory.com/6

- https://www.codeit.kr/topics/intro-to-web-automation