제목에 테두리가 있는 글상자 만들기


스타일을 잡다 보면 이런 글상자가 종종 나옵니다. 

글상자 제목과 내용이 있는 아주 일반적인 형태의 글상자입니다.

책 만들 때 많이 쓰이기도 하고요.


글상자 자체는 만들기 어렵지 않습니다.

아래처럼 제목에 꾸밈을 주는 경우가 있어요.

꾸밈의 형태는 다양합니다. 포스트잇을 붙여놓은 것 같은 스타일도 있고

제목 앞에 전구나 물음표 같은 불릿이 들어가기도 합니다.

그리고 이렇게 제목이 가운데 나오고, 양 옆으로 특정 패턴의 선이 나오기도 하지요.


이런 패턴은 좀 까다롭습니다.

글자에 맞게 제목 상자 크기가 바뀌어야 되요.

종이책에서는 한번 고정되면 그만이지만 전자책은 가로 폭이 일정하지 않습니다.


그래서 전자책은 제목 상자 옆에 있는 줄이 폭에 맞춰 자동으로 조정되야 하지요.

이런 스타일을 만드는 방식은 여러개예요.


예전에 소개한 적이 있는데

선을 긋고

margin-top을 (-)로 줘서 제목 상자를 선 위로 올리는 방법이 가장 간단합니다.


테이블을 이용할 수도 있어요.

왼쪽, 가운데, 오른쪽 3개짜리 테이블을 만든 후

가운데 셀에 border로 테두리를 그리고 왼쪽, 오른쪽에 선을 그을 수도 있습니다.

하지만 테이블은 셀 크기 조절이 까다로와요.


테이블과 비슷하지만 셀 크기 조절이 쉬운 방법으로는

flex 속성을 이용하는거예요. div 태그를 가로로 3개 늘어놓고 가운데 셀만 flex : 1;을 주면(0이었나???) 가운데 셀은 글자 크기에 맞게 칸이 조절되고, 좌우 셀은 크기가 동일하게 배치됩니다.


오늘 설명드릴건 이보다 조금 쉬운 방식이에요.


상자를 만들어 중간에 줄을 하나 긋고, 그 안에 가운데에 테두리를 친 제목을 추가하는 방식입니다.
스타일은 조금 복잡하지만 HTML 코드가 간결해 편집하기 좋습니다. 

.box_tip_title {

background-image : url("../Images/box_top_line.png");

background-position : center;

background-size : 15px;

line-height : 0;

margin : 0 0 1em 0;

}


.tip_title {

text-align : center;

display : table;

margin-left : auto;

margin-right : auto;

background-color : #FFFFFF;

border: 15px solid #F67E68;

-webkit-border-image: url("../Images/box_top_border.png") round;

-webkit-border-image-slice: 30%;


border-image: url("../Images/box_top_border.png") round;

border-image-slice: 30%;

}



<div class="box_tip_title">

<p class="tip_title">알맞은 조명을 고르기 위한 tip</p>

</div>


테두리 모양은 여러가지로 응용이 가능합니다. 

줄무늬, 물결무늬, border-bottom을 쓰면 아래에만 줄을 그을 수 있어요.

이 스타일만 있으면 제목 상자 테두리에 특정한 무늬가 들어간 대부분의 글상자를 만들 수 있습니다.

뿐만 아니라, 특정한 테두리를 가진 제목에도 활용할 수 있지요.

설정

트랙백

댓글

[문의]재미있는 제목 스타일

재미있는 제목 스타일 문의가 들어와 소개해 드립니다. 

제목 위, 아래에 크기가 다른 둥근 점이 들어간 제목이에요.

Sigil에서 제목을 자동으로 생성하려면 [오늘의 사색]이라는 제목은 하나의 제목 태그로 묶여야 합니다.


중요한 포인트는, 위쪽 큰 동그라미는 제목의 첫번째 단어에, 아래쪽 작은 동그라미는 마지막 단어에 일정한 거리를 유지해야 한다는 점이에요.



이렇게 제목이 길어지면 그에 맞춰 동그라미 위치도 바뀌어야 합니다.


제목의 위, 아래 길이는 알 수 없고, 1줄이 될 수도 있습니다.

제목이 어떻게 배치되어 있든 첫번째 단어에서 1자 거리 위에, 

마지막 단어에서 1자 거리 아래에 원이 표시되야 합니다.




처음엔 코드가 엄청 복잡할 줄 알았는데 의외로 간단한 해결 방법이 있더라구요.

제약(점이 글자를 따라다녀야 한다, 제목을 한번에 표현해야한다 등)을 하나씩 생각하면서 스타일을 만들려다 보니 이런 저런 속성과 스타일이 여러개 들어갔는데 마음에 드는 결과가 나오지 않았습니다. 

그러다, 가장 기본적인 원리를 떠올렸지요.


가장 심플하게~


그래서 다시 생각을 해 보니, 정말 간단한 해결책이 있더라구요.


스타일과 HTML 코드는 이렇습니다.


* 글꼴이 미생체다 보니 기본 글꼴 크기가 작네요. 글자 크기를 미생체에 맞춰 다른 글꼴로 바꿀 경우 제목 크기가 아주 커질 수 있습니다. 원문자 크기 역시 글꼴에 따라 차이가 날 수 있기 때문에 글자 크기 조절이 필요합니다.

