Trio 홈페이지 CSS 매뉴얼 텍스트 특성 예제 메뉴로
CSS2 규격 텍스트(text) 참조 HTML 규격 텍스트 참조
글자 간격
letter-spacing
normal, 길이

CSS1 규격
글자 간격 설명
글자 간격을 지정한다. 음수도 가능하다.
p {letter-spacing: 0.5em;}

예제

<STYLE type="css/text"> 
   td.textcss1 {letter-spacing: 0.5em;}
</STYLE>
<TABLE border="1" width="60%">
<TR><TD class=textcss1>글자 간격 0.5em 지정</TD></TR>
<TR><TD>글자 간격 정상</TD></TR>
</TABLE>
글자 간격 0.5em 지정
글자 간격 정상


<TABLE border="1" width="60%">
<TR><TD style="letter-spacing: 0.5em;">글자 간격 0.5em 지정</TD></TR>
<TR><TD>글자 간격 정상</TD></TR>
</TABLE>
글자 간격 0.5em 지정
글자 간격 정상
단어 간격
word-spacing
normal, 길이

CSS1 규격
단어 간격 설명
단어 간격을 지정한다. 음수도 가능하다.

P {word-spacing: .3em;}

예제
<STYLE type="text/css"> 
   td.textcss2 {word-spacing: 3em;}
</STYLE>

<table border=1 width=60%>
   <tr><td class=textcss2>단어 간격 3em 지정</td></tr>
   <TR><TD>단어 간격 정상</TD></TR>
</table>
결과 잘 안되는 군요
단어 간격 3em 지정
단어 간격 정상

<table border=1 width=60%>
   <tr><td style="word-spacing: 3em;">단어 간격 3em 지정</td></tr>
   <TR><TD>단어 간격 정상</TD></TR>
</table>
단어 간격 3em 지정
단어 간격 정상
글자 장식
text-decoration
none, blink, underline, overline, line-through

CSS1 규격
글자 장식 설명
underline 이나 blink 등 글자 특성을 지정한다.

U {text-decoration: underline;}
.sample {text-decoration: line-through;}
A { text-decoration: none }  // link 시 자동 밑줄 감춤

예제

<STYLE type="css/text">
  .textcss3 {text-decoration: underline;}
</STYLE>

<TABLE border=1 width=60%><TR>
   <TD class=textcss3>밑줄 지정</TD>
   <TD>정상: 밑줄 없음</TD>
</TR></TABLE>
결과
밑줄 지정 정상: 밑줄 없음


<TABLE border=1 width=60%><TR>
   <TD style="text-decoration: underline;background:ff0">밑줄 지정</TD>
   <TD>정상: 밑줄 없음</TD>
</TR></TABLE>
밑줄 지정 정상: 밑줄 없음
글자 수직 정렬
vertical-align
baseline, sub, super, top, middle, bottom, text-top, text-bottom, 백분율

CSS1 규격
수직 정렬 설명
글자의 basline 에 대한 수직 위치를 지정 한다.
라인 엘레멘트에 만 사용 되고 음수는 허용 되지 않는다

   baseline    : 문자의 기초선에 맞추어 정렬.
   top         : 상단에 정렬
   middle      : 문자의 중앙을 기초선으로 해서 정렬.
   bottom      : 하단에 정렬
   sub         : 아래첨자Subscript
   super       : 윗첨자Superscript
   text-top    : 문자의 윗선을 기초선으로 해서 정렬.
   text-bottom : 문자의 밑선을 기초선으로 해서 정렬.
   백분율      : 문자 높이의 백분율로 기초선 결정.
SUP {vertical-align: super;}
.sample {vertical-align: 60%;}

예제

<STYLE=css/text>
sup{
	vertical-align:super; 
	font-size:14; 
	color:#0000ff;
}
</STYLE>

  보통글자와 글자 <sup>super</sup> 지정
