Sigil 초보자를 위한 CSS 편집기
selfCSS - WYSIWYG CSS Editor
Impressum Angaben gemäß § 5 TMG: Kontakt: Name:Simon Waldherr Straße:Kloepfstrasse 2 Wohnort:94522 Ettling Telefon:0049 151 11309488 Telefax:0049 32 224178618 E-Mail:contact@selfcss.org
selfcss.org
CSS로 원하는 스타일 만드는게 어려운 분들께 추천을 합니다.
Sigil은 코딩 편집기여서 CSS를 모르면 스타일을 만들기 어렵습니다.
이 페이지는 CSS를 몰라도 CSS를 쉽게 만들 수 있게 도와줍니다.
사이트에 들어가면 이런 화면이 보입니다.
책 제목 스타일을 만들고 싶다면 오른쪽 위에 있는 HTML 버튼을 누릅니다.
편집 창에 있는 내용을 모두 지우고 편집하고 싶은 html 내용을 넣습니다.
저는 이렇게 넣었어요.
<h2 class="selfCSS">책 제목 스타일</h2>
선택자는 selfCSS입니다. 태그는 바꿔도 선택자는 selfCSS를 넣으세요.
이제 오른쪽 메뉴에서 CSS를 누릅니다.
CSS 코드가 보이고, 아래에 edit CSS라는 버튼이 보입니다.
edit CSS를 누르세요.
edit CSS를 누르면 선택자를 수정할 수 있습니다.
선택자는 Sigil에서 사용할 선택자를 넣으세요.
html 창에서 제목을 h2 태그로 지정했으니 선택자도 h2로 수정합니다.
스타일을 처음부터 새로 만들고 싶다면 CSS 속성을 모두 지워도 됩니다.
이제 오른쪽 위의 메뉴에서 Preview를 선택하세요.
그럼 html에서 입력한 스타일이 보입니다.
배경을 바꾸고 싶다면 오른쪽 아래에 있는 background를 수정하세요.
저는 흰색으로 하고, 기본 CSS 스타일을 모두 삭제한 후 수정을 하겠습니다.
CSS 스타일을 모두 삭제하고, 배경을 흰색으로 놓으면 이렇게 보여요.
글자가 안보이는게 정상입니다.
글자가 보이게 font-color를 바꿔보겠습니다.
왼쪽 메뉴 중 font를 선택해 보세요.
1. font를 on으로 놓고 colored를 선택합니다.
2. Red, Green, Blue를 원하는 색이 나오도록 조정합니다.
원하는 색의 rgb 값을 알고 있다면 그대로 맞춰주세요.
3. rgb 색을 조정하면 제목 스타일의 색이 반영됩니다.
폰트 크기도 바꿔보겠습니다.
Font 메뉴에서 Size를 On한 다음 EPUB에서 많이 사용하는 em을 선택합니다.
원하는 크기가 되도록 크기를 조정합니다.
테두리 스타일, 속성을 지정했습니다.
배경색, 안쪽 여백, 바깥 여백 등 원하는 스타일을 지정해 줍니다.
초보 편집자가 어려워 하는 그림자 스타일도 쉽게 추가할 수 있습니다.
스타일 편집이 끝났으면 오른쪽 위 메뉴에서 CSS를 누릅니다.
이게 CSS 코드예요.
이 코드를 복사해 Sigil의 CSS 파일에 붙여넣습니다.
복사한 코드를 Sigil의 CSS 파일에 붙여넣고, 전자책에서 사용할 선택자 이름을 붙여줍니다.
오른쪽 메뉴 Example을 누르면 이미지 스타일도 적용할 수 있습니다.
selfCSS로 간단한 스타일을 만들 수 있습니다.
하지만 100여개의 CSS 속성 중 많이 사용하는 기본적인 속성 몇개만 설정할 수 있지요.
초보를 넘어, 전자책 디자인을 원하는 대로 편집하고 싶다면 CSS를 공부하세요.