web scraping을 위한 HTML과 CSS

yuns_u·2021년 9월 21일

💛 Web Scraping을 하는데 HTML과 CSS를 해야하는 이유

필요한 데이터가 정돈된 파일로 제공되지 않을 때가 있다. 때로는 데이터를 얻기 위해 인터넷에서 직접 수집해야하기도 한다. 크롤링 혹은 스크레이핑은 웹 페이지에 있는 데이터를 모으는 작업으로 이에 대한 개념은 다음 포스트에서 구체적으로 정리하고자 한다.

웹에서 정보를 얻어오는 기술을 사용하기 위해서는 웹에 대한 이해를 할 수 있어야한다. 그렇다면 웹 페이지를 구성하는 뼈대와 살이라고 할 수 있는 HTML과 CSS에 대해 알아보자.

💛 HTML (Hyper Text Markup Language)

HTML은 Hyper Text Markup Language의 약자로 웹에서 페이지를 표시할 때 사용된다. HTML에 언어라는 말이 들어가지만 이것이 언어인지 아닌지에 대한 의견은 분분하다. MDN(Mozilla Developer Network, 웹 표준과 모질라 프로젝트에 대한 개발 문서들이 담긴 모질라의 공식 웹사이트)에 따르면 HTML은 프로그래밍 언어는 아니라고 한다. HTML은 웹페이지에서 보여지는 것들이 어떻게 어떤 방식으로 보여져야 하는지 알려주는 마크업 언어이기 때문이다.

HTML element

HTML에서는 요소(element)라는 것들이 존재한다.
요소에는 head, body, div, li 등 다양한 것들이 존재한다.

이러한 각 요소들은 기본적으로 태그를 통해 표현된다. 예를 들면 head라는 요소는 <head></head>처럼 표현된다. 태그에는 두 가지 종류가 있다. 하나는 Opening tag이고 다른 하나는 Closing tag이다. 두 태그 모두 꺽쇠(<>)를 사용하되 닫아주는 태그에는 슬래시(/)를 사용해서 해당 태그가 끝났다는 것을 표시한다.

하지만 모든 HTML요소들이 닫아주는 태그가 있는 것은 아니다. 요소에 따라서 열어주는 태그만 사용하는 경우가 있다. 예를 들면 빈줄을 추가하는 <br>이나 수평으로 줄을 그어주는 <hr>와 같은 요소들은 닫아주는 태그를 사용하지 않는다.

HTML children

하나의 HTML 요소 안에는 다른 요소도 추가될 수 있다.

<ul>
   <li>Hello</li>
   <li>World</li>
   <li>!</li>
</ul>

이렇게 표현되는 리스트는 내부에 HTMl 요소가 자동으로 포함이 되어야한다.

💛 CSS (Cascading Style Sheets

HTML 이 웹 페이지가 어떻게 구성되는지 알려주는 마크업 언어라면 CSS 는 웹 페이지 문서가 어떻게 표현되는지 알려주는 스타일시트 언어라고 할 수 있다.CSS 는 HTML 이 표현한 문서가 어떻게 표현될 지 알려준다.

CSS Selector

셀렉터는 간단히 말해서 특정 요소를 선택할 수 있는 방법이다. 셀렉터를 활용하면 원하는 요소들을 선택하여 접근할 수 있다. CSS에는 여러 셀렉터들이 존재하는데 기본 셀렉터의 일부는 아래와 같다.

Type Selector : CSS 타입에 따라 선택(예: p, div)
Class Selector : 클래스에 따라 선택
Id Selector : Id에 따라 선택

CSS 상속

스타일에 대한 문서를 작성할 때 주의해야하는 점 중 하나가 상속이다.
CSS는 요소의 위치에 따라 상위 요소의 스타일을 상속받도록 되어 있다.

예를 들어 아래와 같은 HTML이 있다고 가정해보자.

<div style="color:red">
  <p>I have no style </p>
</div>

p태그에는 스타일이 적용되어 있지 않다. 하지만 상위요소인 div의 영향을 받게 된다. 이러한 부분을 통해 CSS는 반복 작업을 하지 않아도 스타일을 적용할 수 있다. 따라서 어떻게 상속을 받게 할 것인지에 대한 고민이 필요하다.

CSS 클래스

CSS에서 중요한 개념 중 하나가 클래스이다. 클래스는 어떤 특정 요소들의 스타일을 정하고 싶을 때에 사용된다. 보통 동시에 여러 개의 요소들에 대한 스타일을 정할 때에 클래스를 지정해서 상속을 받도록 한다.

예를 들어 아래처럼 특정 요소에 클래스를 지정해줄 수 있다.

<p class="banana"> I have banana class </p>

또는 CSS에서 다음과 같이 '.' 을 활용해서 클래스를 정의할 수 있다.

.banana{
color : "yellow";
}

위의 banana라는 클래스는 CSS에서 스타일을 적용받은 것이다.

또한 html 상의 특정 요소에 여러 개의 클래스를 지정해줄 수 있다.

<p class = "fruit apple banana"> I have many classes </p>

위의 예는 세 개의 클래스를 동시에 부여한 것이다.
CSS는 세 개의 클래스를 따로따로 정리해서 스타일을 적용할 수 있다.

CSS ID

ID는 클래스와 유사한 특성을 가지고 있지만 구분하여 활용해야한다.
ID는 보통 특정한 html 요소를 가리킬 때 사용된다면 클래스는 보통 여러 개의 html 요소를 가리킬 때 사용된다. (ID를 클래스처럼 사용할 수도 있지만 구분해서 이해하고 활용하는 것이 추후 혼선을 덜 빚을 것이다.)

html에서는 아래처럼 ID를 표현할 수 있다.