text

 

-color

:텍스트의 색상을 지정한다.

 

{ color:value; }

color : 텍스트의 색상을 직접 컬러값으로 지정

inherit : 지정 요소의 텍스트 색상 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

body { color:red; }
h1 { color:#00ff00; }
p { color:rgb(0,0,255); }

 

*CSS 에서 사용할 수 있는 색상코드는 Hexadecimal color(가장 많이 사용하는 방법), RGB color, RGBA color, HSL color, HSLA color, Predefined/Cross-browser color names 처럼 다양한 종류가 있다.

Hexadecimal color { color:#00ff00; }

RGB color { color:rgb(255,0,0); }

RGBA color { color:rgba(255,0,0,0.5); }

HSL color { color:hsl(120,65%,75%); }

HSLA color { color:hsla(120,65%,75%,0.3); }

Predefined/Cross-browser color names { color:red; }

HTML과 CSS에서 사용 가능한 색상 이름은 147가지이다. 아래 예제처럼 red, blue, yellow 등으로 사용할 수 있다.

 

 

-direction

:텍스트의 흐름과 글이 쓰여지는 방향을 지정한다.

 

{ direction:value; }

ltr : 기본값(default), 쓰기방향이 왼쪽에서 오른쪽으로 지정

rtl : 쓰기방향이 오른쪽에서 왼쪽으로 지정

inherit : 지정 요소의 텍스트 방향 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { direction:rtl; }

 

 

-letter-spacing

:텍스트 내에서 문자 간의 간격의 좁고 넓음의 여부를 지정한다.

 

{ letter-spacing:value; }

normal : 기본값(default), 자간 간격이 기본값으로 지정

length : 직접 간격을 지정하며 음수값도 허용됨

inherit : 지정 요소의 자간 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

h1 { letter-spacing:2px; }
h2 { letter-spacing:-3px; }

 

 

-line-height

:텍스트 줄간의 간격을 지정한다(자간에서는 음수값이 허용되지면 여기 행간은 음수값이 허용되지 않는다).

 

{ line-height:value; }

normal : 기본값(default), 줄 간격이 기본값으로 지정

number : 지정된 수 만큼 글자 폰트크기와 곱하여서 줄 간격을 지정

length : 직접 간격을 지정

% : 해당 폰트 크기의 %만큼을 계산하여 줄 간격에 지정

inherit : 지정 요소의 줄 간격 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { line-height:90% }
p { line-height:3; }

 

 

-text-align

:요소 안의 텍스트 수평 정렬 값을 지정한다.

 

{ text-align:value; }

left : 왼쪽으로 텍스트를 정렬

right : 오른쪽으로 텍스트를 정렬

center : 중앙으로 텍스트를 정렬

justify : 각 줄의 정렬을 동일한 너비로 일정하게 양쪽 정렬

inherit : 지정 요소의 텍스트 정렬 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { line-height:90% }
p { line-height:3; }

 

 

-text-decoration

:텍스트에 효과를 주는 것으로 line 스타일과 관련이 있다.

 

{ text-decoration:value; }

none : 기본값(default), 꾸밈없는 기본텍스트 상태

underline : 텍스트 아래에 라인을 지정(밑줄 효과)

overline : 텍스트 위에 라인을 지정(윗줄 효과)

line-through : 텍스트 중앙에 라인을 지정

blink : 텍스트에 깜빡임 효과를 지정(blink 속성은 IE, Chrome, Safari 브라우저는 지원하지 않음)

inherit : 지정 요소의 텍스트 꾸밈 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

h1 { text-decoration:overline; }
h2 { text-decoration:line-through; }
h3 { text-decoration:underline; }

 

 

-text-indent

:텍스트 블럭 안에서 첫 번째 줄의 들여쓰기 값을 지정한다.

 

{ text-indent:value; }

length : px, pt, cm, em 단위로 들여쓰기를 지정

% : 부모요소의 너비값을 % 로 계산하여 들여쓰기를 지정

inherit : 지정 요소의 들여쓰기 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

p { text-indent:50px; }

 

 

-text-transform

:텍스트의 대문자화 속성을 지정한다.

 

{ text-transform:value; }

none : 기본값(default), 대문자화 없이 기본 상태로 지정

capitalize : 각 단어의 첫 번째 문자를 대문자로 지정

uppercase : 모든 문자를 대문자로 지정

lowercase : 모든 문자를 소문자로 지정

inherit : 지정 요소의 텍스트 대문자화 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

h1 { text-transform:uppercase; }
h2 { text-transform:capitalize; }

 

 

-unicode-bidi

:

 

 

-vertical-align

:요소의 수직 정렬 상태를 지정한다.

 

{ vertical-align:value; }

length

%

baseline

sub

super

top

text-top

middle

bottom

text-bottom

inherit : 지정 요소의 수직정렬 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

img { vertical-align:text-top; }

 

-white-space

:엘리먼트 안에서 공백문자를 어떻게 처리할지 지정한다.

 

{ white-space:value; }

normal : 기본값(default), 브라우저 기본 스타일로 나타냄, 연속공백과 줄바꿈을 통합

nowrap : 연속공백은 통합하고 줄바꿈은 하지 않음

pre : 연속공백, 줄바꿈 모두 하지 않고 원본 그대로 나타남

pre-line :

pre-wrap :

inherit : 지정 요소의 빈공간 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { white-space:nowrap; }

 

 

-word-spacing

:단어와 단어 간의 공간을 지정한다.

 

{ word-spacing:value; }

normal : 기본값(default), 브라우저 기본 스타일로 나타냄

length : px, cm, em 단위로 단어 간격을 직접 지정하며 음수도 허용

inherit : 지정 요소의 단어 간격 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { word-spacing:30px; }

 

 

출처 : http://htmlcss.kr/css/text/