결과
보통글자와 글자 super 지정

  보통글자와 
  글자 <sup style="vertical-align:super;font-size:14;
      color:#0000ff;">super</sup> 지정
보통글자와
글자 super 지정
대소문자 변환
text-transform
none, capitalize, uppercase, lowercase

CSS1 규격
문자 변환 설명
글자를 대문자, 소문자로 변환한다.

   capitalize : 각 단어의 첫글자를 대문자로 바꾼다.
   uppercase  : 모든 글자를 대문자로 바꾼다.
   lowercase  : 모든 글자를 소문자로 바꾼다.
H1 {text-transform: uppercase;}
.title {text-transform: capitalize;}

예제

<STYLE type="css/text">
   .aa1 {text-transform: uppercase;}
</STYLE>

<table border=1 width=60%><tr>
   <td class=aa1>대문자 지정 abcde</td>
   <td style>미 지정 abcde</td>
</tr></table>

결과
대문자 지정 abcde 미 지정 abcde

<table border=1 width=60%><tr>
   <td style="text-transform: uppercase;">대문자 지정 abcde</td>
   <td style>미 지정 abcde</td>
</tr></table>
대문자 지정 abcde 미 지정 abcde
글자 수평 위치 정렬
text-align
left, center, right, justify

CSS1 규격
수평 정렬 설명
글자의 수평 위치를 지정 한다.
다른 블럭 엘레멘트에도 적용 된다.

P {text-align: justify;}
H4 {text-align: center;}

예제

<STYLE type="css/text">
   .aa2 {text-align: center;}
</STYLE>

<table border=1 width=60%>
   <tr><td class=aa2>수평 위치 center 지정</td></tr>
   <tr><td>수평 위치 정상(default)</td></tr>
</tr></table>

결과
수평 위치 center 지정
수평 위치 정상(default)

<table border=1 width=60%>
   <tr><td style="text-align: center;">수평 위치 center 지정</td></tr>
   <tr><td>수평 위치 정상(default)</td></tr>
</tr></table>
수평 위치 center 지정
수평 위치 정상(default)
첫자 들여쓰기
text-indent
길이, 백분율

CSS1 규격
들여쓰기 설명
문단의 첫줄의 들여쓰기 정도를 지정한다.
블럭 엘레멘트에 만 적용 된다.

P {text-indent: 5%;}
H2 {text-indent: -25px;}

예제

<STYLE type="css/text">
   .inpos {text-indent: 5%;}
</STYLE>
   <p class=inpos>text-indent 5% 지정</p>
   <p>들여쓰기 안함</p>

결과

text-indent 5% 지정

들여쓰기 안함


   <p style="text-indent: 20%;">text-indent 5% 지정</p>
   <p>들여쓰기 안함</p>

text-indent 20% 지정

들여쓰기 안함

글자 높이
line-height
normal, 수치,
길이, 백분율


CSS1 규격
글자 높이 설명
글자의 기초선(baseline)으로부터 높이를 지정 한다.
음수는 허용 되지 않는다.

P {line-height: 18pt;}
H2 {line-height: 200%;}

예제

<STYLE type="css/text">
   .aa4 {line-height: 200%;}
</STYLE>

<table border=1 width=60%>
   <tr><tr><td  class=aa4>글자 높이 200% 지정</td></tr>
   <tr><td>글자 높이 정상</td></tr>
</table>

결과
글자 높이 200% 지정
글자 높이 정상

<table border=1 width=60%>
   <tr><tr><td style="line-height: 500%;">글자 높이 500% 지정</td></tr>
   <tr><td>글자 높이 정상</td></tr>
</table>
글자 높이 500% 지정
글자 높이 정상

소개 일반 텍스트 폰트 박스 색상 목록 색인 예제
번역문 소유자 - Trio 홈페이지 제공
이 문서(http://trio.co.kr/webrefer/css/csstext.html)는
자유로이 연결 사용이 가능함.
예제 메뉴로