HTML 독학 가이드 4 - 이미지와 멀티미디어
텍스트만 있는 웹 페이지는 재미없죠? 이미지, 동영상, 오디오를 넣으면 훨씬 풍부해져요. HTML로 멀티미디어를 다루는 건 생각보다 쉽습니다. 태그 하나면 끝이에요!
img 태그 - 이미지
가장 많이 쓰는 태그 중 하나예요.
기본 사용법
<img src="photo.jpg" alt="사진 설명">실행 결과:
src: 이미지 파일 경로 (필수!)alt: 이미지 설명 (필수! SEO와 접근성에 중요)
alt는 이미지가 안 뜰 때 대신 보이는 텍스트예요. 시각장애인용 스크린 리더도 읽어줍니다.
이미지 크기 조절
<!-- 픽셀 단위 -->
<img src="photo.jpg" alt="사진" width="300" height="200">
<!-- 비율 유지하려면 하나만 지정 -->
<img src="photo.jpg" alt="사진" width="300">실행 결과:
팁: CSS로 크기 조절하는 게 더 좋아요. 나중에 배울 거예요.
이미지 경로
<!-- 같은 폴더 -->
<img src="photo.jpg" alt="사진">
<!-- 하위 폴더 -->
<img src="images/photo.jpg" alt="사진">
<!-- 상위 폴더 -->
<img src="../photo.jpg" alt="사진">
<!-- 절대 경로 -->
<img src="/images/photo.jpg" alt="사진">
<!-- 외부 이미지 -->
<img src="https://example.com/photo.jpg" alt="사진">이미지에 링크 걸기
<a href="https://www.example.com">
<img src="logo.jpg" alt="회사 로고">
</a>실행 결과:
이미지를 클릭하면 링크로 이동합니다
이미지를 클릭하면 링크로 이동해요.
video 태그 - 동영상
HTML5부터 동영상을 쉽게 넣을 수 있어요.
기본 사용법
<video src="movie.mp4" controls></video>src: 동영상 파일controls: 재생 버튼, 볼륨 등 컨트롤 표시
다양한 속성
<video src="movie.mp4"
controls
width="640"
height="360"
autoplay
loop
muted
poster="thumbnail.jpg">
</video>autoplay: 자동 재생 (소리 없을 때만 작동)loop: 반복 재생muted: 음소거poster: 재생 전 보이는 썸네일
여러 포맷 지원
브라우저마다 지원하는 포맷이 달라요.
<video controls width="640">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
동영상을 재생할 수 없습니다.
</video>하나라도 재생되면 나머지는 무시돼요.
audio 태그 - 오디오
음악이나 효과음을 넣을 수 있어요.
기본 사용법
<audio src="song.mp3" controls></audio>다양한 속성
<audio controls autoplay loop>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
오디오를 재생할 수 없습니다.
</audio>iframe - 외부 콘텐츠 삽입
유튜브 동영상이나 구글 지도를 넣을 수 있어요.
유튜브 동영상
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
allowfullscreen>
</iframe>유튜브에서 “공유 → 퍼가기” 클릭하면 코드가 나와요.
구글 지도
<iframe
src="https://www.google.com/maps/embed?pb=..."
width="600"
height="450"
frameborder="0">
</iframe>구글 지도에서 “공유 → 지도 퍼가기” 클릭!
figure와 figcaption
이미지에 설명을 붙일 수 있어요.
<figure>
<img src="mountain.jpg" alt="산 풍경">
<figcaption>설악산의 아름다운 풍경</figcaption>
</figure>실행 결과:
의미적으로 올바른 마크업이에요.
실전 예제
갤러리 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>사진 갤러리</title>
</head>
<body>
<h1>내 사진 갤러리</h1>
<figure>
<img src="photo1.jpg" alt="풍경 사진 1" width="300">
<figcaption>제주도 한라산</figcaption>
</figure>
<figure>
<img src="photo2.jpg" alt="풍경 사진 2" width="300">
<figcaption>강릉 바다</figcaption>
</figure>
<figure>
<img src="photo3.jpg" alt="풍경 사진 3" width="300">
<figcaption>서울 야경</figcaption>
</figure>
</body>
</html>실행 결과:
내 사진 갤러리
동영상 소개 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제품 소개</title>
</head>
<body>
<h1>신제품 소개</h1>
<h2>제품 이미지</h2>
<img src="product.jpg" alt="신제품" width="400">
<h2>제품 소개 영상</h2>
<video controls width="640">
<source src="intro.mp4" type="video/mp4">
동영상을 재생할 수 없습니다.
</video>
<h2>자세한 정보</h2>
<p>더 많은 정보는
<a href="details.html">여기</a>를 클릭하세요.
</p>
</body>
</html>반응형 이미지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>반응형 이미지</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>반응형 이미지</h1>
<img src="large-photo.jpg" alt="큰 사진">
<p>창 크기를 조절해보세요. 이미지가 자동으로 맞춰집니다.</p>
</body>
</html>이미지 포맷
어떤 포맷을 써야 할까요?
- JPEG (.jpg): 사진 (용량 작음, 투명 불가)
- PNG (.png): 로고, 아이콘 (투명 가능)
- GIF (.gif): 애니메이션
- WebP (.webp): 최신 포맷 (용량 작고 품질 좋음)
- SVG (.svg): 벡터 이미지 (확대해도 깨지지 않음)
자주 하는 실수
1. alt 빠뜨리기
<!-- 나쁜 예 -->
<img src="photo.jpg">
<!-- 좋은 예 -->
<img src="photo.jpg" alt="사진 설명">2. 이미지 경로 틀리기
<!-- 틀림: 파일명 대소문자 구분 -->
<img src="Photo.jpg" alt="사진">
<!-- 실제 파일명: photo.jpg -->
<!-- 맞음 -->
<img src="photo.jpg" alt="사진">3. 너무 큰 이미지 사용
<!-- 나쁜 예: 10MB 이미지 -->
<img src="huge-photo.jpg" alt="사진">
<!-- 좋은 예: 압축하거나 리사이즈 -->
<img src="optimized-photo.jpg" alt="사진">이미지는 웹 성능에 큰 영향을 줘요. 적절한 크기로 최적화하세요!
접근성 고려사항
의미 있는 alt 텍스트
<!-- 나쁜 예 -->
<img src="cat.jpg" alt="이미지">
<!-- 좋은 예 -->
<img src="cat.jpg" alt="털실로 노는 하얀 고양이">장식용 이미지
<!-- 장식용이면 alt를 비워두세요 -->
<img src="decoration.png" alt="">다음 단계
다음 글에서는 리스트와 테이블을 배웁니다. 목록을 만들고 표 형태로 데이터를 정리하는 방법을 알아볼 거예요.
이미지와 동영상은 웹 페이지를 생동감 있게 만들어요. 적절히 활용하세요!
HTML 독학 가이드 시리즈:
← 블로그 목록으로