텍스트 1



letter - spacing

word - spacing

text - decoration

text - shadow

vertical-align


글자의 간격(letter-spacing)

SELECTOR { letter-spacing : "normal" 또는 "글자간의 간격 값"}

  • letter-spacing은 글자 사이의 간격을 말합니다.
  • 속성값으로는 숫자에 단위를 사용하며 음수값도 사용할 수 있습니다. 이 길이의 단위는 글자 간격의 디폴트 공간에 추가하여 글자 간격의 공간을 지정합니다.
  • 기본 문자 거리에서 더해주는 값을 지정하는 상대적 길이 단위인 em으로 표기하면 적용하기 쉽습니다.
  • 1em 이라는 것은 기본 글꼴 하나만큼의 간격을 띄우면서 적용되는 것을 말합니다. 그렇다면 0.5em이라면 글꼴 반만큼만 띄어지면서 적용하라는 의미겠죠?

속성 Browser
normal

글자간의 간격이 normal입니다.
1em

글자간의 간격이 1em입니다.
2em

글자간의 간격이 2em입니다.
-0.1em

음수의 값을 사용하니까 조금 답답하죠?


단어의 간격(word-spacing)

SELECTOR { letter-spacing : "normal" 또는 "단어간의 간격 값(숫자와 단위사용)"}

  • word-spacing은 단어와 단어 사이의 간격을 설정하는 기능을 갖고 있습니다.
  • 문서에서 단어와 단어 사이에 스페이스가 입력되는 곳의 크기를 설정합니다.
  • 이 속성은 Netscape 6에서 처음으로 지원하고 있으며, 익스플로러 역시 6.0부터 지원하고 있습니다.

< STYLE type="text/css">
.ONE {word-spacing: none}
.TWO {word-spacing: 10px}
< /STYLE >

none : < font class="one">단어와 단어 사이의 간격< /font >< p >
10px : < font class="two">단어와 단어 사이의 간격< /font >
 단어와 단어 사이의 간격 조절 {word-spacing} none : 단어와 단어 사이의 간격

10px : 단어와 단어 사이의 간격


"Browser가 Netscape는 6, Explorer는 6.0에서만 보입니다. 저는 안보여요. ㅠ.ㅠ."


글자의 장식(text-decoration)

SELECTOR { text-decoration : 속성값}

속성값 ☞ none, underline , overline, line-through, blink

    text-decoration은 텍스트를 어떻게 해서 보여줄 것인가를 말합니다.

    1. none : 텍스트를 그냥 보여줍니다.(기본값)
    2. underline : 텍스트에 밑줄을 그어서 보여줍니다.
      (HTML의 < U >...< /U >와 비슷합니다.)
    3. overline : 텍스트에 윗줄을 그어서 보여줍니다.(넷스케이프 4.7에서는 윗줄을 나타내는 overline이 지원되지 않습니다.)
    4. line-througn: 텍스트를 관통하여 중앙에 줄을 그어 줍니다.
      (HTML의 < STRIKE >...< /STRIKE >와 비슷합니다.)
    5. blink : 텍스트가 깜빡이게 보여줍니다.(옛날에는 넷스케이프에서만 지원되었었는데.. 현재는 넷스케이프가 6.1로 업그레이드되면서 이 blink태그가 지원되지 않습니다.)

속성 Browser
none

글자에 아무런 기능을 하지 않습니다.(기본값)
underline

글자에 밑줄을 긋는 기능입니다.
overline

글자에 윗줄을 긋는 기능입니다.
line-through

글자 중앙으로 줄을 긋는 기능입니다.
blink

글자를 깜빡입니다.


글자에 그림자효과 장식(text-shadow)

SELECTOR { text-shodow : none | [색상,|| 길이(그림자 범위), 길이, 길이 , 길이]}

속성값 ☞ none, 색상, 길이

    text-shadow는 텍스트에 그림자 효과를 줍니다.

    • none : 그림자 효과가 나타나지 않습니다.(기본값)
    • 속성(색상, 길이)의 사용으로 나타나는 그림자가 해당 요소의 박스 범위를 넘는다고 해도 박스 크기는 변함없이 그림자는 모두 출력됩니다.
    • 그리고 컴머(,)로 구분하여 여러 개의 그림자를 한꺼번에 나타낼 수도 있습니다.
    • 색이름은 직접 입력하거나, RGB값으로 입력하고, 그림자의 범위는 "숫자 + 단위"를 사용해서 나타냅니다.
    • 각각의 속성값은 모두 공백으로 구분하고 색 설정 속성값은 맨 뒤에 올 수도 있습니다.
    • 하지만 이 그림자효과는 아직까지 익스플로러와 넷스케이프에서 모두 지원하고 있지 않습니다.

    1. 첫번째 "숫자 + 단위" ☞ 텍스트에서 오른쪽으로 얼마나 떨어져서 그림자를 나타낼 것인가
    2. 두번째 "숫자 + 단위" ☞그림자의 길이를 얼마나 나타낼 것인가를 설정합니다. 이 값을 음수(-)로 설정하면 왼쪽과 위쪽으로의 거리가 됩니다.
    3. 세번째 "숫자 + 단위" ☞나타날 그림자의 블러(blur)효과(=음영효과)의 경계를 설정합니다.
    4. 세번째 "숫자 + 단위" ☞그림자 음영색을 설정

    ★ 브라우저에서 지원하지 않기때문에..그 효과를 볼 수가 없군요. 예제는 이렇습니다.

    H1 { text-shadow: 0.2em 0.2em }
    H2 { text-shadow: 3px 3px 5px red }
    H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
    SPAN.glow { background: white; color:white; text-shadow:black 0px 0px 5px;}


