1.2.6.2 CSS 기초 - 텍스트 편집에 필요한 속성

CSS 속성은 170여개가 넘는다. 글자, 링크, 테이블, 테두리, 이미지 등 본문에 사용할 수 있는 모든 요소들에 맞는 CSS가 존재한다. 모든 CSS의 사용법은 수십년간 웹퍼블리싱을 전문으로 하는 사람이 아니라면 알기 어렵다. 그리고 전자책을 편집하기 위한 속성은 그리 많지 않다. 여기서는 전자책을 편집하는데 많이 사용되는 속성과, 각 속성을 템플릿에 어떻게 적용하면 되는지를 설명하려고 한다. 

1. 글자를 꾸미는 속성들

▶  text-indent : 1em;  /* 들여쓰기 */

text-indent는 들여쓰기를 하는 속성이다. 값으로는 1em; 10%; 5px; 등이 올 수 있는데 em;을 권한다. em;은 현재 사용하고 있는 폰트의 1글자 크기다. 그래서 글자 크기를 키우거나 줄여도 들여쓰기 간격이 문단과 잘 어울린다. %를 사용하면 화면 크기에 따라 들여쓰기 폭이 크게 변하고 px는 해상도에 따라 의도한 간격과 크게 차이날 수 있다.

text-indent는 마이너스 값을 적용할 수 있어 내어쓰기를 할 때도 사용할 수 있다. 아래처럼 값을 마이너스 값을 넣으면 내어쓰기로 표현된다. 하지만 내어쓰기를 할때는 반드시 여백(padding)을 반드시 지정해야 한다. 테두리가 없으면 margin과 padding의 차이를 구분할 수 없어 margin을 쓰는 경우가 있는데 margin을 지정하면 테두리 밖으로 글자가 나가기 때문에 잘못된 편집이다. 

 

● text-indent -1em; padding-left : 2em; 적용

내어쓰기를 할 때는 반드시 여백을(padding)을 지정해야한다. 그렇지 않으면 글자가 화면 밖으로 나가 편집이 이상하게 틀어진다. 여백은 padding을 지정해야한다. 테두리가 없으면 margin과 padding의 차이를 구분할 수 없어 margin을 쓰는 경우가 있는데 margin을 지정하면 테두리 밖으로 글자가 나가기 때문에 잘못된 편집이다. 

padding으로 왼쪽 여백을 2em(두글자 정도의 여백)을 두고 들여쓰기를 -1em을 지정하면 들여쓰기가 된다. em을 사용한 이유는 화면 크기나 글자 크기가 바뀌어도 해당 글자에 맞춰 여백이 지정되기 때문이다. 

● text-indent -1em; margin-left : 2em 적용

내어쓰기를 할 때는 반드시 여백을(padding)을 지정해야한다. 그렇지 않으면 글자가 화면 밖으로 나가 편집이 이상하게 틀어진다. 여백은 padding을 지정해야한다. 테두리가 없으면 margin과 padding의 차이를 구분할 수 없어 margin을 쓰는 경우가 있는데 margin을 지정하면 테두리 밖으로 글자가 나가기 때문에 잘못된 편집이다.

padding 대신 margin을 사용하면 글상자의 배경이나 테두리를 그렸을 때 글자가 글상자 밖으로 나가는 것을 볼 수 있다. 

● text-indent -1em; 여백 적용하지 않음

내어쓰기를 할 때는 반드시 여백을(padding)을 지정해야한다. 그렇지 않으면 글자가 화면 밖으로 나가 편집이 이상하게 틀어진다. 여백은 padding을 지정해야한다. 테두리가 없으면 margin과 padding의 차이를 구분할 수 없어 margin을 쓰는 경우가 있는데 margin을 지정하면 테두리 밖으로 글자가 나가기 때문에 잘못된 편집이다. 

여백을 적용하지 않으면 글자가 뷰어 화면 밖으로 나가 글자를 읽을 수 없게 된다. 

▶  color : #ffffff;  /* 글자색 */

