전자책 중앙 정렬 완벽 가이드: 초보자도 쉽게 따라 할 수 있는 방법
안녕하세요, 여러분! 오늘은 많은 분들이 고민하시는 전자책 중앙 정렬 문제를 확실히 해결할 수 있는 방법을 알려드릴게요. 저도 전자책을 처음 만들 때 중앙 정렬이 제대로 안 돼서 애먹었던 기억이 있어요. 그래서 오늘은 초보자도 5분 안에 따라 할 수 있도록, 최대한 쉽게 설명드리겠습니다.
---
1. 중앙 정렬을 위한 HTML & CSS 코드
먼저, 아래 코드를 복사해서 사용해보세요. 이 코드는 텍스트와 이미지를 모두 중앙에 정렬할 수 있는 방법이에요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>중앙 정렬 예제</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
text-align: center;
font-family: Arial, sans-serif;
}
.center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="center">
<h1>중앙 정렬된 텍스트</h1>
<p>여기에 전자책 내용을 입력하세요!</p>
<img src="이미지링크" alt="중앙 정렬된 이미지" style="max-width: 300px;">
</div>
</body>
</html>
---
2. 따라 하기 쉬운 설정 방법
1. HTML 편집기를 열어 위 코드를 복사하고 붙여넣으세요.
(추천 도구: Notepad++ 또는 Visual Studio Code)
2. 내용 수정하기
<h1> 태그 안에 제목을 입력하세요.
<p> 태그 안에 내용을 입력하세요.
이미지 URL을 <img> 태그의 src 속성에 넣어주세요.
3. 파일 저장
파일 이름을 index.html로 저장하세요.
UTF-8 인코딩으로 저장하는 걸 잊지 마세요!
4. 브라우저에서 확인하기
저장한 HTML 파일을 더블클릭하면 브라우저에서 바로 확인할 수 있어요.
---
3. 전자책 제작 꿀팁
텍스트 크기 조절:
필요하면 <h1> 태그 대신 <h2>나 <h3>로 바꿔보세요. 글씨 크기가 달라집니다.
이미지 사이즈 최적화:
<img> 태그의 style 속성을 수정해 크기를 조절하세요. 예: style="max-width:
이 글이 여러분의 전자책 제작에 도움이 되셨다면 댓글로 알려주세요!
더 궁금한 점이 있다면 언제든지 질문해주세요. 😊
행복한 전자책 제작 되세요!