컴퓨터 활용
[전자책] 스타일시트, 텍스트 편
easyfly
2023. 10. 24. 07:09
반응형
전자책에 스타일 시트 적용
위 CSS 코드는 웹 페이지의 글꼴, 문단, 그리고 제목 스타일 등을 설정하는 것입니다. 각 부분의 의미는 다음과 같습니다.
@font-face { ... }
- 웹 페이지에서 사용할 외부 글꼴을 불러옵니다.
font-family: 'SunBatang';
: 이 글꼴을 'SunBatang'이라는 이름으로 사용할 것입니다.src: url('../Fonts/SunBatang-Medium.ttf') format('truetype');
: 글꼴 파일의 경로와 형식을 지정합니다.
p { ... }
<p>
태그, 즉 문단에 적용될 스타일을 정의합니다.font-family: 'SunBatang', serif;
: 문단의 글꼴은 'SunBatang'을 우선으로, 없다면serif
글꼴을 사용합니다.size: 1.2em;
: 글자 크기를 설정합니다. (주의: 올바른 속성명은font-size
입니다.)line-height: 1.6em;
: 줄 간격을 설정합니다.text-indent: 1em;
: 문단 첫 줄의 들여쓰기를 설정합니다.
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>
의 글자 색을 설정합니다.
h2 { margin-top: 30mm; margin-bottom: 30mm; }
<h2>
태그에 적용될 상하 마진을 설정합니다. 위아래로 30mm의 여백이 생깁니다.
이렇게 설정하면, 웹 페이지의 문단과 제목 등이 지정한 스타일로 표시됩니다. 'SunBatang' 글꼴이 사용되며, 문단과 제목의 크기, 줄 간격, 들여쓰기 등이 조절됩니다.
반응형