[TIL] 3주차_Day6: 파이썬 웹 크롤링(1)

💡Today I Learned

• 파이썬을 이용한 웹 크롤링 기술에 대한 첫 번째 강의를 진행했습니다.
• 본격적인 웹 크롤링에 앞서 개발 환경을 구축
• HTML의 이론 및 실습 진행

---

 

1. 개발 환경 구축

- vs code 설치, 에디터 설정, extension(확장 프로그램) 설치

 

2. HTML/CSS/JavaScript

- HTML: 웹 브라우저가 이해할 수 있는 웹 문서를 만들기 위한 언어

- CSS: 문서를 예쁘게 꾸미는 언어

- JavaScript: 문서에 다양한 기능을 만들어주는 언어

 

3. HTML

- 콘텐츠 가지는 태그 = 시작 태그 ~ 종료 태그

<div> 콘텐츠 </div>

 

- 콘텐츠 가지지 않는 태그 = 단일 태그 (with. self closing)

<br />

 

- 속성 = 값 pair, 각 태그별로 고유의 속성 & 모든 태그에 적용되는 전역 속성 등이 있음

<div title="제목"> Content </div>

<!--링크로 이동, 링크 or a링크 라고 함-->
<a href="https://naver.com">네이버 바로가기</a>

 

- 부모요소, 자식요소

: 태그들의 계층/tree 관계 → 들여쓰기, 내어쓰기 지키기!

 

- 주석

: <!-- 주석 내용 -->

 

4. HEAD

- 사람 눈에 보이지 않는 "문서의 정보"가 담기는 영역

- 가질 수 있는 정보: 타이틀, 메타 데이터(인코딩 정보, 문서 설명, 문서 작성자, ...), CSS, Script

• 인코딩: charset(character set) = 문서에서 허용하는 문자의 집합, 따라서 문서에서 사용할 수 있는 문자가 제한됨 (ex: 한글이 깨진다거나..)

- <style>, <link>, <script>

: head 안에서 문서를 스타일링, 문서 내용의 "외형"에 영향

• <style> CSS 콘텐츠 </style>
• <link rel="stylesheet" href="style.css" />  *)단일 태그임
• <script>  *)style, link 태그 기능 한 번에 수행 가능한 태그, 콘텐츠 있/없 둘 다 가능
  • 콘텐츠 방식: <script>콘텐츠</script>
  • 링크 방식: <script scr=속성></script>  *)단일 태그 이지만 self closing이 아닌 종료태그 필수!

 

5. BODY

- 사람의 눈에 실제로 보이는 콘텐츠의 영역

 

- block(블록 레벨 요소)

: 블록처럼 쌓음(블록 단위, 블록 안에 들어가있음), 크기 & 내/외부 여백 지정, 페이지의 구조적 요소를 나타냄 (ex: <div>, <article>, <section>, ...)

: 브라우저 너비에 딱맞게 꽉차는 요소

 

- inline(인라인 레벨 요소)

: 주로 문장, 단어같은 작은 부분에 사용, 한 줄로 나열, 크기 조정은 불가, 좌/우 여백만 허용 (ex: <span>, <a>, <strong>, ...)

 

- inline-block

: 레벨이 바뀌는 건 아니고 CSS로 성질만 바꾼 것, 따라서 의미상 인라인 레벨 요소임 → 글자처럼 취급되나, block 태그의 성질을 가짐

 

6. 레이아웃

- 레이아웃 = 블록 레벨 요소임, 따라서 브라우저의 가로 너비에 딱맞게 설정됨

 

- <div> = 콘텐츠 분할 요소

: 가장 흔히 사용되는 레이아웃 태그, 큰 의미는 x 단순히 구역 나누기 위함

 

- <header> = 레이아웃 태그 (아래도 마찬가지)

: 주요 정보를 담음  ex) 제목, 작성일

 

- <footer>

: 부가적인 정보를 담음  ex) 페이지 하단에 저작권 정보, 연락처

 

- <main>

: 페이지의 가장 큰 부분인 내용, 주요 콘텐츠를 담음

: 한 페이지에 한 번만 나오기

 

- <section>

: 구역을 나눔, 각 구역에서 각자의 정보를 전달하도록..

 

- <article>

: 구역 내의 각각 독립적인 문서를 전달함

 

- <aside>

: 문서의 주요 내용에 부가적인, 간접적인 정보를 전달함  ex) 쇼핑몰 오른 쪽에 "최근 본 상품" 탭

 

- 문서 구조를 "semantic" 태그를 사용해 의미있게 구성해 전달, <div> 남발하지 x..

    → 시멘틱하게 마크업 할 경우 검색엔진의 검색 순위에 가산점 or 홈페이지 로딩 속도를 높임

 

7. 콘텐츠

- <h1> ~ <h6> = 제목 태그

: <h1>은 페이지 내 한 번만 사용돼야 함, 구획(제목 넘버링)의 순서를 지켜서 사용해야 함

 

- <p> = 문단 태그

: 단독 or 제목 태그와 함께 사용

: 주의할 점 - 레이아웃 태그처럼 사용하지 말 것!

 

- <b>, <strong>

: bold체 / strong은 +강조!

 

- <i>, <em>

: italic체 / em은 +강조!

 

- <u>

: 글씨에 밑줄 + 주석을 가지는 단어임을 나타냄

 

- <s>, <del>