h3 {

text-align : center;

font-family: "Sandoll MiSaeng";

font-size : 1.8em;

margin-top : 2em;

margin-left : -1em;

margin-bottom : 5em;

color : #B794CA;

}


h3:before {

content : "●";

font-size : 1.2em;

vertical-align : 110%;

}

h3:after {

content : "●";

font-size : 0.7em;

vertical-align : -140%;

}

.left_m{

margin-left : 1.5em;

}


<h3>토끼굴 <br/><span class="left_m"></span>속으로</h3>



스타일을 적용한 결과입니다.




목차를 자동 생성하면 이렇게 나옵니다.



샘플 파일 다운로드 받아서 확인해 보세요~





설정

트랙백

댓글

2018년 전자책 지원사업 공고 및 선정작 제작 지원 안내

전자책 출판정보 2018.05.14 09:36

2018년 텍스트형 전자책 제원사업이 발표됐습니다.  [내용 상세 보기]


그동안 아는 분들 위주로 제작을 해 드렸는데, 지원사업 선정작에 한하여 제작 요청을 받습니다.

제작 비용은 제작 난이도에 따라 달라지며, 지원 사업비용 내에서 책정합니다.



* 내맘대로의 EPUBGUIDE.NET이 만든 전자책의 특징!


1. 양식화된 형태로 대량 제작하는 방식과 달리 종이책에 맞춰 개별적인 스타일 적용.

2. 종이책 스타일은 살리면서 전자책의 특성에 맞게 재편집.

3. 책에 포함된 다양한 글꼴을 저작권 걱정 없는 무료 글꼴 중 비슷한 글꼴을 찾아서 제작.

4. 본문과 자연스러운 이미지 및 이미지 설명(캡션) 배치.(원형, 다각형 형태의 이미지도 처리 가능)

5. 모든 주석은 팝업 주석 처리.(단, 팝업 주석 지원하지 않는 뷰어에서는 링크로 연결)

6. 제작 기간 : 최대 5일(영업일 기준) 이내

     - 제작 진행 3일 이내 1차 검수 파일(완성본)을 출판사에 전달

     - 출판사에서 검수 후 수정 사항 접수

     - 수정사항 접수 후 1일 이내에 최종 파일 출판사에 전달

        * 최종 파일 전달 후에라도 수정사항 있을 경우 무상으로 수정(3년 이내)

        * 단, 책에 따라 제작 일정이 달라질 수 있으며 3일 이상 걸릴 경우 사전에 안내드립니다. 



* 제작 요청


이메일 : byword77@gmail.com


이메일로 샘플(PDF, 인디자인 등) 혹은 종이책 미리보기 링크(교보문고, 예스24, 알라딘 등)를 보내주시면 견적서를 보내드립니다. 


제작의 품질을 보증하기 위해 월 10종 내외로 제작합니다. 먼저 작업중인 책이 있을 경우 제작 일정이 지연될 수 있으며, 제작 일정은 견적서에 안내 드립니다.




==제작지원사업에 대한 자세한 안내는 아래를 참고하시기 바랍니다==

2018년 제1차 텍스트형 전자책 제작 지원 사업 공고(링크)

한국출판문화산업진흥원은 <제1차 텍스트형 전자책 제작 지원> 사업을 
아래와 같이 공고하오니 많은 참여 바랍니다.

□ 사업목적

  • ㅇ 출판사의 전자책 제작 의지 독려를 통한 국내 전자책 시장 저변 확대 및 전자출판 역량 강화
  • ㅇ 우수 전자책 콘텐츠 보급 및 편중화 해소를 통한 전자책 콘텐츠 산업 선진화
  • ㅇ 디지털 독자 양성을 통한 전자출판 인식 제고 및 내수창출 도모

□ 지원 내용 및 조건

2018년 제1차 텍스트형 전자책 제작 지원 사업 공고의 지원 내용 및 조건 | 구분, 내용으로 구분되는 표
구분내용
지원대상
  • - 일반도서 전체
  • - 미출간 원고
지원형식
  • - EPUB, PDF 등 형식
지원내용
  • - 종당 최대 40만 원 이내 실제작비 지원(초과금액은 출판사 자부담)
      ※ 제작파일 형식별 상한액 기준 : 이펍-40만 원 이내, PDF-30만 원 이내
지원규모
  • - 총 530종 내외 선정
지원자격
  • - 텍스트형 전자책을 제작하려는 출판사
      ※ 출판사당 최대 20종까지 신청 가능
제외대상
  • - 국고로 전자책 제작 지원금을 이미 받아 제작된 도서
  • - 전자책으로 제작되어 기 유통되고 있는 도서
  • - 저작권자와의 배타적발행권 설정 계약이 명확하지 않은 도서
  • - 학습교재류, 정기간행물, 학회지 등
  • - 시리즈 중 일부 콘텐츠로 한 콘텐츠로서의 완결성이 없는 경우

※ 전자책 제작비 지급 기준(종이책 기준)

2018년 제1차 텍스트형 전자책 제작 지원 사업 공고의 지원 내용 및 조건 중 전자책 제작비 지급 기준(종이책 기준) | 구분(작업분량(페이지, 이미지)), 제작난이도(상, 중, 하)으로 구분되는 표
구분제작 난이도
작업
분량
페이지200p 초과100p~200p100p 미만
이미지20개 초과5개~20개5개 미만


설정

트랙백

댓글


티스토리 툴바