시길(sigil) 사용법 : CSS 스타일시트로 본문 꾸미기

안녕하세요 탐구소년입니다. 

 

전자책 제작 프로그램 시길의 사용법을 계속해서 올리고 있습니다. 오늘은 간단한 스타일시트 코드를 작성해보고, 코드 해석도 덧붙이도록 하겠습니다. 스타일시트 코드를 통해 전자책의 본문을 예쁘게 꾸미면, 좀 더 상품성 있는 전자책을 만들 수가 있습니다. 본문 내용을 작성하는 법이나 시길의 잡다한 사용법 등에 대한 설명은 생략하고 진행합니다. 혹시나 기본적인 사용법을 잘 모르신다면 이 블로그에 있는 다른 글들을 읽어보시길 추천해요^^! 그럼 시작합니다.

 

자 그럼 가장 먼저, 새로운 시길 파일을 열고 아래와 같이 작성해보도록 하겠습니다. 

 

<h1> 태그와 <p> 태그만으로 이루어진 간단한 본문 파일을 작성해주었습니다. 

위의 본문을 미리보기로 보면 아래와 같습니다. 

 

 

글꼴의 이름은 사실 잘 모르겠습니다만, 윈도우 컴퓨터에서 제공하는 기본 글씨체로 전자책이 만들어져 있는 상태입니다. 이 상태로도 전자책의 내용을 읽는 데에는 아무런 지장이 없습니다. 그러나 어딘가 부족한 느낌이 드는 게 사실이니, 전자책을 좀 더 예쁘게 꾸미는 작업을 해보도록 하겠습니다. 

 

 

일단 Styles 폴더 안에 새로운 스타일시트를 하나 만들어 줍니다. 그리고 Fonts 폴더에는 전자책의 글꼴로 사용할 '제주한라산' 글꼴을 추가해주었습니다. 참고로 제주한라산 글꼴은 무료글꼴이라서, 포털사이트 검색창에 검색만 하셔도 쉽게 구하실 수 있습니다. 

 

그러면 이제 스타일시트 코드를 작성해보도록 하겠습니다.

 

 

코드는 위와 같습니다. 스타일시트 파일에 작성을 해주시면 되고요. 그럼 파트 별로 코드 설명 들어가겠습니다. 

 

@font-face{

  font-family: "Jeju";

  src : url(../Fonts/JejuHallasan.ttf)

}

 

이 부분은 내가 사용할 글꼴에 별칭을 정해주는 파트입니다.

src 항목에는 Fonts 폴더 안에 있는 글꼴을 지정해주면 되는 것이므로 글꼴 이름을 오타없이 동일하게 작성해주셔야 합니다. 

font-family 항목에는 내가 사용하고 싶은 글꼴의 별칭을 지어서 적어주면 됩니다. 

 

h1{

  font-family: Jeju;

  text-align: center;

}

 

이 부분은 <h1> 태그의 스타일을 정해주는 파트입니다.

font-family에는 사용할 글꼴을 적어주면 됩니다. 그런데 이미 위에서 제주한라산 글꼴에 'Jeju'라는 별칭을 붙여 주었기 때문에, 여기에는 Jeju라고만 작성해주면 알아서 제주한라산 글꼴이 적용됩니다. 

text-align은 글자를 어느 위치에 정렬할 것인지 정해주는 항목입니다. center니까 가운데 정렬입니다. right나 left도 가능합니다 

 

p{

  font-family: Jeju;

  line-height: 1.8em;

  text-indent: 0.5em;

}

 

이 부분은 <p> 태그의 스타일입니다. 

line-height는 말 그대로 줄 간격을 의미합니다. 윗줄과 아래줄이 너무 촘촘하게 붙어있으면 글 읽기가 불편할 수 있으므로 간격을 조금 조정했습니다. 여기서 em라는 단위가 등장했는데, 1em은 한글과 컴퓨터에서는 12포인트 정도입니다.

text-indent는 들여쓰기 간격을 의미합니다. <p>는 문단을 의미하는 태그인데요. 문단이 바뀔 때마다 앞에 조금씩 간격이 있어주면 글 읽기가 한결 수월해집니다. 

 

여기까지 코드 작성은 됐습니다. 그러면 이제 스타일시트와 본문을 연결해주도록 하겠습니다. 

 

 

본문파일을 마우스 오른쪽 버튼으로 클릭한 다음, Link Stylesheets 를 선택해주세요. 

 

 

창이 하나 나타납니다. 여기에서 스타일시트 파일을 선택한 다음 OK를 눌러주세요. 

 

여기까지 잘 되셨다면, 할 일은 모두 마쳤습니다. 원활하게 모든 작업을 수행했다고 치고, 그럼 이제 미리보기를 통해 결과를 확인해보도록 하겠습니다. 

 

 

스타일시트가 잘 적용되었다면, 위와 같은 결과를 확인할 수가 있습니다. 글꼴이 제주한라산으로 바뀌었고, 각 문단마다 맨 앞줄이 조금씩 들여쓰기 되어있으며 윗줄과 아래줄이 각각 어느 정도 간격을 유지하고 있습니다. 그리고 제목은 가운데 정렬이 되어 있습니다.

 

여기까지 해서 간단한 스타일시트 작성 및 코드 해석을 해보았습니다. 혹시나 결과가 제대로 나오지 않으셨다면, 대부분의 경우 코드에 오타가 있어 그런 것이니 확인해보시기 바랍니다. 

 

그럼 오늘은 여기까지 하고요, 저는 시길 관련해서 더 좋은 내용을 준비하여 곧 다시 돌아오도록 하겠습니다.

좋은 주말 보내시길 바랄게요. 감사합니다.