 |
CSS 매뉴얼 텍스트 특성 |  |
| 소개 | 일반 | 텍스트 | 폰트 | 박스 | 색상 | 목록 | 색인 | 예제 |
| 글자 간격 letter-spacing normal, 길이 CSS1 규격 글자 간격 설명 |
글자 간격을 지정한다. 음수도 가능하다.
p {letter-spacing: 0.5em;}
<TABLE border="1" width="60%">
<TR><TD style="letter-spacing: 0.5em;">글자 간격 0.5em 지정</TD></TR>
<TR><TD>글자 간격 정상</TD></TR>
</TABLE>
| ||||
| 단어 간격 word-spacing normal, 길이 CSS1 규격 단어 간격 설명 |
단어 간격을 지정한다. 음수도 가능하다.
P {word-spacing: .3em;}
 잘 안되는 군요
<table border=1 width=60%>
<tr><td style="word-spacing: 3em;">단어 간격 3em 지정</td></tr>
<TR><TD>단어 간격 정상</TD></TR>
</table>
| ||||
| 글자 장식 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 시 자동 밑줄 감춤
<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%;}
보통글자와
글자 <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;}
<table border=1 width=60%><tr>
<td style="text-transform: uppercase;">대문자 지정 abcde</td>
<td style>미 지정 abcde</td>
</tr></table>
| ||||
| 글자 수평 위치 정렬 text-align left, center, right, justify CSS1 규격 수평 정렬 설명 |
글자의 수평 위치를 지정 한다. 다른 블럭 엘레멘트에도 적용 된다. P {text-align: justify;} H4 {text-align: center;}
<table border=1 width=60%>
<tr><td style="text-align: center;">수평 위치 center 지정</td></tr>
<tr><td>수평 위치 정상(default)</td></tr>
</tr></table>
| ||||
| 첫자 들여쓰기 text-indent 길이, 백분율 CSS1 규격 들여쓰기 설명 |
문단의 첫줄의 들여쓰기 정도를 지정한다. 블럭 엘레멘트에 만 적용 된다. P {text-indent: 5%;} H2 {text-indent: -25px;}
<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%;}
<table border=1 width=60%>
<tr><tr><td style="line-height: 500%;">글자 높이 500% 지정</td></tr>
<tr><td>글자 높이 정상</td></tr>
</table>
|
<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>
|
