반응형
HTML 구조를 큰 그림으로 파악해보기
- 웹페이지 코드는 대부분 HTML + CSS + JS로 이루어져 있습니다.
- F12키를 눌러서 확인합니다.
1. HTML 기본 뼈대
2. HTML 주요 태그
- <div> : 큰 영역(박스) 나누기
- <span> : 짧은 텍스트 조각
- <a> : 링크 (<a href="url">텍스트</a>)
- <ul>, <li> : 리스트 구조
- <table>, <tr>, <td> : 표 구조
- <img> : 이미지 (src 속성에 주소 들어있음)
3. 속성 (Attributes)
태그 옆에 붙은 것들이 속성인데, 크롤링에서 클래스(class), 아이디(id) 등이 있습니다.
<div class="product-name" id="p123">아이폰 15</div>
- class="product-name" → 같은 구조가 여러 개 반복될 때 많이 씁니다.
- id="p123" → 보통 페이지 내에서 유일한 값입니다.
(ex) 크롤링 코드에서 이렇게 씁니다.
soup.find("div", {"class": "product-name"})
4. 동적 페이지 (JavaScript 렌더링)
가끔 HTML에는 데이터가 없는데 화면에는 보이는 경우가 있습니다.
→ JS가 실행되면서 추가로 불러온 데이터 입니다.
➡ 이럴 땐 개발자 도구 → Network 탭 → XHR을 확인해서 JSON이나 API 요청을 찾는 게 훨씬 쉽습니다.
반응형