웹크롤링에 필요한 HTML, CSS 정보

HTML이란?

• 웹 페이지의 구조를 나타내기 위한 언어
• 태그로 구성돼 있음

 

태그

• 태그는 시작 태그와 종료 태그로 구성
• <h1>내용</h1> 과 같은 형식
• 태그엔 추가적으로 속성(Attributes)이 있을 수 있음
  
  • <h1 id=”title”>내용<h1>과 같은 형식

• 자주 사용되는 태그와 그 역할

태그명	역할
div	구역 나누기
a	링크
h1(h2, h3…)	제목
p	문단
ul, li	목록

• 태그는 부모 태그와 자식 태그로 구성할 수 있음
  • 아래 코드에선 <div>의 자식 태그가 바로 <a>

<div class="new_info">
    <a href="주소1.com"></a>
    <a href="주소2.com"></a>
    <a href="주소3.com"></a>
</div>

 

속성

• 태그의 별명 : 크롤링 대상의 이름
  • id : 하나의 태그에만 적용 됨
  • class : 여러 태그에 적용될 수 있음
• 태그의 스타일
  • style : CSS의 속성들을 HTML에서 직접 지정할 때 활용

 

CSS란?

• 웹사이트의 디자인을 표시하기 위한 언어
• 글자 색 변경, 폰트 크기, 가로 세로 길이 변경 가능

 

CSS 선택자

• 태그 선택자
  • 태그의 이름을 적어서 선택

<h1>제목태그</h1> -> h1으로 선택 가능
<a>링크태그</a> -> a로 선택 가능

• id 선택자
  • id 값을 적어서 선택
  • #articleBody 같은 형태로 활용

<div id="articleBody>본문내용</div> -> #articleBody로 선택 가능

• class 선택자
  • class 값을 적어서 선택
  • .info_group 같은 형태로 활용

<div class="info_group">뉴스목록</div> -> .info_group로 선택 가능

• 자식 선택자
  • 원하는 태그의 id나 class(별명)이 없을 경우 활용
  • 바로 아래에 있는 태그 선택 가능
  • .log_sports > span 같은 형태로 활용

<div class="logo_sports">
	<span>스포츠</span>        -> .log_sports > span으로 선택 가능
</div>

---

참고

[무료] 이것이 진짜 크롤링이다 - 기본편 - 인프런 | 강의