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. 강제 줄바꿈된 이후의 모두 첫 줄에도 들여쓰기가 적용됩니다.

letter-spacing

글자들 사이의 최소, 최대, 최적 간격을 지정합니다.
값을 3개까지 지정할 수 있으며, 3개의 값이 지정되면 최적, 최소, 최대 순으로 지정됩니다. 2개의 값이 지정되면 앞의 값은 최적, 최소 간격이고, 뒤의 값은 최대 간격입니다. 하나의 값만 지정되면 3개의 값에 모두 동일한 값이 할당됩니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

예

기본값

normal

사용법

letter-spacing: 3px;

object.style.letterSpacing = "10px"

속성

normal

현재 요소의 글꼴에 맞게 웹브라우저가 알아서 지정합니다.

<length>

길이 단위를 사용해서 간격을 지정합니다.

word-spacing

단어들 사이의 최소, 최대, 최적 간격을 지정합니다.
값을 3개까지 지정할 수 있으며, 3개의 값이 지정되면 최적, 최소, 최대 순으로 지정됩니다. 2개의 값이 지정되면 앞의 값은 최적, 최소 간격이고, 뒤의 값은 최대 간격입니다. 하나의 값만 지정되면 3개의 값에 모두 동일한 값이 할당됩니다.

CSS Level

CSS 1, CSS 2, CSS 3

상속

예

기본값

normal

사용법

word-spacing: 30px;

object.style.wordSpacing = "10px"

속성

normal

현재 요소의 글꼴에 맞게 웹브라우저가 알아서 지정합니다.

<length>

길이 단위를 사용해서 간격을 지정합니다.

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는 계산된 값이 사용됩니다.

overflow-wrap

단어가 길어서 줄바꿈이 일어나는 경우에 단어를 나눌지 여부를 지정합니다. white-space 프로퍼티가 자동 줄바꿈이 작동하도록 지정되어 있어야 적용됩니다.
word-wrap은 overflow-wrap의 다른 이름입니다.

CSS Level

CSS 3

상속

예

기본값

normal

사용법

overflow-wrap: break-word;

속성

normal

줄바꿈이 허용된 곳에서만 줄바꿈을 합니다.

break-word

단어가 단누어질 수 있습니다.

hyphens

줄바꿈으로 단어가 나뉘어질 때 하이픈을 자동으로 삽입하는 방식을 지정합니다.

CSS Level

CSS 3

상속

예

기본값

manual

사용법

hypens: none;

속성

none

하이픈을 삽입하지 않습니다.

manual

HTML에서 소프트 하이픈 문자인 &shy;를 지정한 때에만 하이픈을 사용합니다.

auto

자동으로 처리합니다.

word-break

줄바꿈을 적용할 때 단어를 나누는 규칙을 지정합니다.

CSS Level

CSS 3

상속

예

기본값

normal

사용법

word-break: keep-all;

속성

normal

일반적인 규칙을 따릅니다.

keep-all

공백 이외에 서로 붙어있는 글자들을 한 단어로 붙여서 처리합니다.

break-all

문자 단위로 나뉘어질 수 있습니다.