이제 웹 크롤링에 대해서 알아볼 시간입니다. 👏👏👏👏
웹 크롤링이란?
- 웹 페이지의 HTML 데이터를 직접 가져와 필요한 정보를 추룰하는 기술
- 웹 사이트에서 제공하는 데이터가 API로 제공되지 않을 때 사용
- 주로 HTML 문서나 URL 목록과 같은 원시 데이터를 수집
웹 스크래핑이란?
- 웹 페이지에서 특정 데이터를 추출하고 가공하는 작업
- 특정한 텍스트, 이미지, 표 등 유용한 정보만 선별하여 수집
- 예) 상품 가격 목록, 뉴스 기사, 리뷰 등
- 웹 크롤링과 웹 스크래핑의 용어는 혼용해서 사용하는 경우가 대다수이며 그 경계도 모호하지만 개념과 목적이 다름
- 앞으로 우리가 하는 것은 웹 스크래핑이다
자 이제 웹 크롤링과 웹 스크래핑에서 알아보았는데 그럼 웹이라는 곳에서 데이터를 가져와야 하는데 웹 이라는 것이 무엇이냐?
HTML(HyperText Markup Language) 으로 이루어진 사이트를 말합니다.
그럼 HTML에 대해 설명을 드리겠습니다.
HTML은 위와 같은 구조로 이루어져 있습니다.
- HTML5 문서는 반드시 <!DOCTYPE html> 으로 시작하여 문서 형식을 HTML5로 지정
- 실제적인 HTML 문서는 2번째 행부터 시작, <html>과 </html> 사이에 작성
- <head>와 </head> 사이에는 HTML 문서 정보를 정의하는 코드가 포함된다.(제목, 저장 방식, 브라우저의 크기 등등)
- •웹 브라우저에 출력되는 모든 요소는 <body> 와 </body> 사이에 위치한다.
그럼 구조를 알아 보았으니 각 태그 들의 역할을 알아 보아야 겠죠?
<head> 태그
- HTML 문성의 메타 데이터와 문서 정보를 정의하는 데 사용되는 태그
- 메타 데이터란? 데이터에 대한 정보를 제공하는 데이터
- HTML 문성의 title. style. link, script, meta 에 대한 데이터로 화면에 표시 되지 않음
- title : HTML 문서의 제목
- style : HTML 문성의 style 정보 정의
- link : 외부 리소스와의 연결 정보를 정의(CSS 파일 연계에 사용)
- script : Javascript 를 정의
- meta : 페이지 설명, 키워드, 저자, 화면 크기 등의 정보, 주로 브라우저 또는 검색 엔진에서 사용
<body> 태그
- HTML 문성의 실제 콘텐츠를 정의하는 데 사용되는 태그
- 다양한 태그를 사용하여 웹 페이지의 구조를 설계할 수 있다.
이게 html에 가장 큰 틀입니다. 이제 이 틀안에 우리가 넣고 싶은 데이터를 넣어서 만드는 것이 지금 이 Tstory와 같은 사이트입니다. 하지만, 우리는 데이터를 가져오는 것이 목표이지 사이트를 만드는 것이 목표가 아니 잖아요 ; p 그래서 이번 포스팅 과 다음 포스팅까지 HTML에 간단한 특성 까지만 배우고 다음부터는 데이터를 가져오는 방법을 같이 학습 하겠습니다.
HTML의 기본 문법
요소(Element)
HTML 요소(Element)는 시작 태그(Opening tag)와 종료 태그(Closing tag) 그리고 태그 사이에 위치한 내용(content)로 구성
중첩(Nested)
- <html></html>은 웹 페이지를 구성하는 모든 요소들을 포함한다.
- 예제를 보면 <html>은 <head>와 <body>를 포함하며 <head>는 <meta>와 <title> 요소를<body> 요소는 <h1>, <p>를 포함
- 중접 관계(부모자식 관계)로 웹 페이지의 구조(structure)를 표현한다.
빈 요소(Empty)
- 내용이 없는 요소(가질 수 없거나, 필요 X)
- 빈 요소는 내용이 없으며, 속성만 소유
- 4번 라인의 <meta> 가 빈 요소!
- 검색 키워드, 설명, 저자 등의 데이터를 설정
- <br>, <hr>, <img>, <input>, <link>, <meta>등이 존재
- <br> : 파이썬에서의 \n 문법과 같은 역할
- <hr> : 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용
- <img> : 이미지 내용
- <input> : 텍스트와 같은 요소를 삽일 할수 있는 역할
- <link> : 링크정보 삽입
- <meta> : 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용
속성(Attribute)
- 속성(Attribute)이란 요소의 성질, 특성을 정의
- 속성은 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공한다.
제목 태그,<h1~6></h1~6>
- 제목을 뜻하는 Heading의 약자, h사용!
- 자동 줄 바꿈! (제목은 연달아 연결되지 않잖아요)
- 하나의 HTML 문서에는 하나의 h1태그를 권장
- 웹 검색 엔진이 제일 먼저 검색하는 태그!
본문 태그, <p></p>
- 본문을 뜻하는 paragraph의 약자, <p> 사용!
- 본문을 적기 위한 태그!
- <br>과 같이 쓰면 줄을 바꿀수 있습니다.
- <hr>은 수평으로 된 줄을 그어 줍니다.
목록 <ul></ul> or <ol></ol>
- <ul> : 순서 없는 목록 (unordered list)
- <ol> : 순서 있는 목록 (ordered list)
우리가 일반 서체만 쓰지는 않아서 bold: <b></b>, italic : <i></i>, Emphasized : <em></em>등이 있지만, 우리는 데이터만 불러올 것이기 때문에 이거 까지 알 필요는 없을 것 같습니다.
이미지를 넣어주는 <img>
- 이미지를 넣을 때 사용
- 속성 값 중 하나인, src를 사용
- 이미지 로드가 안될 경우 alt 속성이 중요
- 파일을 직접 가져오기, 인터넷 주소에서 가져오기 등등
HTML의 하이퍼링크, <a>
- Anchor 의 약자인 <a>태그 사용
- 속성 값
- href : Hypertext Reference의 약자, 이동할 페이지의 링크
- target : 링크 된 문서를 열었을 때 문서가 열릴 위치 표시
- _blank : 새로운 탭에서
- _self : 현재 탭에서 (기본 값)
입력 값 받기 <input>
- type
- button , text, password, checkbox, radio
- date, color, range, file
- type = "button"
- type = "checkbox"
- Name : 체크 박스의 이름, 같은 분류의 체크 박스는 같은 이름으로 설정
- Value : 체크 박스가 실제로 전달하는 값을 지정
- Checked : 화면 최초 로딩 시에 선택 된 상태로 로딩
- type = "radio"
- 여러 선택지 중 하나만 선택 가능한 라디오 버튼 생성
- Name : 라디오 버튼의 이름, 같은 name을 가지는 라디오 버튼은 하나만 선택이 가능
- Value : 라디오 버튼이 실제로 전달하는 값을 지정
- Checked : 화면 최초 로딩 시에 선택 된 상태로 로딩
- 여러 선택지 중 하나만 선택 가능한 라디오 버튼 생성
- type = "date"
- 특정 날짜(년/월/일)를 선택
- Name : 날짜 선택 폼 이름
- type = "datetime-local"
- 시간 까지 선택 가능
- 기존은 "datetime"을 사용하였으나 시간은 시간대의 영향을 받기 때문에 정확한 데이터 값 전달이 불가능 하여 지금은 사용 X
- 특정 날짜(년/월/일)를 선택
이제 type에 대해서 얼추 알아 보았으니, 선택 메뉴에 대해서 알아봅시다.
<select>
- 선택 메뉴(드롭 다운)를 만드는 태그!
- <select> : select 폼 생성
- Name : select 박스의 이름
- <option> : select 폼의 옵션 값 생성
- value : 실제적으로 전달 되는 값
- selected : 최초에 선택 된 값으로 설정
- <optgroup> : option 을 그룹화
- Label : optgroup 이름 설정
- Disabled : 옵션은 보이지만 선택을 못하도록 설정
- <select> : select 폼 생성
마무리로 표하나만 만들고 포스팅을 마치겠습니다!!!!
테이블 <Table>
- 표를 만들 때 사용하는 태그
- 먼저 행을 쓰고 행의 자식 요소로 칸을넣어주는 것이 기본!
- <table> : 표를 감싸는 태그
- <tr> : 표 내부의 행
- <th> : 행 내부의 제목 칸
- <td> : 행 내부의 일반 칸
<table> 속성
- border : 테두리 두께
- cellspacing : 테두리 간격 사이의 너비
- cellpadding : 셀 내부의 간격
- align : 테이블 정렬 속성
- width 와 height : 테이블의 너비와 높이
- bgcolor 와 bordercolor : 테이블 배격색과, 테두리 색
<td> 속성
- colspan : 해당 칸이 점유하는 열의 수 지정
- rowspan : 해당 칸이 점유하는 행의 수 지정
오늘은 실습이 없다고 실망하신 분들이 있으신가요??????
아니요 오늘은 제가 올린 모든 코드들이 실습입니다. 다 직접 쳐보셔야 합니다!!!!!!
오늘도 같이 공부하시느라 수고 많으셨습니다!!!!!!
'데이터 가져오기' 카테고리의 다른 글
| Python 데이터 beautifulsoup (1) | 2024.12.12 |
|---|---|
| 데이터 가상환경 설정 (0) | 2024.12.11 |
| 데이터 CSS (0) | 2024.12.10 |
| [데이터] 데이터 수집과 웹 기초 (1) (1) | 2024.12.07 |
