텍스트 2



text - transform

text - align

text - indent

line - height

white - space


대소문자 지정(text-transform)

SELECTOR { text-transform : capitalize | uppercase | lowercase | none }

  • text-transform은 대소문자를 변환해 주는 기능으로 font-variant와 같은 유사한 기능으로, 좀 더 확장된 속성을 가지고 있습니다.
  • 속성값으로는 아래와 같은 값이 있습니다.

    1. capitalize:영문자의 첫 자만을 대문자로 바꾸어 줍니다.
    2. none:아무런 작용을 하지 않습니다.
    3. uppercase: 모든 영문자를 대문자로 바꾸어 줍니다.
    4. lowercase: 모든 영문자를 소문자로 바꾸어 줍니다.

속성 Browser
capitallize Flowers make our rooms cheerful.
none Flowers make our rooms cheerful.
uppercase
Flowers make our rooms cheerful.
lowercase
Flowers make our rooms cheerful.


문자열의 정렬(text-align)

SELECTOR { text-align : left | center | right | justify }

  • text-align은 P, DIV, H1 등 block-level element 안에 있는 텍스트 정렬 방식을 지정하는 것입니다.
  • 속성값으로는 아래와 같은 값이 있습니다.

    1. left:텍스트를 왼쪽으로 정렬합니다.
    2. center:텍스트를 중앙정렬합니다.
    3. right: 텍스트를 오른쪽으로 정렬합니다.
    4. justify: 양쪽맞춤으로 정렬합니다. 이것은 문서의 양이 적은 곳에서는 효과가 드러나지 않는 속성입니다.(left정렬로 보임) 문서의 양이 길어져 문서의 오른쪽 끝선을 가지런하게 하는 기능을 합니다.

속성 Browser
left

HTML의 left align 속성과 동일한 기능을 합니다.

center

HTML의 center align 속성과 동일한 기능을 합니다.

right

HTML의 right align 속성과 동일한 기능을 합니다.

justify

이것은 CSS에만 있는 유일한 기능입니다.


문자열의 들여쓰기(text-indent)

SELECTOR { text-align : 길이, 또는 백분율(%)}

  • text-indent기능은 문자열을 들여쓰기할 때사용합니다.
  • 속성값은 길이(length-CSS에서 적용하는 단위)또는 백분율()을 적용하며, 음의 값도 사용합니다.
    ※ 백분율은 용기 블럭(containing block) 너비의 백분율 만큼 들여쓰기합니다.

< P style="text-indent :30pt">문자열을 들여 쓸 때 이 기능을 이용하세요. - 30pt 의 경우< /P>
< P style="text-indent :3cm">문자열을 들여 쓸 때 이 기능을 이용하세요. - 3cm의 경우< /P>
< P style="text-indent :20px">문자열을 들여 쓸 때 이 기능을 이용하세요. - 20px의 경우< /P>
< P style="text-indent :3em">문자열을 들여 쓸 때 이 기능을 이용하세요. - 3em의 경우< /P>

문자열을 들여 쓸 때 이 기능을 이용하세요. - 30pt 의 경우

문자열을 들여 쓸 때 이 기능을 이용하세요. - 3cm의 경우

문자열을 들여 쓸 때 이 기능을 이용하세요. - 20px의 경우

문자열을 들여 쓸 때 이 기능을 이용하세요. - 3em의 경우


문서의 줄간격(line-height)

SELECTOR { line - height : normal, 길이, 또는 백분율(%)}

  • line-height기능은 사용자들의 가독성을 높이기 위해 문장의 줄간격을 설정할 때 사용합니다.
  • 이 기능은 text-align, text-decoration과 더불어 가장 많이 사용하는 속성입니다.

속성 Browser
normal

Line-height는 사용자들의 가독성을 높이기 위해 문장의 줄 간격을 설정할 때 사용합니다.
5pt

Line-height는 사용자들의 가독성을 높이기 위해 문장의 줄 간격을 설정할 때 사용합니다.
10pt

Line-height는 사용자들의 가독성을 높이기 위해 문장의 줄 간격을 설정할 때 사용합니다.
50pt

Line-height는 사용자들의 가독성을 높이기 위해 문장의 줄 간격을 설정할 때 사용합니다.
400%

Line-height는 사용자들의 가독성을 높이기 위해 문장의 줄 간격을 설정할 때 사용합니다.


공백(white-space)

SELECTOR { white - space : normal, pre, nowrap}

  • white-space는 스페이스를 어떻게 처리할 것인지를 정의합니다.
  • white-space속성은 블록 레벨 요소(block level element)에 사용되며 공백, 즉 스페이스, 탭, 줄 바꿈에 관한 내용을 설정합니다.
  • 이 기능은 Internet Explorer에서 지원하지 않으며, Netscape Communicator는 nowrap을 지원하지 않습니다.
    1. normal:HTML과 똑같이 여러 개의 스페이스를 하나로 처리합니다.
    2. pre:< PRE >태그처럼 입력한 그대로 화면에 디스플레이합니다.
    3. nowrap: normal속성과 같으나 < BR >태그를 적기 이전에 줄 넘김을 하지 않습니다.

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

    .CODE { white-space: pre; }
    PRE { white-space: pre }
    P { white-space: normal }
    TD[nowrap] { white-space: nowrap }