[TIP] 본문에 다양한 스타일의 밑줄 긋기

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.   종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.  한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. https://www.epubguide.net/notice/309

본문 혹은 본문의 특정 단어에 밑줄을 긋고 싶을 때 <u> 태그를 쓸 수 있습니다. 그런데 <u>태그를 쓰면 밑줄이 예쁘지 않아요. 두께나 스타일을 줄 수도 없습니다. 텍스트에 딱 달라붙은 밑줄이 그어져요. 

이럴 때 <u> 태그 스타일을 바꿔보세요. HTML 태그의 스타일은 편집자가 원하는 대로 바꿔 사용할 수 있습니다. 글자와 밑줄 간격을 조절할 수 있고, 밑줄 종류도 점선, 실선, 이중실선 등 다양하게 바꿀 수 있습니다. 색깔, 선의 두께도 편집자가 원하는 대로 지정할 수 있지요. 

선택자를 만들어 처리해도 되지만 태그에 스타일을 적용하면 코드가 깔끔해져요.

<span class="underline_selector">밑줄 단락</span>

<u>밑줄 단락</u>

이렇게 코드도 깔끔해 지고, 편집 시간도 줄일 수 있습니다. 물론 <u>태그의 기본 스타일로 다른 곳에 사용했다면 쓸 수 없지요.

아래처럼 <u>태그에 스타일을 적용해 보세요. <u>태그를 쓸 수 없다면 선택자에 스타일을 적용하고 span 태그를 사용해도 되요.

u {

   text-decoration : none;

   border-bottom : 1px solid #FF0000;

   padding-bottom : 2px;

}

text-decoration : none;을 해 준건 u 태그의 기본 스타일인 밑줄을 없애기 위함입니다. 이걸 해주지 않으면 border로 그어준 밑줄에 u태그의 밑줄이 겹쳐 그려지거든요.

border-bottom(border)는 다양한 속성이 있습니다. 1px는 밑줄의 두께예요.

border 밑줄 기본 두께

1px 밑줄 두께

2px 밑줄 두께

5px 밑줄 두께

solid는 1줄 실선을 뜻합니다. double(2줄 실선), dotted(1줄 점선), dashed(긴 점선), groove, ridge, inset, outset 등의 밑줄 종류를 선택할 수 있어요. 마지막에 붙은 #FF0000은 색입니다. 원하는 밑줄 색을 지정하면 됩니다.

padding-bottom으로 글자와 밑줄의 간격을 조절할 수 있습니다. padding을 주지 않아도 적당한 간격이 벌어지지만 섬세한 편집이 필요할 때 유용하게 사용할 수 있어요. 단, padding 값을 너무 크게 주면 아래쪽 줄에 영향을 줄 수 있으니 주의해야 합니다. 

padding-bottom을 주지 않았을 때

padding-bottom : 2px

padding-bottom : 10px(밑줄이 아래 문장에 그어짐)

padding-bottom 값이 너무 크면 윗쪽 단어에 그은 밑줄이 아래 문장과 겹칠 수 있어요.