1.2.7.2 CSS 템플릿 활용하기 - 제목 꾸미기

2. 제목 스타일 꾸미기

책의 제목 스타일은 다양하다. 여기서는 시중에 판매되고 있는 책의 제목 스타일을 CSS로 어떻게 표현할 수 있는지 설명을 하려고 한다. 전자책을 종이책과 똑같은 스타일로 맞추는 것은 권하지 않는다. 전자책과 종이책은 각각의 특성이 있기 때문에 똑같이 만들기 보다는 특성에 맞춰서 독자들이 편하게 읽을 수 있도록 편집을 해야한다. 

여기서 책의 제목 스타일을 그대로 구현하는 것도 책 스타일을 전자책에 옮기려는 목적에 있는게 아니고 CSS 스타일을 어떻게 적용하는지 설명을 위해서일 뿐이다. 



예제1) 

* 100명 중 98명이 헷갈리는 우리말 우리문장 중에서


▷ 위 스타일에서 필요한 속성

1. 원형 테두리가 있는 장 번호 : border, radious, background-color

2. 필기체 스타일의 글꼴 : font-family

3. 점선 밑줄 : border-bottom

4. 가운데 정렬 : text-align

* 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다.  


필요한 스타일이 정해졌다면 CSS로 각 스타일을 정리하고 적절한 값을 찾는다.

위 제목 스타일을 적용하기 위해서는 2개의 스타일이 필요하다. 하나는 원형의 장 번호, 다른 하나는 제목 텍스트의 스타일이다. 원형의 장 번호를 이미지로 처리하면 텍스트에 필요한 스타일만 적요하면 된다. 

CSS만으로 원형 장번호에 말풍선처럼 화살표를 넣기는 어렵다.말풍선 화살표가 필요하다면 이미지를 배경으로 사용하는게 좋다.



 CSS : Style.css 

h2 { 

font-family : 필기체;

border-bottom : dotted 2px #ff6633;

display : table;

margin-left : auto;

margin-right : auto;

text-indent : 0;

text-align : center;

}


div.ch_no{

display : table;

margin-left : auto;

margin-right : auto;

font-size : 2em;

text-align : center;

background: #ff6633;

width: 35px;

height : 35px;

border-radius: 50%;

}




 HTML : title.html 

<html>

<head>

<link href="../Styles/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="ch_no">1</div>


<h2>맞춤법이 뭐예요?</h2>

</body>

</html>



예제2)


▷ 위 스타일에서 필요한 속성

1. 글자 색 지정 : color

2. 아래쪽 점선 : border-bottom

* 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다. 


 CSS : Style.css 

h3 {

font-size : 1.4em;

color : #ff6633;


border-bottom : dotted 2px #ff6633;

display : table;

margin-left : auto;

margin-right : auto;


text-indent : 0;

}


 HTML : title.html 

<h3>맞춤법은 소리 나는 대로 적는 것이다?</h3>



예제3)



▷ 위 스타일에서 필요한 속성

1. 원 안에 든 글번호 : border, border-radious

2. 글번호 우측 정렬 : display : flex, flex-flow

2. 제목 줄 바꾸기 : display : block

3. 슬래시(/) 자동으로 넣기 : ::before

    * 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다. 


 CSS : Style.css 

div.title { /*div 태그로 만든 원형 글상자를 오른쪽 정렬 시킴*/

display: flex;

flex-flow: row-reverse wrap;

}


div.ch_no{ /*장 번호를 위한 원형 글상자*/

font-size : 1.5em;

text-align : center;

background: #aaaaaa;

width: 30px;

height : 30px;

border-radius: 50%;

}


h2 { /*장 제목*/

text-align : right;

}


h2::before{ /* 장 제목 앞에 슬래시'/'를 자동으로 추가*/

content : "/";

display : block;

}


 HTML : ch001.css 

<div class="title">

<div class="ch_no">1</div>

</div>

<h2>나의 돈 관리 능력은<br />몇점일까?</h2>



예제4)

아래 예제는 '예제3'에서 아래쪽에 본문과의 여백을 두는 스타일이다. 본문과 여백을 두는 스타일은 쓰임이 많기 때문에 따로 설명을 한다. 



▷ 위 스타일에서 필요한 속성

1. 여백 설정 : margin 혹은 margin-bottom

    * 제목이나 문단에 여백을 줄 때는 padding보다 margin을 사용하는 것이 좋다.


 CSS : Style.css 

div.title { /*div 태그로 만든 원형 글상자를 오른쪽 정렬 시킴*/

display: flex;

flex-flow: row-reverse wrap;

}


div.ch_no{ /*장 번호를 위한 원형 글상자*/

font-size : 1.5em;

text-align : center;

background: #aaaaaa;

width: 30px;

height : 30px;

border-radius: 50%;

}


h2 { /*장 제목*/

text-align : right;

margin : 0 0 10% 0; /* margin-bottom : 10% 혹은 margin-bottom 20px 사용 가능*/

}


h2::before{ /* 장 제목 앞에 슬래시'/'를 자동으로 추가*/

content : "/";

display : block;

}


 HTML : ch001.html 

<div class="title">