: 글씨에 취소선 / del은 +문서에서 제거된 텍스트를 의미

 

- <a>

: 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있음

: href 속성 = "이동하고자하는 파일 or URL"

: target 속성 = "_blank"(새 창) or "_self"(현재 창)

 

7. 멀티미디어

- <img>

: 문서 내 이미지 삽입

: src 속성 = "소스 이미지 경로"

: alt 속성 = "이미지 로딩 실패 시 텍스트 띄울 수 있음"

 

- <figure>, <figcaption>

: 하나의 독립적인 콘텐츠로 분리 후 <figcaption>로 설명 작성 가능

 

- <video>

: 문서 내 영상 삽입

: src 속성 = "소스 영상 경로"

: poster 속성 = "비디오 로드 전 보여줄 포스터"

: <source> 태그로 여러 타입의 비디오 제공도 가능

 

- <audio>

: 문서 내 소리 삽입

: src 속성 = "소스 음성 경로"

: controls 속성 → 재생/정지 버튼 등이 있는 컨트롤러 띄우기

: <source> 태그로 여러 타입의 음성 파일 제공도 가능

 

- <svg> (scalable vector graphics)

: 그래픽으로 만들어진 이미지

: 일반 이미지(래터스 이미지_png, jpg)와 다르게 수학 공식을 사용해서 그려짐 → 해상도 영향 받지 않아 확대/축소가 자유로움

: 작은 아이콘이나 로고 등의 이미지에 사용됨

: <img> 태그로 svg 파일 불러올 수 있고, <svg>태그 그대로 사용 가능

: 코드로 이뤄져있음 → 스타일 변경하거나 JS 사용해 간단한 기능 추가도 가능

 

8. 리스트

- <ul>, <li>

: 정렬되지 않은 목록

: <li> - 실제 눈에 보이는 리스트 아이템

: <ul> - li 태그만을 자식 태그로 가짐, 따라서 하위 리스트 만들 시 <li> 안에 <ul>, <ol> 태그 사용하기

 

- <ol>, <li>

: 정렬된 목록

: <li> - 실제 눈에 보이는 리스트 아이템

: <ol> - li 태그만을 자식 태그로 가짐, 따라서 하위 리스트 만들 시 <li> 안에 <ul>, <ol> 태그 사용하기

 

- <dl>, <dt>, <dd>

: 설명 목록

: <dt> - 단어 혹은 내용 (key)

: <dd> - dt의 설명 (value) 쌍 표현

: <dt> 여러개/하나 & <dd> 하나/여러 개 → 여러 개의 용어를 설명할 수 있음

 

9. 표

- <table>

: 표 만드는 태그

: <tr> - 행(roow) 구분

: <td> - 열(cell) 생성

 

: <th> - 열(=cell) 제목, 글자 bold&가운데정렬

: <thead> - 제목 그룹 태그 *) 표에 한 번만 나와야 함

: <tbody> - 표 본문 요소 *) 표에 한 번만 나와야 함

: <tfoot> - 표 바닥글 요소 태그

: <caption> - 표 설명 태그

 

10. 아이프레임

- <iframe>

: 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있음

: 외부 페이지 불러옴 → 외부 페이지 영향, 보안 등의 검토 사항이 존재

 

11. 양식 태그

- <form>

: 정보 제출을 위한 태그

: 정보 입력 및 선택(<input>, <select>, <textarea>, ..), 제출(<button>)

: action - 정보 제출됐을 때 페이지 이동시키는 속성

: method - 정보 제출될 때 처리 방식 결정

 

12. 설명과 입력(label)

- <label>

: input, textarea, selectbox의 설명을 작성할 수 있음

: for → id 연결과 같은 처리 (for 누르면 id로 포커스 가도록)

: id 속성은 값 중복 절대 불가 (html 문서 안에서 무조건 한 번만 써야함, unique id !!)

 

- <input>

: 사용자에게 데이터 입력을 받을 수 있는 대화형 태그

: type - default=text, 받을 수 있는 Input의 type 종류들

• checkbox_체크박스
• radio_예/아니오
• file_파일 첨부
• button_input 태그를 버튼으로 사용해야할 때  (*<button> 태그는 default type="submit"이라 전송됨)
• hidden_input을 시각적으로 숨겨줌

: value - 기본 내용 입력

: name - input 이름 지정

 

- <select>

: 옵션 메뉴 제공

: value 속성 지정하지 않은 경우는 option태그의 콘텐츠가 기본값

: 'selectbox'

 

- <textarea>

: 여러 줄 입력 가능한 대화형 태그

: cols/rows - 기본 너비/높이 지정

 

- 공통적으로 사용할 수 있는 속성

: readonly - 읽기 전용 (사용자가 수정 불가)

: required - form 제출될 때 '필수 입력 사항'

: placeholder - input, textarea에 부가 설명 입력 *) <select> 에서는 사용 불가

: disabled - 요소 비활성화, 정보 제출 시 값이 제출되지 않음

 

- <button>

: 클릭 가능한 버튼

: type="reset" 시 입력 양식 모두 초기화

: default는 type="submit"으로 전송

: <button>태그 내 콘텐츠에 "태그"의 입력 가능하나, 블록 레벨 태그는 사용 불가

: disabled 속성 가짐 

 

---

📒 Furthermore

• 더 공부할 수 있는 사이트
  • TCP school
  • MDN
  • W3School