letter-spacing Property


Home > Document > CSS > Text > letter-spacing

letter-spacing Property

letter-spacing Property 는 글자간의 간격 조절을 다루는 Property 입니다. 한글의 경우는 사실 덜 합니다만 영문자의 경우는 글자 간격이 너무 좁아서 글자를 보았을 때 혼동이 올 경우가 있습니다. 예를 들어 'class' 같은 경우 'c' 와 'l' 이 붙어 있어서 'd' 자로 착각할 수 있는데 이 때 'c' 와 'l' 의 간격을 조절 하므로써 그런 혼동을 피할 수 있습니다.

  [표 보는 방법]
letter-spacing Property
Value normal | <length> | Inherit
Initial normal (0 : Zero)
Applies to all elements
Inherited yes
Percentages N/A
Media Visual
HTML Syntax { letter-spacing: sSpacing }
Scripting object.style.letterSpacing [ = sSpacing ]




CSS Scripting
onClick="this.style.letterSpacing='2px';"


글자 간격(letter-spacing)을 2pixel로 띄우기
<HTML>
    <HEAD>
        <TITLE>letter-spacing Property</TITLE>
    </HEAD>
    <BODY>
        <DIV onMouseDown="this.style.letterSpacing='2px';" 
        onMouseUP="this.style.letterSpacing='';">
            ABCDEFGHIJKLMNOPQRSTUVWXYZ<BR>
            abcdefghijklmnopqrstuvwxyz<BR>
            0123456789<BR>
            한글의 경우는 사실 덜 합니다만 영문자의 경우는 글자 간격이 너무 좁아서 글자를 <BR>
            보았을 때 혼동이 올 경우가 있습니다. 예를 들어 'class' 같은 경우 'c' 와 'l' 이 붙어 <BR>
            있어서 'd' 자로 착각할 수 있는데 이 때 'c' 와 'l' 의 간격을 조절 하므로써 그런 혼동을 <BR>
            피할 수 있습니다.
        </DIV>
    </BODY>
</HTML>
출력결과
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
한글의 경우는 사실 덜 합니다만 영문자의 경우는 글자 간격이 너무 좁아서 글자를
보았을 때 혼동이 올 경우가 있습니다. 예를 들어 'class' 같은 경우 'c' 와 'l' 이 붙어
있어서 'd' 자로 착각할 수 있는데 이 때 'c' 와 'l' 의 간격을 조절 하므로써 그런 혼동을
피할 수 있습니다.


단어 중 특정 부분의 간격만 띄우기

위에서 설명 했듯이 'class' 같은 단어의 경우를 'c' 와 'l' 의 간격만 띄우는 예제를 하나 해 보도록 하죠. 이 경우에는 줄 바꿈이 일어나지 않는 SPAN Element 를 사용하여 필요한 부분의 자간을 조절합니다.

특정 부분의 자간 조절하기
<HTML>
    <HEAD>
        <TITLE>특정 부분의 자간 조절하기</TITLE>
    <STYLE type="text/css">
    <!-- 
    .letter1 { letter-spacing : 1px;}
    -->
    </STYLE>
    </HEAD>
    <BODY>
        class  <!-- letter-spacing을 조절하지 않은 상태 -->
        <SPAN class="letter1">cl</SPAN>ass <!-- letter-spacing 을 조절한 상태 -->
    </BODY>
</HTML>
출력결과
class
class





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색