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