목차
- letter-spacing 예제 - 글자 간격
- letter-spacing 정의
- letter-spacing 구문
- 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.
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">
결과보기