내가 맨날 까먹어서 씀... 남한테 보여주려고 쓰는 게 아니라 불친절함
(+ 2023.02 수정... css와 html의 모든 id(#)를 class(.)로 갈아끼움, 정규식 사용방법)
준비물: 코코포리아에서 추출한 html 로그
Sigil
적당한 표지
1. 폰트 추가
Fonts 폴더 우클릭 > [기존 파일 추가] > 폰트 파일 추가 후 (ttf, otf 상관x)
Style 폴더 우클릭 > [빈 스타일시트 추가] 눌러서 CSS 파일 하나 생성
저는 걍 리디명조가 편한듯... 코펍은 볼드 먹이면 안 예쁘고 볼드용 서체를 따로 지정해줘야하는 게 번거로워...
@font-face{
font-family: "ridi"; /* 밑에서 지정할 이름 */
src : url(../Fonts/RIDIBatang.otf) /* RIDIBatang.otf 부분에 파일명 쓰세요 */
}
2. 스타일 설정
h1, h2, h3, p 정도만 하면.. 될 것 같음 아까 그 스타일시트(.css) 밑에 엔터쳐서 얘도 같이 쳐줘요
*{
font-family: ridi;
}
h1{
text-align: center; /* 가운데 정렬*/
padding-top : 10px;
padding-bottom : 10px;
}
h2{
text-align: center; /* 가운데 정렬 */
display : table; /* 제목 밑줄 */
border-bottom : solid 1px #000000;
padding-top : 20px;
margin : 10px auto 10px auto;
padding-bottom : 10px;
}
h3{
text-align: center;
border: none;
background-color: rgba(100,100,100,0.1);
border-radius: 10px;
padding: 10px;
margin: 0px auto;
}
.handout{
padding: 15px;
background-color: #FFFFFF;
}
.secret{
padding: 15px;
background-color: #363636;
}
.name{
text-align: center;
display : table; /* 제목 밑줄 */
border-bottom : solid 1px #888888;
margin : 10px auto 10px auto;
padding-bottom : 10px;
}
p{
line-height: 1.6em;
}
.pl{
text-indent: 0.5em; /* 들여쓰기 */
}
.gm{
color: #888; /* 원하는 색상코드 쓰세요 */
text-indent: 0.5em; /* 들여쓰기 */
}
그리고 본문 html 파일 우클릭 > [Stylesheet에 연결] > 해당 css파일로 연결하기
제가 설정한 건 대충 이런데 뜯어서 커스텀해주세요
- h1: 짱큰제목(가운데정렬)
- h2: 큰제목(가운데정렬, 밑줄)
- h3: 작은제목
- .handout: 핸드아웃용... 배경이 흰색임
- .secret: 비밀용... 배경이 검은색임
- .name: 핸드아웃용 제목(밑줄)
- p: 본문(p라고 이름 붙인 애들) 전체 적용
- .pl: 일반검은글씨
- .gm: 회색글씨
3. 표지 추가
이미지에 표지 넣고
[도구] > [표지 추가] > 원하는 거 더블클릭 -> 파일 누르면 제일 먼저 보이는 표지 (속표지)
우클릭 > [표지 추가] -> 내 서재에서 보이는 겉표지
저는 요즘 1400px*2000px으로 작업해요
4. 메타데이터 추가
[도구] > [메타데이터 편집기]
제목, 저자 정도만 설정해도 잘 보임.. 심심하면 언어도 넣고 날짜도 넣고
5. 본문 편집
주의: 거의 모든 태그는 여는 태그 <p>가 있으면 닫는 태그 </p>도 있습니다 (예외: br, hr, img 정도)
대충
캐릭터 : 야 이거 끝내준다
같이 편집하고 싶음... 저러려면
<p><b>캐릭터</b> : 야 이거 끝내준다</p>
처럼 되어야 함
Sigil의 최강짱툴 찾기/바꾸기 로 죄다 바꿔주는데 (메인로그라고 상정)
1차 수선!!!!!!!
(0)
일단 안 하면 귀찮은 거
모든 [メイン]을 [메인]으로 바꿔줍니다
(1)
<span> [메인]</span>
<span>
을 <b> 로 바꿔주고
(2)
</span> :
<span>
을 </b> : 로 바꿔주고
(3)
</span>
</p>
을 </p>로 바꿔주면 1차 수선 끝
저장하세요
2차 수선!!!!!
(4)
회색글씨 먼저 바꿔줄 거예요 보통 GM이나 system 같은 거
<p style="color:#e91e63;"><b>꿩</b>
이런 게 있으면 통째로
<p class="gm"><b>꿩</b>
으로 바꿔줌
(5)
찾기/바꾸기가 최강짱툴인 이유 "정규식"
...원리에 대한 설명은 길어져서 접음 .. 자세한 게 궁금하다면 구글에 "Sigil 정규식" 쳐보시길
말하면 귀찮고 어려운데 특정 명령어를 인식해서 찾아주는 거임
일단 제일 많이 쓰는 거
- 전체를 찾아라: (.*)
- 위에서 찾은 걸 불러와라: \1 \2 \3 ...
예를 들어 <p style="color:#e91e63;"> <p style="color:#888888;"> <p style="color:#FFF;">
- 찾기: <p style="color:(.*)">
- 바꾸기: \1
를 입력하면 <p style="color:어쩌고"> 인걸 전부 찾아서 첫번째 어쩌고인 #e91e63;를 출력해주는 원리임
거두절미하고
위 캡처처럼 방식을 "기본 방식"이 아니라 "정규식"으로 바꿔준 뒤
찾기: <p style="color:(.*)">
바꾸기: <p class="pl">
를 입력해서 다 바꿔줌
(웬만하면 정규식 쓰시기 전에 돋보기(찾기) 버튼 눌러서 제대로 찾아지는지 확인하기)
2차 수선 끝
저장하세요
마지막 수선!!!!
(6)
[편집] > [현재 커서 위치에서 나누기] 이용해서 적당히 씬별로 컷하기
그리고 씬제목에는 <h1> ~ <h3> 태그 적당히 달아두기
핸드아웃 추가할 곳에는
<div class="handout"> (핸아제목이랑내용이랑) </div>
핸드아웃 제목 추가할 곳에는
<p class="name"> (핸아제목) </p>
6. 목차 설정
[도구] > [목차] > [목차 만들기]
h1~h3 태그 잘 했으면 알차게 설정되어 있습니다... 확인 눌러줍시다 빼고 싶으면 편집하시면 됨...
이정도면 알아서 됩니다