css3 text 정렬 속성, 텍스트간격,단어간격,줄간격 대소문자
페이지 정보
작성자 madalla 작성일13-03-23 12:12 조회10,819회 댓글0건본문
css3 text 정렬 속성, 텍스트간격,단어간격,줄간격 대소문자 style 설정
[CSS3] 텍스트속성 ① 글자사이간격(자간)조절, 단어사이 간격(어간)조절, 텍스트줄간격(행간)조절, 텍스트대소문자설정
예제 text-justify 정렬속성)
<style type="text/css" media="screen">
.text-01{
width:250px;border:2px solid #077817;padding:10px;font-size:16px;
text-align:justify;text-justify:inter-cluster
}
div{
width:250px;border:2px solid #ff3333;padding:10px;font-size:16px;
text-align:justify;text-justify:auto
}
</style>
<div class="text-01">
size:10pt;text- indent:10px;text-align:justify;letter-spacing:-1 px; --> 글자 한 자 한 자... ‘영어 글자 부분만 따로’ 스타일시트 코드를 적용시키면 됩니다.
</div>
<div>
size:10pt;text- indent:10px;text-align:justify;letter-spacing:-1 px; --> 글자 한 자 한 자... ‘영어 글자 부분만 따로’ 스타일시트 코드를 적용시키면 됩니다.
</div>
텍스트간격조절
글자사이 간격조절
letter-spacing (자간)
letter-spacing:값;
속성값 |
호환성 |
normal |
IE4, FF1, S1, C1, O3.5, CSS1 |
<length> |
IE4, FF1, S1, C1, O3.5, CSS1 |
*글자간격은 em으로 설정할 것을 권장한다. 폰트크기를 기준으로 적용되므로 텍스트 크기가 바뀌어도 자동조절된다.
*letter-spacing값을 0으로 지정하면 간격을 늘리거나 줄이는 대신 텍스트가 양쪽정렬되는것을 막을 수 있다.
자간과 커닝
자간은 글자와 글자 사이의 간격.
커닝은 비례폰트내의 개별 글자쌍 사이 간격.
단어사이 간격조절
word-spacing (어간)
word-spacing:값;
속성값 |
호환성 |
normal |
IE6, FF1, S1, O3.5, CSS1 |
<length> |
IE6, FF1, S1, O3.5, CSS1 |
*되도록 어간은 수정하지 않는것이 좋다. 사용한다면 제한적으로.
텍스트 줄간격 조절
line-height (행간)
line-height:값;
속성값 |
호환성 |
normal |
IE3, FF1, S1, O3.5, CSS1 |
<number> |
IE4, FF1, S1, O3.5, CSS1 |
<length> |
IE3, FF1, S1, O3.5, CSS1 |
<percentage> |
IE3, FF1, S1, O3.5, CSS1 |
*값은 폰트크기에 곱할 곱셈값을 적어주되 유효성 검증을 위해 소수점까지 적도록한다.
예를들어 더블 스페이스의 경우 2.0
*일반적으로 줄간격은 폰트 크기의 1.5 , 2 배가 적절하다.
*폰트단축속성을 사용해 함께 정의할수 있다.
텍스트 대소문자 설정
text-transform:값;
속성값 |
호환성 |
내용 |
capitalize |
IE4, FF1, S1, C1, O3.5, CSS1 |
각 단어의 첫 글자를 대문자로 |
uppercase |
IE4, FF1, S1, C1, O3.5, CSS1 |
모든글자를 대문자로 |
lowercase |
IE4, FF1, S1, C1, O3.5, CSS1 |
모든글자를 소문자로 |
none |
IE4, FF1, S1, C1, O3.5, CSS1 |
재정의 |
* HTML에서 텍스트를 모두 대문자로 입력하면 읽어주는 보조프로그램을 사용하는 경우 소리를 지르는듯한 음성을 듣게된다.
일반텍스트를 사용하고, text-transform으로 설정해주는 것이 좋다.
Syntax
text-justify: 사용되는 속성
auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida
auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida
Value
Vaule | Description |
---|---|
auto | The User Agent determine the justification algorithm to follow, based on a balance between performance and adequate presentation quality. |
none | Justification is disabled. |
inter-word | Justification primarily changes spacing at word separators. This value is typically used for languages that separate words using spaces, like English or Korean. |
inter-ideograph | Justification primarily changes spacing at word separators and between characters in block scripts. This value is typically used for Chinese, Japanese and Korean. |
inter-cluster | Justification primarily changes spacing at word separators and between characters in clustered scripts. This value is typically used for Southeast Asian scripts such as Thai.. |
distribute | Justification primarily changes spacing both at word separators and between characters in all scripts equally. This value is sometimes used in e.g. Japanese. |
kashida | Justification primarily stretches cursive scripts through the use of kashida or other calligraphic elongation. |