Skip to Content
💻 코리아IT아카데미 신촌 - 프로그래밍 학습 자료
Python 프로그래밍Unit 10: 웹 크롤링 입문Topic 2: HTML & CSS 기초

Topic 2: HTML & CSS 기초 🏗️

🎯 학습 목표

웹 크롤링을 하려면 먼저 웹페이지가 어떻게 만들어지는지 알아야 해요!

  • HTML이 무엇인지 이해하기
  • HTML 태그와 속성 알아보기
  • CSS 선택자 기초 익히기
  • 브라우저 개발자 도구 사용하기

🌐 HTML이란 무엇일까요?

**HTML (HyperText Markup Language)**은 웹페이지를 만드는 언어예요.
마치 집을 지을 때 벽돌을 쌓는 것처럼, HTML은 웹페이지의 구조를 만들어요!

📦 HTML의 기본 구조

<!DOCTYPE html>
<html>
<head>
    <title>페이지 제목</title>
</head>
<body>
    <h1>큰 제목</h1>
    <p>문단 내용입니다.</p>
</body>
</html>

이렇게 생겼어요:

  • <html>: 전체 HTML 문서를 감싸는 태그
  • <head>: 페이지 정보를 담는 곳 (화면에 안 보여요)
  • <title>: 브라우저 탭에 표시되는 제목
  • <body>: 실제로 화면에 보이는 내용들

🏷️ HTML 태그 이해하기

HTML은 **태그(tag)**로 이루어져 있어요. 태그는 < >로 감싸져 있죠!

자주 사용하는 태그들

<!-- 제목 태그들 -->
<h1>가장 큰 제목</h1>
<h2>두 번째 큰 제목</h2>
<h3>세 번째 큰 제목</h3>
 
<!-- 문단과 텍스트 -->
<p>이것은 문단입니다.</p>
<span>짧은 텍스트</span>
<strong>굵은 글씨</strong>
<em>기울임 글씨</em>
 
<!-- 목록 -->
<ul>  <!-- 순서 없는 목록 -->
    <li>항목 1</li>
    <li>항목 2</li>
</ul>
 
<ol>  <!-- 순서 있는 목록 -->
    <li>첫 번째</li>
    <li>두 번째</li>
</ol>
 
<!-- 링크와 이미지 -->
<a href="https://www.google.com">구글로 가기</a>
<img src="사진.jpg" alt="설명">
 
<!-- 구역 나누기 -->
<div>큰 박스 (블록)</div>
<span>작은 박스 (인라인)</span>

🎯 태그의 구조 이해하기

대부분의 태그는 여는 태그와 닫는 태그가 쌍으로 있어요:

<p>안녕하세요!</p>
<!-- 
  <p> : 여는 태그 (시작)
  안녕하세요! : 내용
  </p> : 닫는 태그 (끝)
-->

일부 태그는 혼자 쓰여요 (self-closing):

<img src="image.jpg">  <!-- 이미지 태그 -->
<br>  <!-- 줄바꿈 태그 -->
<hr>  <!-- 수평선 태그 -->

🌲 HTML의 계층 구조

HTML은 나무처럼 계층 구조를 가지고 있어요!

<html>  <!-- 뿌리 (root) -->
    <body>  <!-- 줄기 -->
        <div>  <!-- 큰 가지 -->
            <h1>제목</h1>  <!-- 작은 가지 -->
            <p>내용</p>  <!-- 작은 가지 -->
        </div>
    </body>
</html>

이런 관계를 이렇게 부릅니다:

  • 부모(parent): 다른 태그를 감싸는 태그
  • 자식(child): 감싸진 태그
  • 형제(sibling): 같은 부모를 가진 태그들

계층 구조 예시

<div class="family">  <!-- 부모 -->
    <p>첫째 아이</p>  <!-- 자식 1 -->
    <p>둘째 아이</p>  <!-- 자식 2 (첫째와 형제) -->
    <p>셋째 아이</p>  <!-- 자식 3 (첫째, 둘째와 형제) -->
</div>

🎨 HTML 속성 알아보기

태그는 **속성(attribute)**을 가질 수 있어요. 태그에 추가 정보를 넣는 거죠!

속성의 형태

<태그이름 속성이름="속성값">내용</태그이름>
 
<!-- 실제 예시 -->
<a href="https://naver.com">네이버</a>
<img src="cat.jpg" alt="고양이 사진">
<div class="container" id="main">내용</div>

중요한 속성들

1. id - 유일한 이름표

<div id="header">헤더입니다</div>
<p id="first-paragraph">첫 번째 문단</p>
 
<!-- id는 페이지에서 딱 하나만! -->
<!-- ❌ 잘못된 예: 같은 id 중복 -->
<div id="box">박스1</div>
<div id="box">박스2</div>  <!-- 안 돼요! -->

2. class - 그룹 이름표

