Topic 1: 웹의 이해 🌐
🎯 학습 목표
웹이 어떻게 작동하는지, HTML이 무엇인지 이해해요!
- 웹의 작동 원리 이해하기
- HTML의 기본 구조 알아보기
- 개발자 도구 사용해보기
🌍 웹은 어떻게 작동할까?
웹은 클라이언트와 서버가 대화하는 방식으로 작동해요!
당신의 컴퓨터 (클라이언트) 인터넷 웹 서버
🖥️ ←---------------→ 🌐 ←---------------→ 🖥️
"네이버 주세요!" "여기 있어요!"- 요청(Request): 브라우저가 서버에 웹페이지를 요청
- 응답(Response): 서버가 HTML 파일을 보내줌
- 렌더링: 브라우저가 HTML을 화면에 표시
📄 HTML이란?
HTML(HyperText Markup Language)은 웹페이지의 뼈대예요!
간단한 HTML 예제
<!DOCTYPE html>
<html>
<head>
<title>내 첫 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 단락입니다.</p>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
</body>
</html>주요 HTML 태그들
| 태그 | 의미 | 예시 |
|---|---|---|
<h1>~<h6> | 제목 | <h1>큰 제목</h1> |
<p> | 단락 | <p>문단 내용</p> |
<a> | 링크 | <a href="url">링크</a> |
<img> | 이미지 | <img src="image.jpg"> |
<div> | 구역 | <div>내용</div> |
<span> | 인라인 요소 | <span>텍스트</span> |
🔍 개발자 도구 사용하기
브라우저의 개발자 도구로 웹페이지의 HTML을 볼 수 있어요!
개발자 도구 열기
- Windows:
F12또는Ctrl + Shift + I - Mac:
Cmd + Option + I - 마우스: 우클릭 → “검사” 또는 “요소 검사”
실습해보기
# 파이썬으로 간단한 HTML 만들기
html_content = """
<!DOCTYPE html>
<html>
<head>
<title>파이썬으로 만든 HTML</title>
<meta charset="utf-8">
</head>
<body>
<h1>🐍 파이썬 크롤링 학습</h1>
<p>이제 웹페이지에서 데이터를 가져올 수 있어요!</p>
<h2>오늘의 목표</h2>
<ul>
<li>HTML 구조 이해하기</li>
<li>태그와 속성 알아보기</li>
<li>개발자 도구 사용하기</li>
</ul>
<p>더 알아보기: <a href="https://www.python.org">파이썬 공식 사이트</a></p>
</body>
</html>
"""
# HTML 파일로 저장하기
with open("my_first_webpage.html", "w", encoding="utf-8") as f:
f.write(html_content)
print("웹페이지가 생성되었어요! my_first_webpage.html을 브라우저로 열어보세요.")🎨 HTML 구조 이해하기
태그와 속성
<태그명 속성="값">내용</태그명>
<!-- 예시 -->
<a href="https://google.com" target="_blank">구글로 가기</a>- 태그:
<a>(anchor, 링크) - 속성:
href(링크 주소),target(열리는 방식) - 내용: “구글로 가기”
중첩 구조
HTML은 트리 구조로 되어 있어요:
<div class="container">
<h1>제목</h1>
<div class="content">
<p>첫 번째 단락</p>
<p>두 번째 단락</p>
</div>
</div>💪 실습: 웹페이지 분석하기
# 간단한 HTML 분석 연습
sample_html = """
<html>
<body>
<h1 id="title">뉴스 제목</h1>
<p class="date">2024-01-15</p>
<div class="article">
<p>첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.</p>
</div>
<ul class="tags">
<li>파이썬</li>
<li>크롤링</li>
<li>웹</li>
</ul>
</body>
</html>
"""
# HTML에서 정보 찾기 (수동으로)
print("🔍 HTML 분석 연습")
print("1. 제목은 <h1> 태그 안에 있어요")
print("2. 날짜는 class='date'인 <p> 태그에 있어요")
print("3. 태그들은 <ul> 안의 <li> 태그들에 있어요")
print("\n다음 토픽에서는 이런 정보를 자동으로 추출하는 방법을 배워요!")💡 퀴즈: 웹과 HTML 이해도 체크
Q1. HTML에서 링크를 만드는 태그는?
<link><a><url><href>
💡 정답 확인
정답: 2번 <a>
<a> 태그는 anchor(닻)의 약자로, 하이퍼링크를 만들 때 사용해요.
<a href="https://naver.com">네이버로 가기</a>Q2. 개발자 도구를 여는 단축키는? (Windows)
💡 정답 확인
정답: F12 또는 Ctrl + Shift + I
개발자 도구에서는:
- Elements: HTML 구조 확인
- Console: JavaScript 실행
- Network: 네트워크 요청 확인
✅ 웹의 이해 마스터 체크리스트
✅ 웹의 이해 마스터 체크리스트
🚀 다음 단계
웹이 어떻게 작동하는지 이해했나요? 이제 파이썬으로 웹페이지의 데이터를 가져오는 방법을 배워볼게요!
Last updated on