<![CDATA[
<div><p style="text-align: center"><a href="http://cafe.daum.net/subdued20club" target="_blank"><img src="https://t1.daumcdn.net/cfile/cafe/241CFE4A58F1FA621C" class="txc-image" border="0" id="A_241CFE4A58F1FA621CAAB5"/></a></p><p class="cafe-editor-text" style="text-align: center;">출처 :여성시대 간헐적단식중입니다</p></div><p><br></p><p><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 10pt;">이전글: </span><a href="http://cafe.daum.net/subdued20club/LxCT/256157" target="_blank" rel="noopener noreferrer" class="tx-link">http://cafe.daum.net/subdued20club/LxCT/256157</a><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">⁕글을 읽기전에!!!⁕<br></p><p style="text-align: center;">이북리더기는 자체 뷰어에서 글꼴, 두께, 기울기, 글씨 색깔 적용이 안됩니다!!</p><p style="text-align: center;"><span style="font-size: 10pt;">흑</span><span style="font-size: 10pt;">흑</span><br></p><p style="text-align: center;"><span style="font-size: 10pt;">난 내장된 북클럽 뷰어로 보니까 글꼴, 두께, 색깔(흑백인거 감안하고)는 적용되는데</span></p><p style="text-align: center;"><span style="font-size: 10pt;">그래도 기울기는 안돼.... </span></p><p style="text-align: center;">기울어진 글자를 보고싶다면 기울어진 폰트를 적용하면 될듯!!</p><p style="text-align: center;">⁕ <span style="font-size: 10pt;">⁕ </span><span style="font-size: 10pt;">⁕</span><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">이전에는 진짜 책 기본만 만들었다면</p><p style="text-align: center;">이번엔 좀 이쁘게 꾸며볼거야. </p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">⁕주의사항⁕</p><p style="text-align: center;"><br></p><p style="text-align: center;">시길이 원래 코드뷰, 북뷰가 있어서 코드창이 따로 있고 워드처럼 쓸 수 있는 창이 따로 있었는데</p><p style="text-align: center;">0.9.15버전 이후로 없어져서 코드창만 보여. 북뷰를 외부편집기로 만들었다는데<strike>....왜 그런 짓을 했는지 모르겠네.</strike></p><p style="text-align: center;">써봤는데 어렵고 짜증나. 그러니까 여시들은 0.9.14버전으로 다운받아ㅠㅠ</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">1. 기본</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/99B69F3A5F1AE14310" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="712" width="712" exif="{}" data-filename="주석 2020-07-24 220720.jpg" style="clear:none;float:none;" id="A_99B69F3A5F1AE143100C3F"/></p><p style="text-align: center;">빨간색 상자는 건드리면 안되는 거<br></p><p style="text-align: center;">파란색 상자는 '헤더'라고 하는데 입력하면 정보저장은 되는데 뷰어에서는 안 보이는 거.</p><p style="text-align: center;">똥색 상자는 '바디'라고 하고 뷰어에서 보이고 우리가 만지작 해야할거야.</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 10pt;">⁕</span>HTML는 <태그> ~본문~</태그> 이렇게 한 영역이야.</p><p style="text-align: center;">혹시 오류가 나면 <태그> ,</태그> 이렇게 한쌍으로 돼있는지 젤 먼저 살펴봐</p><p style="text-align: center;"><br></p><p style="text-align: center;">•<body></body>: 뷰어에서 보이는 내용</p><p style="text-align: center;">•<div></div>: 구역을 나눔<br></p><p style="text-align: center;">•<p></p>: 문단을 나눔<br></p><p style="text-align: center;">•<span></span>: 차지한 영역만큼만 인정<br></p><p style="text-align: center;">•<br/> : 줄바꾸기 (이건 단일로 쓴다. 바꾸고 싶은 줄 앞에다 쓰면 돼)</p><p style="text-align: center;"> </p><p style="text-align: center;"><span style="font-size: 10pt;">⁕</span>혹시 이북리더기 내에서 문단 사이 간격이 조정이 안된다싶으면 <span style="font-size: 10pt;"><p></p>로 문단이 나눠진게 아니라</span></p><p style="text-align: center;"><span style="font-size: 10pt;"><div></div>로 구역이 나눠진거야. Sigil 하단에 찾기/바꾸기 있으니까 그걸로 쉽게 수정할 수 있어.</span><br></p><p style="text-align: center;"><span style="font-size: 10pt;"> </span></p><p style="text-align: center;"><span style="font-size: 10pt;"><br></span></p><p style="text-align: center;"><span style="font-size: 10pt;"><br></span></p><p style="text-align: center;"><span style="font-size: 10pt;"><br></span></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">2. 스타일 <span style="font-size: 10pt;">적용하는 법</span></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 10pt;">•</span>인라인 스타일</p><p style="text-align: center;">태그 안에 직접 스타일 적용.</p><p style="text-align: center;"> </p><p style="text-align: center;">단점 : 많아 쓰면 코드창이 지저분해지고 하나하나 직접 넣어야돼</p><p style="text-align: center;"><br></p><p style="text-align: center;"><태그 style="태그 넣기"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/99A2DA375F1B05891F" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="900" width="900" exif="{}" data-filename="주석 2020-07-25 005937.jpg" style="clear:none;float:none;" id="A_99A2DA375F1B05891FCF57"/></p><p style="text-align: center;"><br></p><p style="text-align: center;">효과를 주고 싶은 영역에 저렇게 써주면 됌.</p><p style="text-align: center;">그럼 미리보기에서 그 영역만 바뀐걸 볼 수 있어.</p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/992BD23F5F1AEEFB1E" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="900" width="900" exif="{}" data-filename="주석 2020-07-24 231835.jpg" style="clear:none;float:none;" id="A_992BD23F5F1AEEFB1E182A"/></p><p style="text-align: center;">이건 <span>이 뭔지 보여주고 싶어서....<br></p><p style="text-align: center;">본문에서 특정단어에만 다른 효과를 주고 싶을 때 쓰면 되겠지?</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 10pt;">•</span> 외부 스타일</p><p style="text-align: center;"><br></p><p style="text-align: center;">-스타일시트 활용하기</p><p style="text-align: center;"><br></p><p style="text-align: center;">이건 스타일시트에 제목, 본문 등의 스타일을 한번에 짜놓고</p><p style="text-align: center;">섹션파일에 연결해서 일괄적으로 적용하는 거야.</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/997683475F1B0B8206" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="287" width="287" exif="{}" data-filename="주석 2020-07-25 012519.jpg" style="clear:none;float:none;" id="A_997683475F1B0B82068DBC"/></p><p style="text-align: center;"><br></p><p style="text-align: center;">왼쪽에 있는 폴더에서 styles → 빈 스타일시트 추가 누르기</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/9997CA485F1B0C1214" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="505" width="505" exif="{}" data-filename="주석 2020-07-25 012739.jpg" style="clear:none;float:none;" id="A_9997CA485F1B0C12142699"/></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">그럼 이렇게 스타일시트가 생성돼.</p><p style="text-align: center;"><br></p><p style="text-align: center;">이제 여기서 제목과 본문의 폰트 사이즈, 굵기, 색깔 등등을 한꺼번에 정할 수 있는거야.</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/999AA43B5F1B0FEB2D" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="393" width="393" exif="{}" data-filename="주석 2020-07-25 014401.jpg" style="clear:none;float:none;" id="A_999AA43B5F1B0FEB2D9918"/></p><p style="text-align: center;"><br></p><p style="text-align: center;">나는 첫번째 제목과 본문에 저렇게 스타일을 적용시킬거야. </p><p style="text-align: center;">제목 h1은 크기 2em, 빨간색, 굵게.</p><p style="text-align: center;">문단 p는 3em, 파란색, 굵게. </p><p style="text-align: center;">(이전 글을 보면 제목과 목차를 정했을 때 h1, h2, h3, h4 를 썼잖아. </p><p style="text-align: center;">저게 저거임) </p><p style="text-align: center;">태그{}사이에 아무거나 넣어주면 되고 태그 끝마다 꼭 ;붙여야대</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/99D14E345F1B10C919" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="326" width="326" exif="{}" data-filename="주석 2020-07-25 014701.jpg" style="clear: none; float: none;" id="A_99D14E345F1B10C9191DD9"/></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/99BAF0405F1B10B01D" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="410" width="410" exif="{}" data-filename="주석 2020-07-25 014715.jpg" style="font-size: 10pt; clear: none; float: none;" id="A_99BAF0405F1B10B01DCB06"/><br style="color: rgb(0, 0, 0); font-family: 돋움, Dotum, AppleGothic, sans-serif; font-size: 12px; text-align: start; background-color: rgb(232, 232, 232);"></p><p style="text-align: center;"><br></p><p style="text-align: center;">이제 저 양식을 적용하고 싶은 html 섹션 파일을 우클릭해서 연결시켜 주면 돼</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/999C3C395F1B114321" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="900" width="900" exif="{}" data-filename="주석 2020-07-25 014939.jpg" style="clear:none;float:none;" id="A_999C3C395F1B114321FCC2"/></p><p style="text-align: center;"><br></p><p style="text-align: center;">그럼 html파일 코드뷰에서 링크태그가 걸린 게 보이고</p><p style="text-align: center;">미리보기를 보면 스타일이 적용된게 보일거야!!</p><p style="text-align: center;"><br></p><p style="text-align: center;">이렇게 하면 돼!!</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">•추가 스킬<br></p><p style="text-align: center;"><br></p><p style="text-align: center;">선택자를 만들기!!</p><p style="text-align: center;"><br></p><p style="text-align: center;">위에 알려준건 하나의 양식이라 본문에 바로바로 적용된다면</p><p style="text-align: center;">선택자는 일종의 매크로라 스타일을 짜놓고 원하는 부분에만 적용시키는 거야.</p><p style="text-align: center;">위 부분하고 똑같이 섹션파일이랑 연결시키고!! </p><p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 13.3333px;">.tl{</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">font-size: 3em;</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">color: red;</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">}</span></p><p style="text-align: center;"><br></p><p style="text-align: center;">스타일시트에 이대로 넣고</p><p style="text-align: center;">태그는 넣고싶은거 바꿔서 넣고.</p><p style="text-align: center;">"t1" 은 내가 임의로 정해놓은 명령어니까 이건 여시들이 하고싶은대로 바꾸면 돼.</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/99E0F73C5F1B2C0C03" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="669" width="669" exif="{}" data-filename="주석 2020-07-25 034410.jpg" style="clear:none;float:none;" id="A_99E0F73C5F1B2C0C0315BE"/></p><p style="text-align: center;"></p><p style="text-align: center;">그리고 원하는 영역에다가 </p><p style="text-align: center;">class="t1" 을 넣어주면 </p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/9944DD415F1B2C5E03" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="530" width="530" exif="{}" data-filename="주석 2020-07-25 034534.jpg" style="clear:none;float:none;" id="A_9944DD415F1B2C5E03F376"/></p><p style="text-align: center;">이렇게 저 문단만 스타일이 적용된 걸 볼 수 있어. <br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">•스타일 태그 종류<br></p><p style="text-align: center;"><span style="font-size: 10pt;">(선택지</span><span style="font-size: 10pt;"> 중 하나 선택)</span><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">폰트 사이즈: font-size: (em, px)</p><p style="text-align: center;">폰트 색깔: color: <span style="font-size: 10pt;">(</span><span style="font-size: 10pt;">red, </span><span style="font-size: 10pt;">색상코드</span><span style="font-size: 10pt;">)</span></p><p style="text-align: center;">폰트 기울기: font-style: (normal, italic, oblique)</p><p style="text-align: center;">폰트 두께: font-weight: (normal, bold, 숫자)</p><p style="text-align: center;">행 간격: line-height: (%, px, pt, 숫자)</p><p style="text-align: center;">띄어쓰기 간격: word-spacing:(px, pt, cm, em)</p><p style="text-align: center;">자간 : letter-spacing: (px, <span style="font-size: 10pt;">pt, cm, em)</span></p><p style="text-align: center;">문단 정렬: text-align: (center, left, right, justify)</p><p style="text-align: center;">들여쓰기: text-indent: (px, pt, cm, em, %) </p><p style="text-align: center;"><span style="font-size: 10pt;">줄긋기: text-decoration: (overline, underline, line-through)</span></p><p style="text-align: center;"><span style="font-size: 10pt;"><br></span></p><p style="text-align: center;"> (px은 고정단위, em은 기본 글씨 크기에 따라 변하기 때문에 </p><p style="text-align: center;">em을 쓰는 걸 추천해.)</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">3. 폰트 글꼭 적용하기 </p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/99B9E93D5F1B12042C" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="317" width="317" exif="{}" data-filename="주석 2020-07-25 015241.jpg" style="clear:none;float:none;" id="A_99B9E93D5F1B12042C2E20"/></p><p style="text-align: center;"><br></p><p style="text-align: center;">먼저 폰트 폴더를 우클릭해서 다운로드 받은 폰트 파일을 넣어줘</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/99169A335F1B156F30" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="862" width="862" exif="{}" data-filename="주석 2020-07-25 020458.jpg" style="clear:none;float:none;" id="A_99169A335F1B156F30286E"/></p><p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 13.3333px;">@font-face{</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"> </span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"> font-family : "cat";</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"> </span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"> src : url(../Fonts/HoonWhitecatR.ttf);</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">}</span></p><p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 10pt;"> 그리고 난 이렇게 써줬어. </span><br></p><p style="text-align: center;"> font-family : "cat"; 이건 코드에 쓸 폰트 이름을 임의로 정해주는 거고 <span style="font-size: 10pt;"><br></span></p><p style="text-align: center;"> src : url(../Fonts/HoonWhitecatR.ttf); 이건 폰트 파일에 넣어준 경로야. 저기서 폰트 이름만 대문자 소문자 구분해서 </p><p style="text-align: center;">써주면 돼 <br></p><p style="text-align: center;"><br></p><p style="text-align: center;">또 다른 폰트 넣으려면 저거 첨부터 다시 쓰면 돼!! </p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/993AB33D5F1B161F06" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="755" width="755" exif="{}" data-filename="주석 2020-07-25 021007.jpg" style="clear:none;float:none;" id="A_993AB33D5F1B161F0604D5"/></p><p style="text-align: center;"><br></p><p style="text-align: center;">font-family: "cat";</p><p style="text-align: center;">그리고 h1 부분에 한 줄 끼어놓으면 미리보기에서 글꼴이 바뀐 걸 볼 수 있어. </p><p style="text-align: center;"><br></p><p style="text-align: center;">폰트 굵기와 기울기를 조정하려면 그걸 지원해주는 폰트인지 봐야해!!</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">그럼 여기까지.... </p><p style="text-align: center;"><br></p><p style="text-align: center;">또 팁을 주자면 16px=1em 이래!</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">그리고 폰트도 이북리더기에서 기본글꼴로 지정해야돼!!</p><p style="text-align: center;">이북리더기에서 다른 글꼴로 지정하면 그걸로만 보여!! </p><p style="text-align: center;"><br></p><p style="text-align: center;">하 진짜 끝...</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;">다음에 또 시간되면 글상자랑 이미지를 배경으로 두는 법 가져올게. </p><p style="text-align: center;">진짜 첨엔 간단하게만 만들려고 했는데 점점 욕심이 생겨.. </p><p style="text-align: center;"><br></p><p style="text-align: center;">문제시 빠르게 수정!!</p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p>
<!-- -->
]]>
카페 게시글
콧멍에트💛잇게짤털
[기타자료후기]
무료 프로그램 시길 Sigil로 나만의 이북 e-book 만들어보자!! -2탄: 심화속성편.
다음검색
첫댓글 여샤 진짜 나한테 필요했던 정보야....고마워!!
으아앗... 언젠가 이해할 수 있게 될 때 좋은 팁이 될 것 같아!
우와 고마워!!!
고마워 여샤 신기하다!!
우와 집가서 당장해본다! 고마워!
대박.... 아니 이북 보려고 퍼블리싱을 하넴....!! 멋있다..!
오오오~~ 대박.. 나 이거 따라해볼래.. 대박,, 고마워
와....... 너무 대단하다.... 글써줘서 고마워!
여시 정성 대박이다 ㅋㅋ 참고로 기울기는 폰트스타일이나 <em> 태그 사용하면 시길 프리뷰에선 안보여도 다른 뷰어에서는 보이는점 참고해도 좋을것같아~