기본 파일 추가하기

스타일을 편집하기 전에 사용할 글꼴, 이미지 등을 먼저 불러오면 작업을 편하게 진행할 수 있다.  이미지는 편집 전에 모두 준비해 둬야 하고, 글꼴은 기본 글꼴을 추가한 후 편집하면서 필요한 글꼴을 추가해도 된다.

 

1. 글꼴 추가
1. 책 찾아보기의 Fonts 폴더에서 마우스 오른쪽 버튼을 누른다.

 

 

1. 대화 상자에서 필요한 글꼴을 선택해 추가한다. 여기서는 무료로 사용할 수 있는 나눔고딕과 은바탕 글꼴을 사용할 것이다.

 

 

2.  CSS에 글꼴 추가

글꼴 파일을 추가했다면 이제 CSS에 글꼴을 추가해야 한다.

@font-face {

font-family: "강조글꼴";

src: url("../Fonts/NanumGothicBold.ttf");

}

 

@font-face {

font-family: "기본글꼴";

src: url("../Fonts/UnBatang.ttf");

}

3. 공통 스타일 지정

공통 스타일은 책 전체에 적용되는 스타일이다. 모든 단락(p 태그) 사이의 줄간격이 많이 떨어진 전자책을 본 적이 있을 것이다. 이는 편집자가 의도한 경우 보다는 스타일을 몰라 줄간격을 붙이지 않았을 가능성이 높다. 아래 공통 스타일을 추가하면 이런 문제를 간단히 해결할 수 있다.

 

*{

margin : 0;

padding : 0;

}

 

*는 컴퓨터에서 '모든 것'에 해당하는 와일드카드 문자다. 예를 들어 모든 jpg 이미지 파일을 찾고 싶다면 [찾기] 메뉴에서 *.jpg를 하면 된다. CSS에서는 모든 스타일에 상속되는 스타일을 의미한다. 

 

4. 이미지 추가

글꼴을 추가했으면 이제 이미지를 추가한다. 이미지는 책에 들어갈 순서에 맞춰 미리 정리를 해 두는게 좋다. 이미지 역시 폰트를 추가하는 방법과 동일하게 진행한다.

여기서는 이미지가 들어갈 순서에 맞춰 img001, img002…로 이름을 정리했다. 이렇게 정리를 해 놓으면 이미지가 들어갈 위치를 찾아 쉽게 추가를 할 수 있다.