<div class="ch_no">1</div>

</div>

<h2>나의 돈 관리 능력은<br/>몇 점일까?</h2>


* 전자책은 스마트폰, 태블릿, PC 등 하나의 파일로 여러 기기에서 사용을 한다. 그래서 상하 여백을 둘 때 화면 크기를 고려해야 한다.

상하 여백을 비율(%, em)로 설정하면 화면 크기에 맞춰 간격이 조절된다. 아이패드 처럼 큰 화면에서는 상하 간격이 넓어지고, 스마트폰에서는 상하 간격이 줄어든다. 하지만 화면에 따라 간격이 항상 바뀌기 때문에 편집 의도와 다른 결과를 보여줄 수도 있다. 

상하 여백을 고정값(px)으로 적용하면 제목과 본문 사이의 간격이 일정하게 유지된다. 하지만 화면 해상도에 따라 간격이 크게 벌어질 수 있고, 화면 크기에 따라 차이가 심하게 날 수 있다. 




예제5)

아주 간단하지만 많이 사용하는 스타일이다. 본문과 다른 글씨체를 사용하고, 위와 아래 여백을 둔다. 주의해야할 점은 들여쓰기이다. 기본 설정으로 들여쓰기가 되어 있으면 제목에도 영향을 줄 수 있다. 그렇기 때문에 제목에 들여쓰기를 할 것인지 확인하고 들여쓰기가 필요 없다면 들여쓰기 스타일을 빼줘야 한다.



▷ 위 스타일에서 필요한 속성

1. 글꼴 : font-family

2. 들여쓰기 설정 : text-indent

3. 상하 여백 : margin 혹은 margin-top, margin-bottom


 CSS : Style.css 

h3 {

font-family : "굴림";

text-indent : 0; /* 기본 들여쓰기가 되어 있어도 0으로 최화 됨. 들여쓰기를 원하면 지정할 수 있음.  */

margin : 10% 0 10% 0;

/* margin-top : 10%; margin-bottom : 10%; 여백 단위는 % 대신 px 등을 사용할 수 있음 */

}


 HTML : ch001.html 

<p>또 다른 주말에는 용서와.....</p>

<h3>결정적인 체험</h3>

<p>하루는 강사가 이런 말로...</p>




예제6)

아래같이 두단의 서로 다른 스타일 제목을 표현할 때는 <p> 태그로 묶은 후 다른 클래스로 스타일을 지정하는 방식을 많이 사용한다.


<p class="title_top">삶을 위한</p>

<p class="title_bottom">선택</p>


이렇게 표현을 하면 쉽게 스타일을 적용할 수 있는 반면, 제목 텍스트가 2개로 나뉜다는 문제점이 있다. 만약 이 페이지를 목차에 포함시키고 싶다면 어떻게 될까? 이 페이지의 목차는 '삶을 위한'이 된다. TOC를 수정한다 해도 권할 만한 방식은 아니다. 



▷ 위 스타일에서 필요한 속성

1. 글자색 : color

2. 줄바꿈 : display : block;


 CSS : Style.css 

h3 {

font-size : 1.4em;

margin-bottom : 10%;

}


.title {

display : block; /* br 태그를 쓰지 않고도 다음 줄로 내릴 수 있음 */

color : #777777;

}


 HTML : ch001.html 

<h3>삶을 위한 <span class="title">선택</span></h3>



** 시간이 오래 걸려 정리되는 대로 공개를 하겠습니다. 아래쪽도 계속 채울 예정입니다. **

예제7)

제목이나 제목 번호에 이미지로 글번호를 넣는 방법은 두가지이다. 하나는 이미지별로 번호를 넣어 사용하는 방식이다. 별다른 스타일을 적용할 필요 없어 편하긴 하지만, 목차가 100개쯤 되면 파일 용량도 커지고, 이미지가 많아 편집 시간이 오래 걸릴 수 있다. 

다른 하나는 배경에 이미지를 넣는 방식이다. 배경으로 이미지를 넣으면 이미지는 하나만 사용하고, 번호에 맞는 이미지를 찾는 시간도 절약할 수 있다. 하지만 편집이 복잡해 질 수 있기 때문에 글자를 확대/축소할 때 틀어질 수 있다.

이미지별로 글번호를 넣는 방법은 간단하기 때문에 여기서는 이미지를 배경으로 넣는 방법을 설명하겠다. 


▷ 위 스타일에서 필요한 속성

1. 배경이미지 : background-image

2. div 글상자에서 글자 정렬 : position, left, top


 CSS : Style.css 

div.bullet {

        background-image: url("bags.jpg");


        font-size : 35px;  /* 배경 이미지 크기는 고정이기 때문에 글자 크기를 조절할 수 없도록 px를 사용했다 */

        color : #FFFFFF;

            

        margin-left : auto;

        margin-right : auto;

        

        width: 67px;

        height : 80px;  

  }


  p.bulletNo { /* 글자의 위치를 고정시켜 화면 크기가 바뀌더라도 배치가 틀어지지 않는다 */

        position : relative; 

        left : 17px;

        top : 35px;

  }


  h2 {

        font-size : 1.5em;

        text-align : center;

  }


 HTML : ch001.html 

  <div class="bullet">

    <p class="bulletNo">01</p>

  </div>


  <h2>현명한 부모는 공부보다<br />

  운동을 먼저 시킨다</h2>



