본문 바로가기
it,인터넷

[CSS] 텍스트 속성 text-align, text-decoration; text-indent;text-justify,text-overflow, text-shadow

by 낯선.공간 2016. 8. 7.

목차

    텍스트 속성 text-align, text-decoration; text-indent;text-justify,text-overflow, text-shadow

    text-align

    inherit

    left

    center

    right

    justify

       

       

    글자의 배치를 "왼쪽 중앙 오른쪽"중 어느것을 기준으로 할지 결정한답니다.

    이 중 가장 퍼블리셔를 골치 아프게 하는 속성이 justify입니다. text-justify와 함께 쓰입니다.

    text-align:inherit; (상위 속성 상속)

    text-align:left;

    text-align:center;

    text-align:right;

    text-decoration

    inherit

    none

    underline

    overline

    line-through

    blink 

       

    a 태그와 가장 많이 쓰이죠. link의 밑줄을없애는 용도에서 많이 보죠. none~ 

    text-decoration:inherit;

    text-decoration:underline;

    text-decoration:overline;

    text-decoration:line-through;

    text-decoration:blink;(오페라,파이어폭스에서만 깜빡입니다)

    text-indent

    inherit

    px

    pt

    cm

    em

    %

       

    들여쓰기 기능입니다. 

    text-indent:20px;

    text-indent:20pt;

    text-indent:2cm;

    text-indent:2em;

    text-indent:20%;

    text-justfy

    inherit

    auto, none

    inter-word

    inter-ideograph

    inter-cluster

    distribute

    kashida

    text-align과 함께 쓰입니다. 균등 배분하는데 쓰이며 텍스트 속성중에 가장 골치 아픈데도 불구 하고 IE에서만 지원합니다.


    text-overflow

    inherit

    clip

    ellipsis

       

       

       

       

    개발자들에게 아주 희소식인 기능입니다. 게시판 제목등이 길 때 UI에서 잘라 버립니다. 개발자는 제목의 길이에 대해 이제 신경쓰지 않아도 됩니다.

    2016/08/06 - [it,인터넷/UI,UX] - CSS 텍스트 속성 : text-align:justify,text-justify:auto,inter-word,inter-ideograph,inter-cluster,distribute,kashida,newspaper,distribute-all-lines,distribute-center-last

    text-shadow

    inherit

    h-shadow

    v-shadow

    blur

    color

       

       

    CSS3
    간단한 형태의 LNB, GNB는 이제 굳이 이미지 GIF를 쓰지 않아도 예쁘게 만들 수 있습니다. 단, IE9 이하만 빼고 다됩니다.

    예제는 별도 포스팅 예정

    text-transform

    inherit

    none

    capitalize

    uppercase

    lowercase

       

       

    이름은 거창한데 기능은 한국에서는 거의 쓸모 없는 대문자,소문자 변환 기능입니다. 

    uppercase는 대문자로

    lowercase는 소문자로

    capitalize는 단어의 앞글자만 대문자로. 

    TEXT-TRANSFORM:UPPERCASE;

    text-transform:lowercase;

    Text-Transform: Capitalize;

    text-wrap

    inherit

    지원브라우저 없음

    CSS3

    text-outline

    inherit

    지원브라우저 없음

    CSS3

     

    반응형