Python/Web Crawling+Scraping

Crawling/Scraping에 필요한 HTML5 & CSS3 (간단 정리)

metamong 2022. 3. 21.

1. HTML5

[1] 개요 및 개념

* 표준 web이라고 부르는 HTML5는 주로 내용을 표현하는 것에 중점을 둠

* HTML 요소를 통해 웹 페이지 구조와 의미를 정의한다

* 시작 태그와 끝 태그를 정의하고, 그 사이 컨텐츠를 만들기 위해 여러 태그를 활용한다

* 태그는 여러 종류로 나뉜다 (아래 외에도 다양한 종류의 tag 존재)

→ h1 tag: heading

→ p tag: paragraph - 문단 만들기

→ li tag: list - 리스트 목록 만들기

→ strong tag: 강조하기

→ img tag: 이미지 표현

(src 속성을 통해 image source의 url을 기술한다)

→ a tag: 링크 정의

(href 속성을 통해 link의 대상을 정의한다)

2. CSS3(Cascading Style Sheet)

* HTML 문서에 있는 태그들을 시각적으로 꾸며주는 역할 담당

* 모든 CSS rule들은 동일한 문법을 사용

→ 특정 tag를 선택자로 정의하여 글자체, 크기, 색상 등을 지정할 수 있다

* 1> 태그이름으로 선택하는 방법 (ex) h2{})

* 2> 그룹 속성명(class)으로 선택할 때는 .을 찍음 (ex) .mytitle{})

* 3> 특정 아이디로 선택할 때는 # 사용 (ex) #myID{})

* 적용하는 범위는 크게 3가지로 나눌 수 있다

- 각 tag 요소에 style tag 속성을 사용할 수 있다

- 또한 페이지 자체인 <head> tag에 style tag를 지정할 수 있다.

- 마지막으로, 외부 자체 style을 참조할 수 있다. (<link> 요소 사용)

3. 간단 예제

* 예시 code를 통해 상단에서 배웠던 개념을 복습해보자!

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        /* class 속성으로 select를 가지는 태그의 color속성을  red로 지정한다 */
        .select {
            color: red;
        } 
        #myid {
            color: blue; 
        }
        h2 {
            color: purple; 
        }
    </style>
</head>
<body>
    <ul>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li class="select">Lirem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>

    <p>
        <strong>Elements</strong> consist of 
        <string>Content</string>
        <em>Start</em> and <em>end</em> tag.
    </p>

    <h1 id="myid">Introduction to HTML</h1>
    <h2>Start</h2>
    <a href="http://www.credu.com">Credu</a>
    
</body>
</html>

→ 크게 <head> tag & <body> tag로 나눌 수 있다

- <head> tag에는 주로 문서의 제목, 스타일(CSS) 적용이 이루어진다

- <body> tag에는 본격적으로 문서의 내용을 여러 tag와 함께 어우러져 집어넣는다

[1] <head> ~ </head> tag

{1} <title> ~ </title> tag

- <head> tag의 title인 제목을 짓는 tag이다

{2} <style> ~ </style> tag

* CSS를 뜻하는 tag로 원하는 부분에 style 속성을 지정하는 tag이다

→ 상단 code에서는 총 3가지 종류로 style을 지정하였는데,

- 첫 번째 .select{ ~ }는 어떤 tag들이 class 속성으로 select를 가진다면 (즉, select class의 tag들) 해당 tag는 ~에 해당하는 style을 지정한다는 뜻이다

- 두 번째 #myid{ ~ }는 어떤 tag들의 id가 'myid'라면 (즉, myid라는 id를 가진 tag들) 해당 tag는 ~에 해당하는 style을 지정한다는 뜻

- 마지막 세 번째 h2 { ~ }는 노골적으로 h2 tag의 style을 ~와 같이 지정하겠다는 뜻이다.

✋ class속성을 정할 때는 주로 여러 tag들을 한 class로 묶어서 동시에 style을 지정할 때 쓰이고, id속성으로 정할 때는 보통 특정 HTML 요소를 지정할 때만 사용한다.

→ CSS를 적용하는 세 가지 방법을 모두 동원하여 tag의 style을 지정해주고 있다!

(+) web page에 표시되는 meta 정보를 head tag에 정의

[2] <body> ~ </body> tag

{1} <ul> ~ </ul> tag

→ 'unordered list'라는 뜻으로 '순서 없는 목록'을 만드는 tag이다 (●으로 해당 목록의 내용이 나열됨)

→ (+) <ol> ~ </ol> tag로 'ordered list'가 있으며 해당 tag는 '순서 있는 목록' (1. 2. 3. 4. ~로 번호 순으로 목록의 내용이 매겨져 나열됨)

{2} <li> ~ </li> tag

→ <ul> & <ol> 목록의 각 내용들을 나열할 때는 <li> tag를 사용한다

→ 상단 코드의 <li> tag의 경우 첫 번째와 세 번째의 <li> tag의 class가 'select'가 되었으며 'select'의 class에 해당하는 속성이 적용된다

{3} <p> ~ </p> tag

→ 문단을 나타내는 tag

{4} <strong> ~ </strong> tag

→ 원하는 내용을 강조하고 싶을 때 사용하는 tag로 굵은 bold체 형태로 표현된다

{5} <em> ~ </em> tag

→ 문맥 상 강조하고 싶을 때 사용하며, italic체 (기울어진 형태)로 표현된다.

{6} <h1> & <h2> tag

→ <h1> tag는 글자가 가장 큰 대단원 제목을 나타낼 때 쓰이는 tag이며

→ <h2> tag는 그 다음 글자 크기로 대단원 바로 밑의 소단원 제목을 나타낼 때 주로 쓰는 tag이다

→ 상단 code의 경우 <h1> tag에 id를 적용하여 특정 id의 style이 적용되었고

→ <h2> tag의 경우 명시적으로 <h2> tag의 style을 적용한 code가 구현이 되었다

{7} <a> ~ </a> tag

→ 하이퍼링크를 활용하는 tag로, <a> tag의 href 속성에 원하는 링크를 지정하면, <a> tag로 정의한 내용을 클릭할 경우 지정하는 link로 web page가 연결이 된다

→ 상단 code의 경우 Credu를 클릭하면 원하는 link로 연결이 됨을 확인해 볼 수 있다!

- code 실제 실행 결과 -

(+) 😘 CSS를 HTML element에 적용하는 방법은 크게 세가지로 나눌 수 있다.

1≫ Inline CSS

→ 직접 지정된 style을 집어넣고 싶은 tag 안에 style을 적용하는 방법

2≫ Internal CSS

→ <head> tag에 style을 따로 지정하는 방법

3≫ external CSS

→ 외부의 CSS file을 가져와서 적용하는 방법

(위 예제에서는 1>>과 2>>를 적용함!)

→ web scraping 관련 더 자세한 정보는 하단 link를 통해 알 수 있음

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

→ HTML 일부를 집어넣어서 어떤 부분이 error가 발생하고, 무엇을 고쳐야 할 지 친절히 알려주는 사이트

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

* 출처) 2021 공공데이터 청년인턴(일경험수련생) 상시교육

저작자표시 비영리 변경금지

'Python > Web Crawling+Scraping' 카테고리의 다른 글

Web Crawling(Scraping) 개요 + DOM 기초 (0)	2022.04.05
(예제) - 한국 도쿄올림픽 medal count 가져오기 - (0)	2022.03.22
HTML 문서를 BeautifulSoup으로 검색하기 (+re module) (0)	2022.03.21