<p class="important">중요한 내용</p>
<p class="important">이것도 중요</p>
<div class="box blue">파란 박스</div>
 
<!-- class는 여러 개 가능! -->
<div class="card product new sale">
    신상품 할인 카드
</div>

3. 기타 유용한 속성들

<!-- 링크 관련 -->
<a href="주소" target="_blank">새 창에서 열기</a>
 
<!-- 이미지 관련 -->
<img src="이미지주소" alt="설명" width="300" height="200">
 
<!-- 데이터 속성 (커스텀) -->
<div data-product-id="12345" data-price="30000">
    상품 정보
</div>

🎨 CSS 선택자 기초

CSS는 HTML을 꾸미는 언어예요. 우리는 꾸미기보다 선택하는 방법을 배울 거예요!

CSS 선택자란?

웹 크롤링할 때 **“이 태그를 찾아줘!”**라고 지정하는 방법이에요.

기본 선택자 3가지

1. 태그 선택자

/* 모든 p 태그 선택 */
p { }
 
/* 모든 div 태그 선택 */
div { }
 
/* 모든 h1 태그 선택 */
h1 { }

2. 클래스 선택자 (점 .)

/* class="title"인 모든 요소 */
.title { }
 
/* class="important"인 모든 요소 */
.important { }
 
/* class에 "box"와 "blue"가 모두 있는 요소 */
.box.blue { }

3. ID 선택자 (샵 #)

/* id="header"인 요소 (단 하나!) */
#header { }
 
/* id="main-content"인 요소 */
#main-content { }

선택자 조합하기

/* div 태그 중 class="box"인 것 */
div.box { }
 
/* p 태그 중 id="first"인 것 */
p#first { }

계층 관계 선택자

/* div 안에 있는 모든 p (자손) */
div p { }
 
/* div 바로 아래 p만 (직계 자식) */
div > p { }
 
/* class="content" 안의 모든 span */
.content span { }

🔍 브라우저 개발자 도구 사용하기

실제 웹사이트의 HTML을 보는 방법이에요!

개발자 도구 열기

  1. Chrome/Edge: F12 또는 Ctrl+Shift+I (Mac: Cmd+Option+I)
  2. 우클릭 → 검사(Inspect)

개발자 도구로 할 수 있는 것들

1. HTML 구조 보기

  • Elements 탭에서 HTML 트리 구조 확인
  • 태그를 클릭하면 페이지에서 해당 부분이 강조됨

2. 선택자 찾기

  1. 원하는 요소를 우클릭
  2. “검사” 클릭
  3. Elements에서 해당 태그 확인
  4. class, id 등 속성 확인

3. CSS 선택자 테스트

Console 탭에서:

// JavaScript로 선택자 테스트
document.querySelector('.title')  // 첫 번째 것만
document.querySelectorAll('.title')  // 모든 것

📝 실습: 웹페이지 분석해보기

아무 웹사이트나 열고 개발자 도구로 분석해봐요!

실습 순서

  1. 네이버나 구글 열기
  2. F12로 개발자 도구 열기
  3. Elements 탭 클릭
  4. 다음을 찾아보세요:
    • 로고의 HTML 태그는?
    • 검색창의 id나 class는?
    • 메뉴들은 어떤 태그로 만들어졌나요?

연습 문제

다음 HTML에서 원하는 요소를 찾는 선택자를 생각해보세요:

<div class="article">
    <h2 class="title">뉴스 제목</h2>
    <p class="date">2024-01-15</p>
    <div class="content">
        <p>첫 번째 문단입니다.</p>
        <p class="highlight">중요한 문단입니다.</p>
        <p>마지막 문단입니다.</p>
    </div>
    <div class="tags">
        <span class="tag">파이썬</span>
        <span class="tag">크롤링</span>
    </div>
</div>

문제:

  1. 뉴스 제목을 찾으려면? → .title 또는 h2.title
  2. 날짜를 찾으려면? → .date
  3. 중요한 문단을 찾으려면? → .highlight
  4. 모든 태그를 찾으려면? → .tag
  5. content 안의 모든 p를 찾으려면? → .content p

💡 요약

이제 우리가 배운 것들:

  1. HTML은 웹페이지의 뼈대를 만드는 언어
  2. 태그로 내용을 감싸서 구조를 만듦
  3. 속성으로 태그에 추가 정보를 넣음
  4. id는 유일한 이름, class는 그룹 이름
  5. CSS 선택자로 원하는 요소를 지정할 수 있음
  6. 개발자 도구로 실제 웹페이지 구조를 볼 수 있음

✅ HTML & CSS 기초 체크리스트

✅ HTML & CSS 기초 체크리스트

🚀 다음 단계

HTML과 CSS의 기초를 이해했나요? 다음에는 파이썬으로 웹 크롤링을 하기 위한 개발 환경 설정을 배워볼게요!

Last updated on
Topic 1: 웹의 이해Topic 3: 개발 환경 설정하기