color는 글자색을 지정할때 사용한다. 값으로는 색상 이름(red, blue, green 등), 16진수 코드(#FFFFFF), RGB(rgb(255,255,255), HSL(0-360 혹은 0% ~ 100% 사이의 값) 등을 사용할 수 있는데 16진수 코드나 색상 이름을 가장 많이 사용한다. 

# 참고 : 컬러 테이블

color : #0000FF;

color : blue;

color : rgb(0,0,255);

▶  text-align : justify;  /* 문단 정렬 */

text-align은 문단 정렬에 사용하는 속성이다. 글자 뿐 아니라 이미지 등의 다른 요소들에도 적용할 수 있다. text-align은 3가지 값을 가질 수 있다.

text-align : left;        /* 왼쪽 정렬 */

text-align : right;      /* 오른쪽 정렬 */

text-align : justify;    /* 양쪽 정렬 */

▶ line-height : 1.5em;  /* 줄간격 */

line-height 속성은 줄간격을 조정할 때 사용한다. 필요에 따라 글자 겹침 등으로 활용할 수 있다. 사용할 수 있는 값은 1, 2, 3 같은 숫자, em; %, px가 있다. 

line-height : 1.5em;

line-height : 150%;

아래처럼 line-height의 값을 0으로 두거나 1보다 작게 하면 줄간격을 줄여 글자 겹침 효과를 낼 수 있다.

○줄간격을 1보다 작게 하면

◇글자가 겹치는 효과를 줄 수 있다

▶ letter-spacing : 1.5em; /* 문자 사이 간격 조절 */

▶ word-spacing : 1.5em; /* 단어 사이 간격 조절 */

letter-spacing과 word-spacing은 글자 사이, 단어 사이의 간격이다. letter-spacing은 글자, word-spacing은 단어 사이의 간격을 조절한다. 

● letter-spacing 적용 예

글자와 글자 사이의 간격을 조절할 수 있다.      /* letter-spacing : -0.2em;*/

글자와 글자 사이의 간격을 조절할 수 있다.  /*letter-spacing : 1em;*/

글자와 글자 사이의 간격을 조절할 수 있다.    /*letter-spacing : normal;*/

● word-spacing 적용 예

글자와 글자 사이의 간격을 조절할 수 있다.      /* word-spacing : -0.2em;*/

글자와 글자 사이의 간격을 조절할 수 있다.  /*word-spacing : 1em;*/

글자와 글자 사이의 간격을 조절할 수 있다.    /*word-spacing : normal;*/

letter-spacing은 개별 글자의 간격이 조정되고 word-spacing은 글자 사이의 간격은 변경되지 않고 단어와 단어 사이의 간격만 조절되기 때문에 필요에 따라 사용하면 된다. 

▶ text-decoration : line-through;  /* 텍스트 윗줄, 가운데 줄, 밑줄 긋기 */

text-decoration은 단어나 텍스트에 밑줄이나 윗줄을 긋고 싶을때 사용할 수 있는 속성이다. 이 속성은 overline, underline, line-through 세 값 중 하나를 선택할 수 있다.

text-decoration: overline; /* overline은 텍스트 위에 선을 긋는다*/

text-decoration: line-through; /* line-through은 텍스트 위에 선을 긋는다*/

text-decoration: underline; /* underline은 텍스트 위에 선을 긋는다*/

HTML 태그 중 <del></del>이 line-through와 같은 효과를 내지만, del은 특정 목적을 갖는 태그이기 때문에 텍스트에 줄을 긋기 위해서는 사용하지 않는게 좋다. 밑줄을 긋는 <u></u> 태그는 HTML5에서는 속성이 재정의되었기 때문에 역시 사용하지 않는게 좋다.

이 외에도 아래의 속성들을 텍스트를 꾸밀 때 사용할 수 있다.

white-space	pre 태그 대신 사용할 수 있고, ward-wrap이 되지 않는 등의 효과
direction	오른쪽->왼쪽으로 글자를 쓰는 언어에서 사용 가능
vertical-align	상하 정렬을 할 수 있음
text-shadow	텍스트에 그림자 효과 추가