text-shadow

텍스트의 그림자 효과를 지정합니다.
콤마(,)로 구분해서 여러 효과를 겹쳐서 표시할 수 있습니다. 먼저 지정한 효과가 앞에 표시됩니다.

CSS Level

CSS 3

상속

예

기본값

none

사용법

text-shadow: 2px 2px 3px #666;

object.style.textShadow = "2px 2px #ff0000"

속성

none

그림자를 지정하지 않습니다.

<length>

2~3개의 값을 지정할 수 있으며, 순서대로 수평 옵셋, 수직 옵셋, 블러 입니다.

<color>

그림자의 색상을 지정합니다.

text-emphasis-position

텍스트 강조점의 위치를 지정합니다. 가로 쓰기 모드에서의 값과 세로 쓰기 모드의 값을 공백으로 구분해서 지정합니다.

CSS Level

CSS 3

상속

예

기본값

above right

사용법

text-emphasis-position: below left;

속성

above

텍스트 위에 표시합니다.

below

텍스트 아래에 표시합니다.

left

세로 쓰기 모드에서 텍스트의 왼쪽에 표시합니다.

right

세로 쓰기 모드에서 텍스트의 오른쪽에 표시합니다.

text-emphasis

텍스트의 강조점의 스타일과 색상을 지정하는 단축 프로퍼티 입니다. 스타일과 색상을 공백으로 구분해서 지정합니다. 생략된 값은 각각의 기본값이 적용됩니다.

CSS Level

CSS 3

상속

예

기본값

currentColor

사용법

text-emphasis: filled circle #f00;

속성

<text-emphasis-style>

스타일을 지정합니다.

<text-emphasis-color>

색상을 지정합니다.

text-emphasis-color

강조점의 색상을 지정합니다.

CSS Level

CSS 3

상속

예

기본값

currentColor

사용법

text-emphasis-color: #fff;

속성

<color>

색상을 지정합니다.

text-emphasis-style

요소의 텍스트에 지정할 강조점의 스타일을 설정합니다. 도형 앞에 filled 또는 open이 지정되지 않으면 filled인 것으로 간주됩니다.

CSS Level

CSS 3

상속

예

기본값

none

사용법

text-emphasis-style: filled circle;

속성

none

강조점을 적용하지 않습니다.

filled

단색으로 채웁니다. 도형 이름 앞에 지정 합니다.

open

도형의 속을 채우지 않습니다. 도형 이름 앞에 지정 합니다.

dot

•, ◦

circle

●, ○

double-circle

◉, ◎

triangle

▲, △

sesame

﹅, ﹆

<string>

문자를 강조점으로 사용합니다. 단 한글자만 지정해야 합니다.

text-underline-position

텍스트의 밑줄 위치를 지정합니다. 부모 요소로부터 정의된 밑줄에는 적용되지 않습니다.
below만 지정된 경우에는 left도 지정된 것으로 간주합니다. left 또는 right 만 지정된 때에는 below도 지정된 것으로 간주합니다.

CSS Level

CSS 3

상속

예

기본값

auto

사용법

text-underline-position: alphabetic;

속성

auto

웹 브라우저가 자동으로 지정합니다.

alphabetic

below

left

세로 쓰기 모드에서 왼쪽으로 지정합니다.

right

세로 쓰기 모드에서 오른쪽으로 지정합니다.

text-decoration-skip

텍스트 장식을 적용하지 않을 대상을 지정합니다. none 외의 값은 여러 개를 공백으로 구분해서 지정할 수 있습니다.

CSS Level

CSS 3

상속

예

기본값

object

사용법

text-decoration-skip: none;

속성

none

아무 것도 제외하지 않습니다.

object

이미지나 인라인 블럭에는 적용하지 않도록 합니다.

spaces

공백 문자등에는 장식을 적용하지 않습니다.

edges

두 개의 이어진 각각의 장식이 하나로 붙어서 보이지 않도록 합니다.

text-decoration

텍스트 장식을 지정하는 단축형 프로퍼티 입니다. 하나 이상의 속성을 공백으로 구분해서 나열합니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

아니오

기본값

none

사용법

text-decoration: underline

text-decoration: navy dotted underline;

object.style.textDecoration = "overline"

속성

<text-decoration-line>

텍스트 장식 라인 종류를 지정합니다.

<text-decoration-style>

텍스트 장식 라인 스타일을 지정합니다.

<text-decoration-color>

텍스트 장식 색상을 지정합니다.

blink

텍스트가 깜빡이도록 합니다.

text-decoration-style

text-decoration-line 프로퍼티로 지정한 장식의 스타일을 지정합니다.

CSS Level

CSS 3

상속

아니오

기본값

solid

