컴퓨터 활용

[전자책] 스타일시트, 텍스트 편

easyfly 2023. 10. 24. 07:09
반응형

전자책에 스타일 시트 적용

전자책 편집기 'Sigil'에서 스타일시트

위 CSS 코드는 웹 페이지의 글꼴, 문단, 그리고 제목 스타일 등을 설정하는 것입니다. 각 부분의 의미는 다음과 같습니다.

  1. @font-face { ... }
    • 웹 페이지에서 사용할 외부 글꼴을 불러옵니다.
    • font-family: 'SunBatang';: 이 글꼴을 'SunBatang'이라는 이름으로 사용할 것입니다.
    • src: url('../Fonts/SunBatang-Medium.ttf') format('truetype');: 글꼴 파일의 경로와 형식을 지정합니다.
  2. p { ... }
    • <p> 태그, 즉 문단에 적용될 스타일을 정의합니다.
    • font-family: 'SunBatang', serif;: 문단의 글꼴은 'SunBatang'을 우선으로, 없다면 serif 글꼴을 사용합니다.
    • size: 1.2em;: 글자 크기를 설정합니다. (주의: 올바른 속성명은 font-size입니다.)
    • line-height: 1.6em;: 줄 간격을 설정합니다.
    • text-indent: 1em;: 문단 첫 줄의 들여쓰기를 설정합니다.
  3. h2 { ... }, h3 { ... }
    • <h2>, <h3> 태그, 즉 제목에 적용될 스타일을 정의합니다.
    • font-family: 'SunBatang', serif;: 제목의 글꼴을 설정합니다.
    • size: 1.6em;, size: 1.4em;: 제목의 글자 크기를 설정합니다. (주의: 올바른 속성명은 font-size입니다.)
    • text-align: center;, text-align: right;: 제목의 텍스트 정렬을 설정합니다. <h2>는 가운데, <h3>는 오른쪽으로 정렬됩니다.
    • color: #BB7711;: <h2>의 글자 색을 설정합니다.
  4. h2 { margin-top: 30mm; margin-bottom: 30mm; }
    • <h2> 태그에 적용될 상하 마진을 설정합니다. 위아래로 30mm의 여백이 생깁니다.

이렇게 설정하면, 웹 페이지의 문단과 제목 등이 지정한 스타일로 표시됩니다. 'SunBatang' 글꼴이 사용되며, 문단과 제목의 크기, 줄 간격, 들여쓰기 등이 조절됩니다.

반응형