7. epub 만들기_3
html 이해하기
sigil 작업 공간엔 모든 텍스트가 <p> </p> 태그로 묶여있다. 모든 텍스트가 동일한 형태로 보인다. 내 전자책 대제목은 본문 내용보다 커야 하고, 소제목은 다른 폰트 그리고 푸른색으로 설정하고 싶다. 그렇다면 <p> 태그가 아닌 다른 태그로 묶어야 한다. 다른 태그는 무엇이 있고, 어떻게 해야 하는지 알기 전에 기본을 짚으려고 한다.
html에선 기본 규칙이 있다. 로마에 가면 로마법을 따르라는 말이 있지 않은가. 규칙을 지켜야 한다.
1. 태그를 열었으면, 꼭 닫아야 한다.
방문을 열고 다니면, 어른들은 "꼬리가 왜 이리 길어"라고 잔소리했다. sigil에서도 태그를 열고 다니면 잔소리(오류 메시지)한다. 태그를 열었다면, 닫아야 한다. 처음에 '귀찮게 꼭 닫아야 하나?' 라고 생각했었다. 근데 하라는데 어쩌겠나...꼭 규칙을 따르자.
닫지 않으면 텍스트가 흐른다. 잘 닫고 다니자가령 이런 식이다
틀린 표현: <p> 꼬리가 왜 이리 길어
알맞은 표현: <p> 꼬리가 왜 이리 길어 </p>
닫는 문은 /가 추가된다. 아주 기본적이고 단순한 규칙이다.
2. 열고 다니는 문도 있다.
특정 태그는 문을 닫지 않는다. 자동문처럼 알아서 닫힌다. 이런 애들은 감싸는 역할이 아니라 그 자체로 하나의 독립적인 요소를 표현한다. 가장 많이 사용하는 태그는 <img>다. 그 외 <br>, <hr> 태그 등이 있다.
<img> 이미지 태그는 이미지를 삽입할 때, <br> 태그는 강제로 줄 바꿈을 할 때, <hr> 태그는 구분 선을 넣을 때 사용한다.
출간 했던 '57년생 아빠가 쓴 스위스 기행문' 내용 일부분이다.실제 작업했던 파일을 참고해 설명하자면, img와 br만 하나씩 있고, p와 i는 두 개씩 있다. <i>는 기울기 태그다.
3. 태그를 포개는 순서도 있다.
러시아 마트료시카 인형을 생각해보자. 작은 인형을 중간 인형 안에 넣고, 그 인형을 다시 큰 인형 안에 넣는다. 이 인형들을 다시 꺼낼 때는 어떻게 할까? 당연히 가장 바깥쪽 큰 인형부터 열고, 중간 인형을 꺼낸 다음, 마지막으로 안쪽 작은 인형을 꺼낸다. html도 같은 원리다.
이 글자는 굵게 표시된다.위 텍스트를 html로 표현하려면 아래와 같이 값을 넣어야 한다.
알맞은 표현: <p>이 글자는 <b>굵게</b> 표시된다.</p>
1. 큰 인형 <p> 열기
2. 그 안에 작은 인형 <b> 넣기
3. 작은 인형 </b> 닫기
4. 큰 인형 </p> 닫기
틀린 표현: <p>이 글자는 <b>굵게</p></b>
이건 마치 작은 인형을 꺼내기도 전에 큰 인형을 닫아버린 것과 같다.
태그를 여닫는 순서는 '가장 나중에 연 것을 가장 먼저 닫는다' 원칙만 기억하면 된다.
4. 태그는 꾸밀 수 있다
레고 조각에 스티커를 붙이면, 이 레고의 역할은 같지만 보이는 디자인은 달라진다. 마찬가지로 기본 태그에 '속성(attribute)'이라는 추가 정보를 넣으면 태그의 동작이나 모양을 바꿀 수 있다.
예를 들어, 글자 색을 빨간색으로 바꾸고 싶다면 아래처럼 입력하면 된다.
<p style="color: red;">이 문장은 빨간색으로 보인다!</p>
이 문장은 빨간색으로 보인다!하나의 태그에 여러 속성을 넣을 수도 있다.
1. <p>이것은 평범한 문장입니다.</p>
2. <p style="color: blue; font-size: 20px;">이것은 평범함을 거부한 문장입니다!</p>
font-size:20px;을 추가했다style="color: red;" / style="color: blue; font-size: 20px;" 이 부분이 속성이다. 보통 속성은 큰따옴표로 감싼다. 이 친구는 'p로 감싼 문장을 빨간색/20px 크기 파란색으로 보여줘'라고 명령하고 있다.
그럼 '다름을 줄 때마다 속성값을 넣어야 하나?'라고 궁금할 수 있다. 이땐 class라는 기능을 활용할 건데, 이 내용은 다음 장에서 소개할 예정이다. 간략히 설명하자면 css(cascading style sheets)라는 별도 스타일 언어를 사용한다. css는 html의 '디자인' 부분을 담당하는데, 마치 집의 구조(html)와 인테리어(css)를 분리하는 것과 같다.
이미지는 <img src="풍경.jpg" alt="스위스 풍경 사진"> 라고 입력하면 된다.
src="풍경.jpg"는 '이 이미지 파일을 찾아와'라는 의미고, alt="스위스 풍경 사진"은 '이미지가 안 보일 때, 이 설명을 보여줘'라는 의미다. 속성은 항상 이름="값" 형태로 작성한다.
sigil에서 자주 사용하는 속성은 정해져 있다. 물론, 특수한 기능/디자인을 구현하는 html 태그가 필요할 수도 있다. 그땐 gpt한테 물어보면 된다. 어려운 것 없다. sigil 작업 공간에 어떤 식으로 html 태그를 넣는지만 알고 있다면, 자유롭게 전자책 디자인을 할 수 있다.
html은 밑그림만 그린다고 생각하면 된다. 색칠은 css가 한다.
다음 편에 계속...
