풀어쓰는 사회학 AI

홈
가이드

HTML 교구에 내 이미지(PNG) 넣는 3가지 방법 | 구글 드라이브·GitHub·Base64 완전 가이드

📌 이 글 요약

  • HTML 교구에 내 이미지(PNG/JPG)를 넣는 3가지 방법 완전 가이드
  • 구글 드라이브 / GitHub / Base64 — 상황별 추천 + 실제 코드 예시
  • 이미지 크기 조절, 로딩 속도 최적화까지

교구에 그림을 넣고 싶은데 어떻게 하죠?

HTML 교구 만들면 가장 많이 받는 질문이 "여기에 사진 넣을 수 있어요?"입니다. 당연히 됩니다. 근데 방법이 여러 가지라서, 상황에 맞는 걸 골라 써야 합니다.

결론부터:

방법난이도추천 상황
구글 드라이브⭐ 쉬움이미지 5개 이하, 빠르게 할 때
GitHub⭐⭐ 보통이미지 많을 때, 안정적 호스팅
Base64⭐⭐⭐ 약간 복잡아이콘/작은 이미지, 오프라인 작동 필요

방법 1: 구글 드라이브 (가장 쉬움, 추천)

단계별 따라하기

  1. 구글 드라이브에 PNG/JPG 이미지 업로드
  2. 이미지 우클릭 → 공유 → "링크가 있는 모든 사용자"로 변경
  3. 공유 링크 복사. 형태: https://drive.google.com/file/d/파일ID/view
  4. 파일ID만 추출해서 아래 형식으로 사용:

// HTML 코드에서 이렇게 사용

<img src="https://drive.google.com/uc?id=여기에파일ID" width="300">


// 교구 데이터에서 이렇게 사용

image: "https://drive.google.com/uc?id=여기에파일ID"

⚠️ 주의사항

  • 반드시 "링크가 있는 모든 사용자" 공유 설정 필요 (안 하면 안 보임)
  • 대용량 이미지는 로딩 느릴 수 있음 — 가로 800px 이하로 리사이즈 추천
  • 구글이 가끔 URL 형식을 바꿔서, 장기적으로는 GitHub이 더 안정적

방법 2: GitHub (안정적, 이미지 많을 때)

단계별 따라하기

  1. GitHub 계정 생성 (무료)
  2. 새 Repository 생성 (예: "teaching-assets")
  3. Add file → Upload files로 이미지 업로드
  4. 업로드된 이미지 클릭 → Raw 버튼 클릭 → URL 복사

// Raw URL 형태

https://raw.githubusercontent.com/유저이름/저장소명/main/이미지파일.png


// 사용 예시

<img src="https://raw.githubusercontent.com/kstep-teacher/assets/main/korea-map.png" width="400">

💡 GitHub 장점

• URL이 절대 안 바뀜 (영구 호스팅)
• 이미지 100개 이상도 무료
• 폴더 구조로 정리 가능 (단원별 정리)
• Firebase 배포할 때도 같이 사용 가능

방법 3: Base64 인코딩 (오프라인/소형 이미지)

작은 아이콘이나 로고를 HTML 파일 안에 직접 넣는 방법입니다. 외부 URL 필요 없이 파일 하나로 완결됩니다.

변환 방법

  1. base64-image.de 접속
  2. 이미지 업로드 → Base64 코드 자동 생성
  3. "Copy image" 클릭 → HTML에 붙여넣기

// Base64 사용 예시

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU..." width="50">


// 교구 데이터에서

image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU..."

⚠️ 주의

Base64는 파일 크기가 약 33% 커집니다. 50KB 이하 이미지에만 사용하세요. 큰 사진은 드라이브나 GitHub이 낫습니다.

이미지 크기 조절 & 최적화

/* CSS로 크기 제한 (반응형) */

.question-img { max-width: 100%; height: auto; max-height: 200px; }


/* HTML에서 직접 지정 */

<img src="..." style="max-width:300px; border-radius:8px;">

추천 이미지 사이즈:

  • 퀴즈 문항 이미지: 가로 600px 이하
  • 카드 이미지: 가로 200px 이하
  • 배경/장식: 가로 800px 이하
  • 아이콘: 가로 50~80px

🔗 관련 교구 (이미지 활용 예시)

HTML 교구에 이미지 PNG 넣는 3가지 방법. 구글 드라이브, GitHub, Base64. 단계별 가이드와 코드 예시. 이미지 크기 조절 팁.
현직 고교 교사가 전하는 통합사회·경제의 정석. 고퀄리티 수업 PPT와 HTML 시뮬레이션 교구, 생생한 여행 기록을 통해 사회를 풀어냅니다.