8. epub 만들기_4
css 설정하기
'트랄랄레로 트랄랄라', '퉁퉁퉁퉁 사후르', '브르르브르르 빠따삠' 뭔 염병할 외계어가 sns를 장악했다. 짧은 영상 하나에 온갖 괴상한 소리와 리듬, 표정이 쏟아진다. 어린 친구들은 이 밈이 웃기다 뭐다 하는데 나만 즐기지 못하는 것 같아 '늙었나?' 싶다가도, 여전히 이게 왜 웃긴지 모르겠다.
이 밈을 몇 번이나 본 기억이 있다는 건... 나도 이미 쇼츠에 중독된 거다. 딱히 기억도 안 난다. 언제부터였는지. 얼마나 봤는지. 그저 알고리즘이 던지는 영상들을 멍하니 넘기고 있었을 뿐이다.
어느 순간, 손가락이 멈췄다.
티위티 캐릭터를 모래로 색칠하는 영상이다. 그냥 모래를 막 뿌리는 게 아니다. 마치 분판 인쇄처럼 색이 섞이지 않도록, 색깔별로 나눠진 스티커를 하나씩 떼면서 그 위에 모래를 뿌린다. 노란색 얼굴 부분만 먼저 떼고, 거기만 노란 모래를 덮는 식이다.
이 영상을 보고 아 css 설명할 때 쓰면 되겠다! 라고 번뜩였다. 그래서 이번 편은 이렇게 시작한다.
1. 지금까지 본문 내용을 잘 입력했다면, 색칠할 단계다. 우선 본문 내용과 css와 연동하자.
...
아니지. 우선 css가 뭔지부터 알아야 한다. 간단히 설명하자면,
css는 전자책 본문(html)에 디자인과 형식을 입히는 도구다. 글자 크기, 줄 간격, 정렬, 여백 같은 스타일 요소를 설정할 수 있다. 전자책 뷰어는 이 스타일 정보를 읽어 화면에 맞게 콘텐츠를 표시한다. 즉, css는 epub 파일을 어떤 기기에서 보더라도 글이 일정한 모양으로 보이게 도와준다.
티위티 캐릭터 밑그림이 있는 스티커 밑판 위에, 같은 색 영역의 스티커를 떼고 그 위에 모래를 뿌리는 작업. css도 비슷하다. 글 전체를 한꺼번에 꾸미는 게 아니라, 어디에 어떤 스타일을 입힐지 하나씩 골라서 적용한다.
예를 들어, 문단에는 줄 간격을 조금 넓혀주고, 제목은 글자를 키우고 가운데 정렬한다. 마치 얼굴에는 노란 모래, 부리와 발바닥엔 주황 모래, 눈에는 푸른 모래를 따로 뿌리는 것처럼. 스티커를 떼는 건 '어디에 적용할지'를 정하는 선택자고, 모래를 뿌리는 건 '어떤 스타일을 줄지'를 정하는 속성이다.
다시 돌아가서
1. 지금까지 본문 내용을 잘 입력했다면, 색칠할 단계다. 우선 본문 내용과 css와 연동하자.
참고: text와 style 폴더 속 파일명은 본인이 지정한 이름에 따라 다를 수 있음1. 왼쪽 패널에서 "OEBPS/Text" 폴더를 선택하고, 그 안에 있는 "section.xhtml" 파일을 클릭하여 연다.
2. 상단 메뉴에서 "Styles"를 클릭한 후, "스타일시트 연결..." 옵션을 선택한다.
3. 열린 창에서 "OEBPS/Styles/230202.css" 파일을 찾아 체크박스를 선택한다.
4. "확인" 버튼을 클릭하여 스타일시트를 연결한다.
2. 아래 메모장을 다운 받고 메모장에 있는 전체 내용을 스타일시트에 복붙한다.
1. 스타일시트를 활성화하면
2. 빈공간이 뜬다. 여기에 메모장 내용을 전부 복붙한다.
간략히 설명하자면,
1. /* 이렇게 생긴 글 초록색 문구*/는 css 코드가 아니라 설명이다. 지워도 괜찮다.
2. p는 본문 단락에 적용되는 스타일이다. 글자 크기(font-size), 줄 간격(line-height), 정렬 방식(text-align), 문단 간 간격(margin)을 조절한다.
3. h1 ~ h4는 제목의 계층을 의미한다. 숫자가 작을수록 더 큰 제목이다. 각 제목은 크기, 색상, 정렬 방식이 조금씩 다르다.
4. img는 이미지의 너비를 화면에 맞게 100%로 설정해서 잘리지 않게 보여준다. 위아래 간격도 추가되어 있다.
5. a는 링크 스타일이다. 밑줄을 없애고, 글자 색은 주변 글과 똑같이 보이게 설정했다. (과하게 튀지 않도록)
6. table, td, th는 표의 테두리를 정리하고, 셀 간격과 글자 크기를 보기 좋게 조정했다.
만약 여기서 h1 색을 red로 설정하고 싶다면, brown; 문구를 red;로 수정하면 된다. 독특한 색을 쓰고 싶다면 '색상 코드(color code)'를 입력하면 된다. 예를들어 옅은 보라색을 쓰고 시다면 '#a398d1;'을 넣는다. 색상 코드는 구글에서 쉽게 찾을 수 있다.
구글에 색상선택 도구로 원하는 색 코드를 찾아 넣으면 된다.#. 여기까지 따라왔다면, 느꼈을 거다. css로 표현할 수 있는 것은 무궁무진하다.
지금까지는 전자책의 본문과 제목, 이미지, 표처럼 읽기 위한 구조에 필요한 최소한의 스타일만 다뤘다.
하지만 css는 거기서 멈추지 않는다. 몇 가지 속성만 더 알아도, 전자책의 인상은 완전히 달라진다.
예를 들어,
이렇게 설정하면,
class를 css에서 정한 box로 설정한다.말인 즉슨, 속성 값만 알고 있다면 원하는 디자인으로 전자책을 꾸밀 수 있다.
적재적소에 맞는 속성은 어떻게 찾을까?
요즘 모든 질문에 이 대답만 하면 해결된다. 다소 무책임해 보일 수 있는데 확실한 답변이다.
'gpt한테 물어보면 된다'
4. 설정한 css로 본격적으로 본문 꾸미기
다음편에 계속...
