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

Posted by 낯선.공간
2016. 8. 7. 00:30
반응형

텍스트 속성 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

 

이 댓글을 비밀 댓글로