예제8)

아래 제목은 아주 단순하기 때문에 특별히 스타일을 적용할 필요는 없다. 그런데 제목 앞에 별표(★)가 있다. 제목에 항상 이런 특수한 기호나 단어가 들어간다면 CSS로 간단히 처리하는 방법이 있다. 제목을 쓸 때마다 별표를 하지 않아도 자동으로 추가되고, 표시를 변경할 때도 CSS만 수정하면 된다. 



▷ 위 스타일에서 필요한 속성

1. 앞쪽에 기호나 문장 삽입 :  ::before

* 뒤쪽에 들어가는 기호나 문장은 ::after를 사용한다.


 CSS : Style.css 

  h4 {

        font-size : 1.2em;

  }

  h4::before {

content : "★"; /* "참고", "주의!" 등 글자가 올 수도 있다 */

  }


 HTML : ch001.html 

  <h4>아이가 어릴수록 영수보다 운동을 시켜라</h4>



예제9)

아래처럼 제목 앞에 큰 이미지가 오고 이미지의 상하 중앙에 제목을 넣어야 하는 경우가 있다. 간단한 스타일이지만 복잡하게 생각하는 편집자들이 많이 있는 것 같다. div로 이미지를 감싸고 float을 써서 텍스트에 어울림 처리를 생각했다면 아래 스타일을 참고하기 바란다. 



▷ 위 스타일에서 필요한 속성

1. 이미지와 텍스트 상하 정렬 : vertical-align


 CSS : Style.css 

p.mtitle {

color : #5E6A70;

font-size : 1.1em;

padding : 1.3em 0em 0em 0px;

}

img.chakra{

vertical-align : middle;

padding : 0 10px 0 0;

}


 HTML : ch001.html 

  <p class="mtitle"><img class="chakra" src="../chakra.jpg" / alt="bullet">마시 시모프</p>



예제9)

아래 같은 편집은 전자책에서는 아주 까다롭다. 스타일 자체는 복잡하지 않은데 화면 크기도 제각각이고 글자 크기가 변경되기 때문에 본문 한줄만 이미지 아래에 걸치게 조절하기가 어렵다. 아래 코드는 글자 크기에 따라 처음 몇줄이 이미지 위에 걸치도록  했다. 글자 크기에 따라 이미지 위에 걸치는 본문 줄수가 1줄 ~ 3줄 이상이 될 수도 있다.


▷ 위 스타일에서 필요한 속성

1. 이미지 왼쪽으로 글자 배치 : float : left;


 CSS : Style.css 

img.bar {

float : left;

margin : 0;

padding : 0 10px 0 0;

}


h3 {

font-size : 1.5em;

margin-bottom : 280px; /* 이미지 세로 길이가 366px 이었기 때문에 본문이 이미지에 걸쳐질 수 있도록 아래쪽 여백을 조절했다 */

}

.chNo {

color : #AAAAAA;

font-size : 0.5em;

display : block;

}


 HTML : ch001.html 

<h3><img class="bar" src="../Images/bar.png"/><span class="chNo">두번째</span> 평생의 친구를 찾아라</h3>

<p>인생의 현자들을 만나 "오랫동안 행복한 결혼을 할 수 있었던 비결이 뭡니까?"하고 물었을 때 가장 먼저 나온 대답이 바로 "제일 친한 친구와 결혼을 했지."였다. 반대로 결혼에 실패한 사람들 중에는 이렇게 대답한 사람이 많았다. "우린 연인으로서는 좋았지만 친구가 되는 법을 알지 못했어."</p>


예제9)


아래 제목은 제목 아래에 이미지로 된 선이 그어져 있다. 이런 경우 간단히 표현을 하려면 이미지를 포기하고 비슷한 색으로 밑줄을 그어 주는 방법을 이용할 수 있다. 만약 밑줄 이미지가 편집에 중요하다면 이미지를 테두리로 표현할 수도 있다. 


▷ 위 스타일에서 필요한 속성

1. 텍스트 길이에 맞춰 글상자 크기 조절 : display : table;

2. 테두리 이미지 : border-image

3. 테두리 밑줄 : border-bottom


 CSS : Style.css 

h2.line { 

border-bottom : solid 2px #718F3F;

display : table;

}


h2.image { 

-webkit-border-image:url(underline.png) 0 0 5 0 round;

border-image:url(underline.png) 0 0 5 0 round;

display : table;

}


 HTML : ch001.html 

<h2 class="line">두번째 평생의 친구를 찾아라</h2>

<h2 class="image">두번째 평생의 친구를 찾아라</h2>


* border-image : border-image는 글상자 테두리를 이미지로 그려주는 스타일이다. 

border-image:url(underline.png) 0 0 5 0 round;

   앞쪽부터 이미지 url, 위 오른쪽 아래 왼쪽 테두리, 이미지 적용 방식으로 값을 지정한다. 


설정

트랙백

댓글


티스토리 툴바