사용법

text-decoration-style: wavy

속성

solid

실선.

double

이중선.

dotted

점선.

dashed

점선.

wavy

물결선.

text-decoration-color

text-decoration-line 프로퍼티로 지정한 장식의 색상을 지정합니다.

CSS Level

CSS 3

상속

아니오

기본값

currentColor

사용법

text-decoration-color: #fff

속성

<color>

색상을 지정합니다.

text-decoration-line

텍스트의 라인 장식을 지정합니다. none 이외의 값은 여러 개를 함께 지정할 수 있습니다.

CSS Level

CSS 3

상속

아니오

기본값

none

사용법

text-decoration-line: underline;
text-decoration-line: underline overline;

속성

none

텍스트에 줄을 긋지 않습니다.

underline

텍스트 아래에 줄을 긋습니다.

overline

텍스트 위에 줄을 긋습니다.

line-through

텍스트 가운데에 줄을 긋습니다.

text-indent

텍스트의 들여쓰기 간격을 지정합니다. each-line이나 hanging이 함께 지정되지 않으면 첫 줄에만 적용됩니다. 블록 컨테이너 요소에 적용할 수 있습니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

예

기본값

0

사용법

text-indent: 5em;
text-indent: 5em each-line;
text-indent: 5em each-line hanging;

object.style.textIndent = "50px"

속성

<length>

들여쓰기 간격을 길이 단위로 지정합니다.

<%>

컨테이너 블록의 너비에 대한 비율로 지정합니다.

hanging

CSS 3. 적용되는 라인을 반대로 적용합니다.

each-line

CSS 3. 강제 줄바꿈된 이후의 모두 첫 줄에도 들여쓰기가 적용됩니다.

text-justify

text-align 프로퍼티의 값이 justify인 경우에 정렬 방식을 지정합니다.

CSS Level

CSS 3

상속

예

기본값

auto

사용법

text-justify: inter-word;

속성

auto

웹브라우저가 자동으로 결정합니다.

none

정렬하지 않습니다.

inter-word

단어 사이의 공백 간격을 조절합니다.

inter-ideograph

단어 사이의 간격과 글자 사이의 간격을 조절합니다.

inter-cluster

단어 사이의 간격과 글자 사이의 간격을 조절합니다.

distribute

단어 사이의 간격과 글자 사이의 간격을 동일하게 조절합니다.

kashida

필기체 문자를 늘입니다.

text-align-last

마지막 줄의 텍스트 정렬 방식을 지정합니다. 블록 컨테이너 요소에 적용할 수 있습니다.

CSS Level

CSS 3

상속

예

기본값

auto

사용법

text-align-last: right

속성

auto

text-align의 값을 따라 정렬합니다.

start

시작 위치에 정렬합니다.

end

끝 위치에 정렬합니다.

left

왼쪽으로 정렬합니다.

right

오른쪽으로 정렬합니다.

center

가운데 정렬합니다.

justify

text-justify 프로퍼티에 따라 정렬합니다.

text-align

인라인 요소의 텍스트 정렬 방식을 지정합니다. 블록 컨테이너 요소에 적용할 수 있습니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

예

기본값

start

사용법

text-align: right

object.style.textAlign = "right"

속성

start

CSS 3. 현재 라인 박스의 시작 위치에 정렬합니다.

end

CSS 3. 현재 라인 박스의 끝에 정렬합니다.

left

왼쪽에 정렬합니다.

right

오른쪽에 정렬합니다.

center

가운데 정렬합니다.

justify

text-justify 프로퍼티에 따라 정렬합니다.

match-parent

CSS 3. inherit과 유사하지만 start, end는 계산된 값이 사용됩니다.

text-transform

텍스트의 대소문자를 변경합니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

예

기본값

none

사용법

text-transform: capitalize;

object.style.textTransform = "uppercase"

속성

none

아무런 효과도 없습니다.

capitalize

각 단어의 첫 문자를 대문자로 변경합니다.

uppercase

모든 문자를 대문자로 변경합니다.

lowercase

모든 문자를 소문자로 변경합니다.

full-width

CSS 3. 모든 문자를 가능한 경우에 전각문자로 변경합니다.

text-overflow

요소의 인라인 컨텐트가 블록 컨테이너를 벗어나는 경우에 표현하는 방법을 지정합니다. overflow 프로퍼티의 값이 visible이 아니어야 하고, 블록 컨테이너에 적용할 수 있습니다.

CSS Level

CSS 3

상속

아니오

기본값

clip

사용법

text-overflow: ellipsis;

object.style.textOverflow = "ellipsis"

속성

clip

잘려진 일부만 보여줍니다.

ellipsis

말줄임표(…)를 표시합니다.