본문 바로가기
컴퓨터 활용/노년에 즐기는 코딩

[Sigil] 전자 편집에서 줄 간격과 배경색 설정하기

by easyfly 2023. 3. 29.
반응형

Sigil에서 줄 간격이란

줄 간격이란 줄과 다음 줄 사이의 간격을 의미합니다. 줄 간격이 2em인 경우와 1em의 경우를 보여주는 다음 이미지에서 비교가 됩니다. 줄 간격을 의미하는 'line-height'를 사용하고 다음과 같이 속성값을 부여하면 됩니다. 'line-height: 2em;' 또는 'line-height: 2;'로. 단위를 쓰지 않아도 2는 200%를 의미합니다. 글 높이의 2배로 줄을 유지하라는 내용입니다.

줄간격 비교

줄 간격을 1로 했더니 너무 답답하군요. 1.4로 지정해 보겠습니다.

줄간격을 1.4로 지정한 경우

줄 간격이란 엄밀히 말하면 행의 전체 높이를 의미하며 문자들은 행의 중간에 위치하고 있습니다. 제목의 경우 2줄로 길어지는 경우는 h태그에 줄간격을 '1'으로 설정하여 불필요하게 떨어지는 것을 방지해야 보기 좋습니다.

줄간격이 2인 경
제목의 경우

Sigil에서 글자 색 설정하기

스타일시트 파일에서 'color' 속성을 부여합니다. 색상의 이름을 직접 넣는 방법('color: red')과 RGB 값을 넣는 방법이 있습니다. 또는 16진수 값을 넣는 방법도 가능합니다. 

 

'color: red', 'color: rgb(255,0,0)', 'color: #FF0000'

 

위 세 가지 모두 글자 색을 빨간색으로 지정하는 방법입니다.

글자 색 적용

글자 배경색 지정하기

글자에 배경색을 지정할 때 사용하는 속성은 'background-color'입니다. 배경에 적용되는 배경색의 범위는 글간격과 관계가 있습니다.

줄간격 1인 경우 배경색
줄간격 2인 경우

배경색을 줄 계획이라면 줄 간격을 염두에 둬야 합니다. 배경에 여백이 없으면 답답하니까요.

 

정리

줄 간격이란 줄과 줄 사이의 간격입니다. 아래한글에서도 자주 거론되는 160% 등등의 간격이 줄 간격입니다. 스타일시트에서 'line-height'에 값을 부여하여 줄 간격을 조절할 수 있습니다. 

 

글자 색도 스타일시트를 통해 적용할 수 있습니다. 배경색도 지정되는데 줄 간격과 관계가 깊습니다. 줄의 높이만큼 배경에 색이 지정되기 때문입니다.

반응형

댓글