EPUB에서 기본적인 태그: <link> (스타일시트 연결 태그)
EPUB과 HTML 문서에서 디자인과 서식을 적용하는 필수적인 태그가 바로 <link> 태그입니다. 전자책을 만들 때, 텍스트의 스타일을 통일하고 가독성을 높이기 위해 반드시 사용해야 합니다. 오늘은 EPUB에서 <link> 태그의 역할과 사용법을 소개하겠습니다!
1. <link> 태그란?
- 외부 스타일시트(CSS)를 문서에 연결하는 태그입니다.
- EPUB에서 모든 페이지의 디자인을 통일하는 중요한 역할을 합니다.
- CSS 파일을 통해 폰트, 글자 크기, 색상, 여백, 줄 간격 등을 설정할 수 있습니다.
2. <link> 태그의 기본 사용법
📌 기본 예제
<head>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>👉 이 코드가 하는 일:
- href="../Styles/Style0001.css" → Style0001.css 파일을 불러옴
- type="text/css" → 연결하는 파일이 CSS 문서임을 명시
- rel="stylesheet" → 문서의 스타일시트로 적용됨
3. EPUB에서 <link> 태그를 사용하는 방법
EPUB의 각 페이지(XHTML 문서)에서 모든 스타일을 일관되게 적용하려면 반드시 <link> 태그를 사용해야 합니다.
✅ EPUB 문서에서 스타일시트 연결하기
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EPUB 스타일 적용 예제</title>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>EPUB 스타일 적용 테스트</h1>
<p>이 문장은 스타일시트를 통해 서식이 적용됩니다.</p>
</body>
</html>EPUB 스타일 적용 테스트
이 문장은 스타일시트를 통해 서식이 적용됩니다.
👉 위 코드를 적용하면, EPUB 내부의 모든 페이지에서 동일한 스타일이 유지됩니다.
📌 수강생들에게 강조하는 핵심 사항
전자책을 제작할 때 반드시 스타일시트(Styles/Style0001.css)와 텍스트 폴더 속의 모든 페이지를 연결해야 합니다.
✅ 모든 XHTML 파일에서 같은 CSS 파일을 불러와야 합니다!
✅ 파일 경로를 정확하게 설정해야 합니다!
✅ 스타일이 제대로 적용되는지 EPUB 리더에서 꼭 확인하세요!
4. <link> 태그를 활용한 다양한 예제
✅ 여러 개의 스타일시트 연결하기
<head>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
<link href="../Styles/CustomStyles.css" type="text/css" rel="stylesheet"/>
</head>👉 여러 개의 CSS 파일을 불러와 스타일을 조합할 수도 있습니다.
✅ 특정 미디어(예: 모바일, 인쇄)에서 적용할 스타일 지정하기
<link href="../Styles/MobileStyles.css" type="text/css" rel="stylesheet" media="screen and (max-width: 600px)"/>👉 화면 너비가 600px 이하일 때(모바일 환경) 적용되는 스타일을 지정할 수 있습니다.
5. <link> 태그 사용 시 주의할 점
❌ 잘못된 예제 (<style> 태그와 혼동하면 안 됨)
<head>
<style>@import url("../Styles/Style0001.css");</style>
</head>👉 <style> 태그 안에서 @import를 사용하는 방법도 있지만, EPUB에서는 <link> 태그를 사용하는 것이 더 일반적입니다.
✅ 올바른 예제
<head>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>✅ CSS 파일이 EPUB 내부 경로에 있어야 합니다!
- EPUB 폴더 구조에서 Styles/Style0001.css 파일이 존재하는지 꼭 확인하세요!
- 파일 경로가 다르면 CSS가 적용되지 않을 수 있습니다.
6. 마무리하며
<link> 태그는 EPUB 문서에서 디자인을 통일하는 가장 중요한 요소입니다.
스타일을 올바르게 적용하면, 독자가 더 편하게 읽을 수 있는 깔끔한 전자책을 만들 수 있습니다.
📌 이제 여러분도 EPUB에서 <link> 태그를 활용해 더욱 정돈된 전자책을 만들어보세요!
✅ 다음 포스팅에서는 이미지 삽입을 위한 <img> 태그를 소개하겠습니다! 기대해주세요! 😊
해시태그
#EPUB태그 #스타일시트연결 #전자책제작 #HTML기초 #EPUB가이드
'EPUB 태그 배우기' 카테고리의 다른 글
| 📌 HTML <span> 태그 완벽 가이드 (3) | 2025.02.17 |
|---|---|
| EPUB에서 기본적인 태그: <strong> 및 <em> (강조 태그) 😊 (1) | 2025.01.31 |
| EPUB에서 기본적인 태그: <h1> ~ <h6> (제목 태그) (6) | 2025.01.30 |
| EPUB에서 기본적인 태그: <p> (문단 태그) (0) | 2025.01.29 |
| EPUB에서 기본 중의 기본 태그: <br/> (1) | 2025.01.28 |
