텍스트간격조절 & cursor:pointer; cusor:hand; <a 태그가 아니라도 클릭 아이콘 나타내기.

cursor:pointer; cusor:hand; <a 태그가 아니라도 클릭 아이콘 나타내기.

이미지에 onClick="javascript:…."를 쓴 경우라든지 뭐 OnClick속성은 TD에도 DIV에도 줄 수 있는데...아무튼 이걸 줘도 클릭하면 액션은 일어나지만 마우스가 손 모양으로 안 바뀌니까 사람들이 클릭하는 건지 모를 때가 많다.

그럴땐 흔히

style="cursor:hand;" 

를 쓰지만, FireFox에서는 안먹힌다.

이럴 땐

style="cursor:pointer; cursor:hand; " 

로 주면 된다.

앞에건 파폭을 위한 것 뒤에 건 나머지 브라우저들을 위한 것.

귀찮으면 스타일시트 CSS에

.hand {cursor:pointer; cursor:hand; }

선언해두고 onClick을 쓸 때마다 해당 태그에 class="hand" 를 쓰면된다.

.hand { cursor:pointer; cursor:hand; }

<img src="../이미지.gif" onClick="javascript:action();" class="hand" />

글자 사이 간격조절

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

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.

예제 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
}

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