글자를 수직정렬(vertical-align)

SELECTOR { text-decoration : 속성값}

속성값 ☞ baseline, sub, super, middle, text-top, text-bottom, top, bottom

    vertical-align은 이미지나 글꼴의 수직정렬을 말합니다. baseline이 기본값입니다. vertical-align은 지정한 요소를 정렬하는 목적으로 사용되는 것이 아니라 지정한 요소의 옆에 사용된 내용들을 수직 정렬 하는 데 있습니다.

    1. baseline : 그 모체의 baseline으로 그 엘레멘트의 기초 라인(baseline: 또는 그 엘레멘트가 baseline을 갖고 있지 않으면 bottom)에 정렬합니다.
    2. sub : 아래첨자를 만듭니다.
    3. super :윗첨자를 만듭니다.
    4. middle: 그 모체의 기초 라인(baseline) 더하기 x-height의 반에 그 엘레멘트의 중심선을 수직으로 정렬합니다. 이미지와 함께할 때는 텍스트를 중앙에 맞춥니다.
    5. text-top :모체 엘레멘트의 폰트 맨 위(top)에 그 엘레멘트의 맨 위에 정렬합니다. 이미지와 함께 할 경우 텍스트를 맨 위에 맞춥니다.
    6. text-bottom : 모체 엘레멘트의 폰트 맨 아래(bottom)에 그 엘레멘트의 맨 위에 정렬을 합니다.
    7. top : 그 줄의 가장 키 큰 엘리멘트 중에서 맨 위에 정렬합니다.
    8. bottom : 그 줄에서 가장 낮은(lowest) 엘레멘트를 그 엘레멘트의 맨 아래(bottom)에 정렬합니다.

baseline < font style="vertical-align:baseline;color:blue" >그 모체의 baseline으로< /font >그 엘레멘트의 기초 라인(baseline: 또는 그 엘레멘트가 baseline을 갖고 있지 않으면 bottom)에 정렬(align)합니다.
그 모체의 baseline으로그 엘레멘트의 기초 라인(baseline: 또는 그 엘레멘트가 baseline을 갖고 있지 않으면 bottom에 정렬합니다.
sub < font style="vertical-align:sub;color:blue" >아래첨자< /font >는 이렇게 표현되어집니다.
아래첨자는 이렇게 표현되어집니다.
super < font style="vertical-align:super;color:blue" >윗첨자< /font >는 이렇게 표현되어집니다.
윗첨자는 이렇게 표현되어집니다.
middle < img src="그림.gif" style="vertical-align:middle" >이미지와 함께 할 경우 텍스트를 중앙에 맞춥니다.
이미지와 함께 할 경우 텍스트를 중앙에 맞춥니다.
text-top < img src="그림.gif" style="vertical-align:text-top" >이미지와 함께 할 경우 텍스트를 맨 위에 맞춥니다.
이미지와 함께 할 경우 텍스트를 맨 위에 맞춥니다.
text-bottom < img src="그림.gif" style="vertical-align:text-bottom" >이미지와 함께 할 경우 텍스트를 맨 아래에 맞춥니다.
이미지와 함께 할 경우 텍스트를 맨 아래에 맞춥니다.
top < font style="color:blue;font-size:50px">그 줄의< /font >
< font style="color:green;font-size:20px">가장 키 큰 엘리멘트들 중에서< /font>
< font style="vertical-align:top;color:red" >맨 위(top)에 정렬합니다.< /font >
그 줄의가장 키 큰 엘리멘트들 중에서맨 위(top)에 정렬합니다.
bottom < font style="color:blue;font-size:50px">그 줄의< /font >
< font style="color:green;font-size:20px">가장 키 큰 엘리멘트들 중에서< /font>
< font style="vertical-align:bottom;color:red" >맨 아래(bottom)에 정렬합니다.< /font >
그 줄의가장 낮은 엘리멘트들 중에서맨 아래(bottom)에 정렬합니다.

"top과 bottom"속성은 Explorer 6.0이상에서 지원되는것 같습니다. Browser가 5.0에서는 표현되어지지 않는군요. 참고하세요.