01. 제목
패스트캠퍼스 환급챌린지 45일차 미션 (3월 16일) :
파이썬으로 할 수 있는 모든 것 with 47개 프로젝트 초격차 패키지 Online 수강 후기
02. 포스팅 본문 (학습 일기) 가이드
1. 학습 인증샷 2장 이상 포함
2. 학습 후기 700자 이상 (공백 제외)
오늘은 HTML과 태그, 실제 웹사이트에서 HTML 구조 분석하는 법에 대해서 배웠다.
우리가 보는 웹페이지의 99% 이상은 HTML로 작성되어 있다. 또 이 HTML은 대부분 태그로 구성되어 있다.
HTML은 HyperText Markup Language의 약자로 하이퍼텍스트는 이전 HTTP때 설명했듯이 링크같은 개념으로 클릭하거나 입력하면 해당되는 다른 경로로 이동이나 해당되는 액션을 실행시켜준다.
태그같은 경우는 https://www.w3schools.com/tags/에 들어가서 여러가지 태그에 대한 정보 사용법 기능을 알 수 있으니 참고하자. 해당 강의에서 자주 쓰는 태그에 대한 부분을 연습하고 설명해주었는데 나 같은 경우는 이 웹개발(html)을 전문가적으로 까진 아니어도 웹사이트를 만들어보고 익혀본 적이 몇 번 있어서 100프로 아는 내용이었다. 그래도 정리하고 넘어가자면 일단 태그는 꺽쇠 기호인 대괄호(<>)로 구성되어 있고 열고 닫는게 기본 한세트이다. 열때는 <tag> 이런식으로 꺽쇠안에 태그내용을 넣어주고 닫을 때는 </tag> 이런식으로 슬래쉬 한 다음에 열였던 태그와 동일하게 써준다.
보통 html은 기본 구성에서 헤드와 바디로 나뉘고 <head>에는 메타데이터(문서정보)나 타이틀을 넣거나 css의 링크나 스크립트를 넣어준다. 웹사이트에서 보여지는 부분은 아니지만 중요한 정보들이다. <body>에는 웹페이지의 요소를 거의 보여주는 경우로 <h1> 의 경우 여기서 1은 제일 큰 폰트로 보통 제목을 표시할 때 쓰인다. font size로 치면 34px라고 한다. h1에서 h6까지 있다. 다음은 <p> paragraph로 단락, 절 이란 의미인데 그냥 한 줄 띄어써서 써준다. 비슷한것으로 <br>이 있는데 single line break 의 약자지만 보통 break로 알고 있고 차이점은 p 태그는 단락을 나누는 태그, br 태그는 줄바꿈을 하는 태그로 <p> 태그는 "하나의 문단을 묶어주는 태그"로 사용되기 때문에 문단이 끝나고 난 뒤에 줄이 바뀌는 것이고, <br> 태그는 "단순 줄을 바꾸는 기능"만을 가진 태그라는 점이다(https://techman-tooltip.tistory.com/141 해당 블로그 인용) 아 br의 경우는 닫는 태그가 없다. 오로지 줄바꿔주는 기능이라는 걸로 기억하면 되고 여기 블로그를 쓰면서 예를 들면 enter의 기능과 같다고 보면 될 듯 하다.
다음에 많이 쓰이는 div는 웹페이지에서 엄청나게 많이 쓰이는 태그로 section in a document라는 뜻이다. 문서의 한 부분이라는 의미로 그냥 어떤 태그나 페이지안에 구성해야할 부분이 있다면 div안에 div를 또 감싸서 넣고 하는 형식으로 만들어져서 제일 많이 쓰이는 듯 하다.
다음은 ul 태그는 unordered list 로 ol(ordered list)과 반대되는 개념으로 보통은 ol보단 ul이 훨씬 많이 쓰이고 ul안에 li를 넣어서 항목들을 나열해서 표시해준다. ol의 경우는 li가 숫자의 순번으로 기록되고 ul은 단순한 도형, 기호의 반복으로 어떠한 순서적인 의미를 지니지 않는다는 느낌이 있다.<ul> <li>커피</li> <li>우유</li> <li>밀크티</li> </ul>
<ol>
<li>커피</li>
<li>우유</li>
<li>밀크티</li>
</ol>
이렇게 쓰면 웹페이지에서 보여지는 모습은
● 커피
● 우유
● 밀크티
1. 커피
2. 우유
3. 밀크티
이런식으로 표시된다.
table 태그는 테이블은 하나의 <table> 요소와 하나 이상의 <tr>, td 및 <table> 요소로 구성된다.
<tr> 요소는 테이블 행을 정의하고, td 요소는 테이블 헤더를 정의하며, <td> 요소는 테이블 셀을 정의한다.
HTML 테이블에는 <caption>, <colgroup>, <thead>, <tfoot> 및 <tbody> 요소도 포함될 수 있다.(생략도 가능하다는 의미)
tr은 행이고 td는 칸이라고 생각하면 된다. (row in a table / cell in a table)
예제로 하나 만들어보면 일단 그냥 table을 만들면 선이 표시되지않아서 구분이 어려우므로 선 구분을 위해
<table border=1>을 해서 선 경계를 표시해주고
<tr>
<td>영화이름</td>
<td>장르</td>
<td>개봉날짜</td>
</tr>
<tr>
<td>서울의봄</td>
<td>드라마</td>
<td>2023.11.22</td>
</tr>
<tr>
<td>파묘</td>
<td>미스터리</td>
<td>2024.02.22</td>
</tr>
</table>
| 영화이름 | 장르 | 개봉날짜 |
| 서울의봄 | 드라마 | 2023.11.22 |
| 파묘 | 미스터리 | 2024.02.22 |
이런식으로 표가 만들어지게 된다. (해당 프로그램은 vscode로 실행했다)
다음은 웹사이트의 HTML구조를 분석해본다. 데이터 파싱을 하려면 웹사이트 구조를 분석해야하고 이 분석은 개발자도구를 이용해야한다. 크롬이 나오면서 이 개발자도구를 지원하는 편의기능이 많이 추가가 되어서 분석이 용이해졌다.
보통 개발자도구는 웹브라우저에서 개발자를 위해 지원하는 편의기능으로 웹사이트의 구조를 파악 할 수 있다.
개발자 도구를 여는 방법은 보통 F12를 눌러서 진입하거나 마우스로 오른쪽 클릭해서 검사를 눌러 들어가거나, 우측 상단에 점점점 세로로 된 아이콘 (이 아이콘 이름을 몰라서 검색해보니 https://chaeyeon-chaeyeon.tistory.com/67 해당사이트에서 자세히 나온다. 음식이름이라니 신박하다. 해당 이름은 케밥메뉴버튼 이라고 한다) 버튼을 누르고 도구 더보기 - 개발자 도구를 누른다. 여기에 단축키가 친절하게 있는데 ctrl + shift + i 를 누르면 바로 개발자모드가 실행된다. (그냥 F12가 제일편하다) 개발자도구에서 블럭을 선택(ctrl + shift + c)해서 어떤 태그를 쓰는지 바로 표기도 되기 때문에 사용하기 편리하다. 해당 강의에서는 아이콘버튼을 클릭해서 진입하는 법만 알려주어서 진짜 초보에겐 꿀팁이 부족하지 않았나 싶다.
03. 필수 본문 내용
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
04. 필수 해시태그
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완
05. 필수 URL
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
[수강 강의 클립]
[Part 3.] 웹 크롤링 프로젝트
-Ch01. 크롤링 개요
05. HTML과 태그
06. 실제 웹사이트의 HTML 구조 분석하기
[※ 기타사항메모 ※]
{100% 환급챌린지 미션 가이드 참조 :
https://fastcampus.co.kr/event_online_challenge_2401_mission}
커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스
성인 교육 서비스 기업, 패스트캠퍼스는 개인과 조직의 실질적인 '업(業)'의 성장을 돕고자 모든 종류의 교육 콘텐츠 서비스를 제공하는 대한민국 No. 1 교육 서비스 회사입니다.
fastcampus.co.kr
