SMALL

전자책을 제작할 때 이미지를 삽입하여 가독성을 높이고 콘텐츠를 더욱 풍부하게 만들기 위해 <img> 태그를 사용합니다. 오늘은 EPUB에서 이미지를 추가하는 방법과 최적화 방법을 알아보겠습니다!

1. <img> 태그란?

HTML 및 EPUB에서 이미지를 문서에 삽입하는 태그입니다.
EPUB 내에서 표지 이미지, 본문 삽입 이미지, 장식 요소 등을 표현하는 데 사용됩니다.
src 속성을 사용하여 이미지 파일의 경로를 지정합니다.

2. <img> 태그의 기본 사용법

📌 기본 예제

<img src="../Images/sample.jpg" alt="샘플 이미지" />

👉 이 코드가 하는 일:

src="../Images/sample.jpg" → Images 폴더에 있는 sample.jpg 파일을 불러옴
alt="샘플 이미지" → 이미지를 설명하는 대체 텍스트(스크린 리더 지원)

3. EPUB에서 <img> 태그를 사용하는 방법

EPUB의 각 페이지(XHTML 문서)에서 이미지를 올바르게 불러오기 위해 <img> 태그를 사용합니다.

✅ EPUB 문서에서 이미지 삽입하기

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>EPUB 이미지 적용 예제</title>
</head>
<body>
    <h1>EPUB 이미지 테스트</h1>
    <img src="../Images/cover.jpg" alt="책 표지 이미지" width="400" />
</body>
</html>

EPUB 이미지 테스트

👉 위 코드를 적용하면, EPUB 내부의 모든 페이지에서 동일한 이미지가 삽입됩니다.

📌 수강생들에게 강조하는 핵심 사항
전자책을 제작할 때 반드시 이미지 파일(Images 폴더 내)을 올바르게 저장하고 경로를 지정해야 합니다.
✅ 모든 XHTML 파일에서 같은 이미지 파일을 불러와야 합니다!
✅ 파일 경로를 정확하게 설정해야 합니다! (****../Images/sample.jpg****)
✅ 이미지가 EPUB 리더에서 정상적으로 표시되는지 꼭 확인하세요!

4. <img> 태그를 활용한 다양한 예제

✅ 이미지 크기 조절하기

<img src="../Images/example.jpg" alt="설명" width="300" height="200" />

👉 이미지 크기를 width, height 속성을 통해 조절 가능

✅ CSS를 이용해 스타일 적용하기

<style>
    img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
</style>
<img src="../Images/sample.jpg" alt="샘플 이미지" />

👉 이미지를 반응형으로 조절하여 모바일과 태블릿에서도 최적화 가능

✅ 이미지에 테두리(border) 추가하기

<img src="../Images/sample.jpg" alt="샘플 이미지" style="border: 2px solid black;" />

👉 테두리 두께 2px, 색상 black으로 설정

✅ 이미지에 그림자 효과 추가하기

<img src="../Images/sample.jpg" alt="샘플 이미지" style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" />

👉 그림자 위치 (5px, 5px), 흐림 정도 (10px), 투명한 검은색 그림자 적용

✅ 이미지 테두리를 둥글게 만들기

<img src="../Images/sample.jpg" alt="샘플 이미지" style="border-radius: 15px;" />

👉 모서리를 둥글게 15px 설정하여 부드러운 느낌 추가

✅ 완전한 원형 이미지 만들기

<img src="../Images/sample.jpg" alt="샘플 이미지" style="border-radius: 50%;" />

👉 정사각형 이미지를 원형으로 표시

5. <img> 태그 사용 시 주의할 점

❌ 잘못된 예제 (파일 경로 오류)

<img src="sample.jpg" alt="샘플 이미지" />

👉 EPUB 구조에서 ../Images/sample.jpg처럼 폴더 경로를 명확히 지정해야 합니다.

✅ 올바른 예제

<img src="../Images/sample.jpg" alt="샘플 이미지" />

✅ 이미지는 최적화된 파일을 사용하세요!

JPG, PNG, SVG 등 적절한 파일 형식을 사용
이미지 크기를 1MB 이하로 줄여 EPUB 파일 크기 최소화
alt 속성을 추가하여 접근성 강화

#EPUB태그 #이미지삽입 #전자책제작 #HTML기초 #EPUB가이드

LIST

저작자표시 비영리 변경금지

EPUB에서 기본적인 태그: <img> (이미지 삽입 태그) II