css3 text 정렬 속성, 텍스트간격,단어간격,줄간격 대소문자

페이지 정보

작성자 madalla 작성일13-03-23 12:12 조회10,783회 댓글0건

본문

css3 text 정렬 속성, 텍스트간격,단어간격,줄간격 대소문자 style 설정

[CSS3] 텍스트속성 ① 글자사이간격(자간)조절, 단어사이 간격(어간)조절, 텍스트줄간격(행간)조절, 텍스트대소문자설정

예제 text-justify 정렬속성)

.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>

size：10pt；text- indent：10px；text-align：justify；letter-spacing：－1 px； --> 글자 한 자 한 자... ‘영어 글자 부분만 따로’ 스타일시트 코드를 적용시키면 됩니다.

</div>

<div>

</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

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.