[text] CSS - letter-spacing 속성 ★ - 글자 간격 사이사이 띄우기 ( 텍스트사이띄우기 = 문자 간격 = 글자 사이 띄우기 = 레터스페이싱속성 = 레러스페이싱속성) ※ 글자간격/문자간격 지정

1. letter-spacing 예제 - 글자 간격
2. letter-spacing 정의
3. letter-spacing 구문
4. letter-spacing 예제 - 가운데 정렬 (= 중앙정렬)

letter-spacing 예제 - 글자 간격 

 

<style> 

div {letter-spacing: 15px;} 

.normal {letter-spacing: normal;}

.minus {letter-spacing: -1px;}

.plus {letter-spacing: 10px;}

</style> 

 

<div>

    부모 요소 홈짱닷컴 (homzzang.com)

    <p class="normal">normal 홈짱닷컴 (homzzang.com)</p>

    <p class="minus">-1px 홈짱닷컴 (homzzang.com)</p>

    <p class="plus">10px 홈짱닷컴 (homzzang.com)</p>

    <p class="inherit">inherit 홈짱닷컴 (homzzang.com)</p>

</div>

 

결과보기

letter-spacing 정의

 

글자 간격 지정.

 

---

 

1.

• 기본값 : normal
• 상속여부 : O
• 애니효과 : O
• CSS버전 : CSS1
• JS구문 : object.style.letterSpacing="3px"

 

2.

• 가운데 정렬 (= 중앙정렬) : text-indent 속성으로 해당 값만큼 보전 필요.
• 마지막 글자엔 적용 안 하려면, (JavaScript/jQuery) 코드로 수정 필요.

 

3. cf.

word-spacing 속성 - 단어 사이 간격

 

4.

모든 브라우저 지원.

 

letter-spacing 구문

 

선택자 {letter-spacing: normal|length|initial|inherit;}

 

---

[속성값]

 

normal

기본 간격. (기본값)

 

length (예: cm, mm, in, px, pt, pc 단위)
숫자가 클수록 간격이 넓어짐. (음수 가능)
cf. line-height 속성 : 음수 불가능.

※ 글자를 다닥다닥 붙게 하려면 보통 -1px 줌

 

initial

이 속성의 기본값으로 설정.

 

inherit
부모 요소의 속성값 상속

 

letter-spacing 예제 - 가운데 정렬 (= 중앙정렬)

 

<style>

input.a {width:100%; letter-spacing:50px;}

input.b {width:100%; letter-spacing:50px; text-indent:50px;}

</style>

 

<input type="submit" value="홈짱닷컴" class="a">

<input type="submit" value="홈짱닷컴" class="b">

 

결과보기