본 게시물은 코드잇의 웹자동화 시작하기라는 강의를 듣고 정리한 게시물임을 알려드립니다.
1~2. 웹 페이지 살펴보기 / 기본 HTML 태그 정리
- 웹 스크래핑 : 웹에서 의미있는 데이터를 추출
- 음악사이트 앨범정보, 검색엔진의 검색어 순위 등의 데이터를 얻어낼 수 있음
실습 파일 : index.html
index.html 의 코드
<!DOCTYPE html>
<html>
<head>
<title>Codeit</title>
<meta charset="utf-8">
</head>
<body>
<img src="https://www.codeit.kr/static/images/brand/logo_original.png">
<h2>본인의 커리어 목표를 달성해 보세요.</h2>
<p><b>코드잇</b>은 미국 아이비리그 컴퓨터 사이언스 전공자, 국내 대기업 IT 출신 등으로 구성된 팀을 통해, 모든 수업들을 자체 제작하여 큰 분야를 쪼개서 유기적으로 학습할수 있게 만들었어요. 코드잇 가이드를 통해 원하는 목표를 빠르게 달성해 보세요</p>
<hr>
<h2><i>코드잇</i> 커뮤니티에서 함께 궁금한 점을 해결해 봐요.</h2>
<p>궁금한 게 생겼거나 함께 의견을 나누고 싶다면? 서로의 질문과 답변을 통해, 코딩 실력을 더욱 향상시켜 보세요</p>
<hr>
<a href="https://www.codeit.kr/">새로운 코딩 교육의 시작, 코드잇</a>
<ul>
<li>프로그래밍 기초 <i>in Python</i></li>
<li>프로그래밍 기초 <span><i>in Java</i></span></li>
<li>컴퓨터 개론</li>
<li>웹 퍼블리싱</li>
<li>업무 자동화</li>
<li>데이터 사이언스</li>
<li>머신 러닝</li>
<li>알고리즘의 정석</li>
</ul>
</body>
</html>
index.html 파일을 브라우저에서 열었을 때의 화면 (pycharm의 경우 아래와 같이 바로 크롬에서 오픈)
HTML 태그 : index.html의 코드를 중심으로
- html 코드들은 전부 다 태그(꺽쇠)로 이루어져 있음
<!DOCTYPE> 선언
- HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 선언을 해야함
- 이전의 HTML 버전을 사용하려면 조금 복잡하게 써야 하지만, 가장 최신 버전인 HTML 5를 사용하기 위해서는 이렇게만 쓰면된다.
<!DOCTYPE html>
<title> 태그
- 페이지의 제목은 <title> 태그에 써 주면 된다.
- 브라우저의 탭이나 방문 기록에 나와 있는 제목이 바로 <title>에 들어간다.
<title>Sample Website</title>
<h1>~<h6> 태그
- 한 페이지에 여러 개의 머리말이 있을 수 있는데,
그 중 가장 중요한 머리말은 <h1>(heading 1),
그 다음으로 중요한 머리말은 <h2>(heading 2).
이런 식으로 <h6>(heading 6)까지 작성 가능
- 각 머리말의 크기는 나중에 마음대로 설정 가능하지만, 따로 설정해 주지 않으면 <h1>부터 순서대로 작아진다.
<p> 태그
- p태그, paragraph의 약어로 하나의 문단을 의미한다.
- 물론 직접 설정할 수도 있지만, 태그 위, 아래에는 기본적으로 여백이 조금씩 있음
- <p> : 문단시작, </p> : 문단 종료
→ 두 개의 시작/종료 태그 사이의 내용들이 한 문단의 내용
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<b> 태그, <i> 태그
- <b> 태그 : 글씨를 볼드체로 변경
- <i> 태그 : 글씨를 이탤릭체로 변경
<b>볼드체</b>와 <i>이탤릭체</i>
<a> 태그
- <a> 태그는 하이퍼링크를 만들 때 사용됨
- 태그의 href 속성 안에 링크를 통해 이동하고 싶은 주소를 써 준다.
<a href="/">코드잇 웹사이트</a>
<div> 태그
- <div> 태그는 HTML에서 가장 많이 쓰이는 태그 중 하나
- 'div'는 'division'의 약자로, 웹 요소에 특정 효과를 줄 때 사용하는 것이 아니라, 웹사이트의 구역을 정해서 레이아웃을 정하고, 디자인을 입히는 데 사용
- <div> 태그의 원리를 몰라도 웹 스크래핑을 하는 데는 크게 지장이 없음
<div>
<h2>div 안에 있는 h2</h2>
<p>div 안에 있는 p</p>
</div>
<hr> 태그
- 수평선을 그려주는 태그
- 시작 태그만 있고, 끝 태그는 없음
<ul> 태그
- unordered list의 줄임말로, 순서가 없는 리스트라는 뜻.
- 순서가 없으니 아래처럼 점으로 리스팅 표시가 됨
HTML 구조 : index.html의 코드를 중심으로
index.html 파일에서 html태그의 시작과 끝안에 아래의 태그들이 구조적으로 있음
- head
- body
html 태그를 보면, 한태그 안에 다른 태그가 있고, 그 안에 또 다른 태그들이 있는 Tree 구조를 갖고 있음
- 자식 태그 : 어떤 태그 안에 있는 태그들
- 부모 태그 : 어떤 태그가 속해있는 태그
- 위 예시에서 title의 부모 태그는 head 태그, title은 head 태그의 자식태그
HTML의 속성(attribute) : index.html의 코드를 중심으로
필요 있을 때만 쓰면 된다.
<img> : 이미지를 보여주는 태그
- src (source) : 이 태그에서 보여주고 싶은 이미지의 주소
<a> : 어떤페이지로 이동
- href : 하이퍼링크 레퍼런스
정리
- 각 태그 및 속성을 정확히 알지는 못해도, 아래의 특징만 안다면 크롤링 및 웹자동화 하는 데에는 큰 무리가 없음
'데이터 엔지니어링 > 웹크롤링 - [인강] 코드잇, 상시' 카테고리의 다른 글
| [코드잇-웹자동화 시작하기] 2. 웹사이트 가져오기 (2) | 2024.08.31 |
|---|---|
| [코드잇-웹자동화 시작하기] 1. 웹의 기본 요소 (1) | 2024.08.31 |
