다음 섹션에서 정의된 속성은 문자, 공백, 단어 및 단락의 시각적 표현에 영향을 줍니다.
이 속성은 블록 컨테이너에서 텍스트 첫 줄의 들여쓰기를 지정합니다.
보다 정확히 말하자면, 블록의 첫 라인 박스로 흐르는 첫 번째 박스의 들여쓰기를 지정합니다.
박스는 라인 박스의 왼쪽(또는 오른쪽에서 왼쪽 레이아웃의 경우 오른쪽) 가장자리 기준으로 들여쓰기 됩니다.
사용자 에이전트는 이 들여쓰기를 공백으로 렌더링해야 합니다.
'text-indent'는 요소의 첫 번째 형식화된 줄인 경우에만 줄에 영향을 미칩니다.
예를 들어, 익명 블록 박스의 첫 줄은 부모 요소의 첫 번째 자식인 경우에만 영향을 받습니다.
값의 의미는 다음과 같습니다:
- <length>
- 들여쓰기가 고정된 길이입니다.
- <percentage>
- 들여쓰기가 포함 블록 너비의 백분율입니다.
'text-indent' 값은 음수가 될 수 있지만, 구현별 제한이 있을 수 있습니다.
'text-indent' 값이 음수이거나
블록 너비를 초과하는 경우, 위에서 설명한 첫 번째 박스가 블록을 넘칠 수 있습니다.
'overflow' 값은
블록을 넘치는 텍스트가 보이는지 여부에 영향을 미칩니다.
예제:
다음 예제는 '3em'의 텍스트 들여쓰기를 만듭니다.
p { text-indent: 3em }
참고: 'text-indent' 속성은 상속되므로, 블록 요소에 지정된 경우
하위 인라인 블록 요소에 영향을 미칩니다.
이러한 이유로 'text-indent: 0'를
'display:inline-block'으로 지정된 요소에 지정하는 것이
종종 현명한 선택입니다.
| 이름:
| text-align
|
| 값:
| left | right | center | justify | inherit
|
| 초기값:
| 'direction'이 'ltr'이면 'left'로, 'rtl'이면 'right'로 작동하는 이름 없는 값
|
| 적용 대상:
| 블록 컨테이너
|
| 상속됨:
| 예
|
| 백분율:
| N/A
|
| 미디어:
| 시각적
|
| 계산값:
| 초기값 또는 명시된 값
|
이 속성은 블록 컨테이너의 인라인 레벨 콘텐츠가 어떻게 정렬되는지를 설명합니다.
값의 의미는 다음과 같습니다:
- left, right, center, justify
- 각각 텍스트를 왼쪽, 오른쪽, 가운데 정렬 및 양쪽 정렬합니다.
자세한 내용은 인라인 포맷팅 섹션을 참조하세요.
텍스트 블록은 라인 박스의 스택입니다.
'left', 'right', 'center'의 경우, 이 속성은 각 라인 박스 내에서
인라인 레벨 박스가 라인 박스의 왼쪽과 오른쪽 측면에 대해 어떻게 정렬되는지를 지정합니다.
정렬은 뷰포트를 기준으로 하지 않습니다.
'justify'의 경우, 이 속성은 인라인 레벨 박스의 내용을 확장하거나 축소하여
가능하면 라인 박스의 양쪽에 맞게 플러시되도록 지정합니다.
그렇지 않으면 초기값에 따라 정렬됩니다.
('letter-spacing' 및
'word-spacing'도 참조하세요.)
요소의 'white-space' 계산값이 'pre' 또는 'pre-wrap'인 경우,
해당 요소의 텍스트 콘텐츠의 글리프 및 공백은 정렬 목적으로 변경될 수 없습니다.
참고: CSS는 향후 'white-space: pre-wrap'으로 텍스트를 정렬하는 방법을 추가할 수 있습니다.
예제:
이 예제에서는 'text-align'이 상속되므로,
클래스 이름이 'important'인 DIV 요소 내부의 모든 블록 레벨 요소는
인라인 콘텐츠가 가운데 정렬됩니다.
div.important { text-align: center }
참고. 실제 정렬 알고리즘은 사용자 에이전트 및 텍스트의
언어/스크립트에 따라 달라집니다.
호환 사용자
에이전트는
'justify' 값을 'left' 또는 'right'로 해석할 수 있습니다.
이는 요소의 기본 쓰기 방향이 각각 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽인지에 따라 달라집니다.
16.3 장식
| 이름:
| text-decoration
|
| 값:
| none | [ underline || overline || line-through || blink ] | inherit
|
| 초기값:
| none
|
| 적용 대상:
| 모든 요소
|
| 상속됨:
| 아니오 (본문 참조)
|
| 백분율:
| N/A
|
| 미디어:
| 시각적
|
| 계산값:
| 명시된 대로
|
이 속성은 요소의 텍스트에 요소의 색상을 사용하여 추가되는 장식을 설명합니다.
인라인 요소에 지정되거나 전파되는 경우, 해당 요소가 생성하는 모든 박스에 영향을 미치며,
인라인을 나누는 인플로우 블록 레벨 박스에도 전파됩니다(참조: 섹션 9.2.1.1).
그러나 CSS 2.2에서는 장식이 블록 레벨 테이블에 전파되는지 여부가 정의되지 않았습니다.
인라인 포맷팅 컨텍스트를 설정하는 블록 컨테이너의 경우, 장식은 블록 컨테이너의 모든 인플로우 인라인 레벨 자식을 감싸는 익명 인라인 요소에 전파됩니다.
다른 모든 요소의 경우, 해당 장식은 인플로우 자식에게 전파됩니다.
텍스트 장식은 떠다니거나 절대적으로 위치한 하위 요소, 인라인 블록 및 인라인 테이블과 같은 원자적 인라인 레벨 자식의 콘텐츠에는 전파되지 않습니다.
밑줄, 위줄, 취소선은 텍스트(공백, 문자 간격, 단어 간격 포함)에만 적용됩니다: 여백, 테두리, 패딩은 제외됩니다.
사용자 에이전트는 텍스트가 아닌 콘텐츠에 이러한 텍스트 장식을 렌더링해서는 안 됩니다. 예를 들어, 이미지나 인라인 블록은 밑줄이 그어지지 않아야 합니다.
참고. 요소 E가 'visibility: hidden'과 'text-decoration: underline'을 모두 가지고 있는 경우,
밑줄은 보이지 않지만(E의 부모의 장식은 보입니다),
CSS 2.2는 E의 자식에서 밑줄이 보이는지 보이지 않는지에 대해 지정하지 않았습니다:
<span style="visibility: hidden; text-decoration: underline">
<span style="visibility: visible">
밑줄이 보이나요?
</span>
</span>
이는 CSS 레벨 3에서 명시될 것으로 예상됩니다.
하위 요소의 'text-decoration' 속성은 상위 요소의 장식에 영향을 미칠 수 없습니다.
텍스트 장식 선의 위치와 두께를 결정할 때, 사용자 에이전트는 하위 요소의 글꼴 크기와 지배적인 기준선을 고려할 수 있지만,
각 라인에서 동일한 기준선과 두께를 사용해야 합니다.
하위 요소를 상대적으로 위치시키면 해당 텍스트에 영향을 미치는 모든 텍스트 장식도 이동되지만,
해당 라인의 장식 초기 위치 계산에는 영향을 미치지 않습니다.
값의 의미는 다음과 같습니다:
- none
- 텍스트 장식이 생성되지 않습니다.
- underline
- 텍스트의 각 줄에 밑줄이 그어집니다.
- overline
- 텍스트의 각 줄 위에 선이 그어집니다.
- line-through
- 텍스트의 각 줄에 취소선이 그어집니다.
- blink
- 텍스트가 깜박입니다(보임과 숨김을 번갈아 가짐).
호환 사용자 에이전트는 단순히 텍스트를 깜박이지 않을 수 있습니다.
참고로 텍스트를 깜박이지 않는 것은
WAI-UAAG의 체크포인트 3.3을
충족시키는 한 가지 기술입니다.
텍스트 장식에 필요한 색상은 'text-decoration'이 설정된 요소의 'color'
속성 값에서 파생되어야 합니다. 하위 요소의 'color'
값이 다르더라도 장식의 색상은 동일하게 유지되어야 합니다.
일부 사용자 에이전트는 위에서 설명한 일정한 두께와 선 위치를 유지하는 대신 장식을 하위 요소에 전파하는 방식으로
'text-decoration'을 구현했습니다. 이는 CSS2의 느슨한 표현에 의해 허용된 것으로 볼 수 있습니다. SVG1, CSS1 전용 및
CSS2 전용 사용자 에이전트는 이전 모델을 구현하고도 이 부분에서 CSS 2.2와의 호환성을 주장할 수 있습니다.
(이는 본 사양이 발표된 이후 개발된 사용자 에이전트에는 적용되지 않습니다.)
예제:
HTML의 다음 예제에서는 모든 A 요소(방문 여부와 상관없이)의 텍스트 콘텐츠가 밑줄이 그어집니다:
a:visited,a:link { text-decoration: underline }
예제:
다음 스타일 시트와 문서 조각에서:
blockquote { text-decoration: underline; color: blue; }
em { display: block; }
cite { color: fuchsia; }
<blockquote>
<p>
<span>
도와주세요!
<em> 모자 아래에 갇혔어요! </em>
<cite> —GwieF </cite>
</span>
</p>
</blockquote>
... blockquote 요소의 밑줄은 span 요소를 감싸는 익명 인라인 요소로 전파되어
"도와주세요!" 텍스트가 파란색으로 표시되고, 익명 인라인 요소에서 파생된 파란색 밑줄과 함께 표시됩니다.
em 블록의 텍스트도 밑줄이 그어지며, 이는 밑줄이 전파되는 인플로우 블록에 있기 때문입니다.
마지막 줄의 텍스트는 자홍색이지만, 그 아래의 밑줄은 여전히 익명 인라인 요소에서 파생된 파란색 밑줄입니다.
이 다이어그램은 위 예제에 포함된 박스를 보여줍니다. 둥근 청록색 선은 단락 요소의 인라인 콘텐츠를 감싸는 익명 인라인 요소를 나타내고,
둥근 파란색 선은 span 요소를 나타내며, 주황색 선은 블록을 나타냅니다.
이 속성은 텍스트 문자 간의 간격 동작을 지정합니다. 값의 의미는 다음과 같습니다:
- normal
- 현재 글꼴의 기본 간격입니다. 이 값은 사용자 에이전트가 텍스트를 정렬하기 위해
문자 간의 간격을 변경할 수 있도록 허용합니다.
- <length>
- 이 값은 기본 문자 간 간격 외에도 추가 간격을 나타냅니다.
값은 음수가 될 수 있지만, 구현별 제한이 있을 수 있습니다.
사용자 에이전트는 텍스트를 정렬하기 위해 문자 간 간격을 추가로 늘리거나 줄일 수 없습니다.
문자 간격 알고리즘은 사용자 에이전트에 따라 다릅니다.
예제:
이 예제에서는 BLOCKQUOTE 요소의 문자 간 간격이 '0.1em'만큼 증가합니다.
blockquote { letter-spacing: 0.1em }
다음 예제에서는 사용자 에이전트가 문자 간 간격을 변경할 수 없습니다:
blockquote { letter-spacing: 0cm } /* '0'과 동일 */
두 문자 사이의 결과 간격이 기본 간격과 동일하지 않은 경우, 사용자 에이전트는
합자를 사용해서는 안 됩니다.
이 속성은 단어 간의 간격 동작을 지정합니다. 값의 의미는 다음과 같습니다:
- normal
- 현재 글꼴 및/또는 UA에서 정의한 기본 단어 간 간격입니다.
- <length>
- 이 값은 기본 단어 간 간격 외에도 추가 간격을 나타냅니다.
값은 음수가 될 수 있지만, 구현별 제한이 있을 수 있습니다.
단어 간격 알고리즘은 사용자 에이전트에 따라 다릅니다. 단어 간격은 정렬에도 영향을 받습니다
('text-align'
속성 참조).
단어 간격은 공백(U+0020) 및 공백 처리 규칙이 적용된 후
텍스트에 남아 있는 비분리 공백(U+00A0) 각각에 영향을 미칩니다.
속성이 다른 단어 구분자 문자에 미치는 영향은 정의되지 않았습니다.
그러나 일반 구두점, 0 너비 공간(U+200B)과 같은 너비가 없는 문자 및
고정 너비 공백(U+3000 및 U+2000~U+200A)은 영향을 받지 않습니다.
예제:
이 예제에서는 H1 요소의 각 단어 간의 단어 간격이 '1em'만큼 증가합니다.
h1 { word-spacing: 1em }
| 이름:
| text-transform
|
| 값:
| capitalize | uppercase | lowercase | none | inherit
|
| 초기값:
| none
|
| 적용 대상:
| 모든 요소
|
| 상속됨:
| 예
|
| 백분율:
| N/A
|
| 미디어:
| 시각적
|
| 계산값:
| 명시된 대로
|
이 속성은 요소 텍스트의 대문자 변환 효과를 제어합니다. 값의 의미는 다음과 같습니다:
- capitalize
- 각 단어의 첫 번째 문자를 대문자로 변환합니다. 다른 문자는 영향을 받지 않습니다.
- uppercase
- 각 단어의 모든 문자를 대문자로 변환합니다.
- lowercase
- 각 단어의 모든 문자를 소문자로 변환합니다.
- none
- 대문자 변환 효과가 없습니다.
각 경우의 실제 변환은 작성 언어에 따라 다릅니다. 요소의 언어를 찾는 방법은 BCP 47([BCP47])을 참조하세요.
"이중 대소문자 스크립트"에 속하는 문자만 영향을 받습니다
([UNICODE]).
예제:
이 예제에서는 H1 요소의 모든 텍스트가 대문자로 변환됩니다.
h1 { text-transform: uppercase }
| 이름:
| white-space
|
| 값:
| normal | pre | nowrap | pre-wrap | pre-line | inherit
|
| 초기값:
| normal
|
| 적용 대상:
| 모든 요소
|
| 상속됨:
| 예
|
| 백분율:
| N/A
|
| 미디어:
| 시각적
|
| 계산값:
| 명시된 대로
|
이 속성은 요소 내부의 공백이 처리되는 방식을 선언합니다. 값의 의미는 다음과 같습니다:
- normal
- 이 값은 사용자 에이전트가 공백 시퀀스를 축소하고, 라인 박스를 채우기 위해 필요한 경우 줄을 나누도록 지시합니다.
- pre
- 이 값은 사용자 에이전트가 공백 시퀀스를 축소하지 못하도록 방지합니다. 줄은 보존된 줄 바꿈 문자에서만 나뉩니다.
- nowrap
- 이 값은 'normal'과 같이 공백을 축소하지만, 텍스트 내 줄 바꿈을 억제합니다.
- pre-wrap
- 이 값은 사용자 에이전트가 공백 시퀀스를 축소하지 못하도록 방지합니다. 줄은 보존된 줄 바꿈 문자에서 나뉘며, 필요한 경우 라인 박스를 채우기 위해 나뉩니다.
- pre-line
- 이 값은 사용자 에이전트가 공백 시퀀스를 축소하도록 지시합니다. 줄은 보존된 줄 바꿈 문자에서 나뉘며, 필요한 경우 라인 박스를 채우기 위해 나뉩니다.
소스의 새 줄은 캐리지 리턴(U+000D), 줄 바꿈(U+000A) 또는 둘 모두(U+000D U+000A)로 표현되거나,
SGML RECORD-START 및 RECORD-END 토큰과 같이 문서 세그먼트의 시작과 끝을 식별하는 기타 메커니즘으로 표현될 수 있습니다.
CSS 'white-space' 처리 모델은 모든 새 줄이 줄 바꿈으로 정규화되었다고 가정합니다.
다른 새 줄 표현을 인식하는 사용자 에이전트는 이러한 정규화가 수행된 것처럼 공백 처리 규칙을 적용해야 합니다.
문서 언어에 대해 새 줄 규칙이 지정되지 않은 경우, 문서 텍스트의 각 캐리지 리턴(U+000D) 및 CRLF 시퀀스(U+000D U+000A)는
단일 줄 바꿈 문자로 처리됩니다. 이 기본 정규화 규칙은 생성된 콘텐츠에도 적용됩니다.
사용자 에이전트는 줄 바꿈(U+000A)을 새 줄 문자로 인식해야 합니다.
사용자 에이전트는 UAX14에 따라 다른 강제 줄 바꿈 문자를 새 줄 문자로 처리할 수 있습니다.
예제:
다음 예제는 PRE 및 P 요소와 HTML에서 "nowrap" 속성의 공백 동작을 보여줍니다.
pre { white-space: pre }
p { white-space: normal }
td[nowrap] { white-space: nowrap }
또한, 비표준 "wrap" 속성이 있는 HTML PRE 요소의 효과는 다음 예제로 보여집니다:
pre[wrap] { white-space: pre-wrap }
각 인라인 요소(익명 인라인 요소 포함)에 대해, 양방향 서식 문자를 없는 것처럼 처리하면서 다음 단계를 수행합니다:
-
'white-space'가 'normal', 'nowrap', 또는 'pre-line'으로 설정된 경우, 줄 바꿈(U+000A) 문자를 둘러싼
탭(U+0009), 캐리지 리턴(U+000D), 또는 공백(U+0020) 문자를 제거합니다.
- 'white-space'가 'pre' 또는 'pre-wrap'으로 설정된 경우, 요소 경계로 나뉘지 않은 공백(U+0020)의 시퀀스는
비분리 공백의 시퀀스로 처리됩니다. 그러나 'pre-wrap'의 경우, 시퀀스 끝에서 줄 바꿈 기회가 존재합니다.
- 'white-space'가 'normal' 또는 'nowrap'으로 설정된 경우, 줄 바꿈 문자는 렌더링 목적으로
공백 문자, 너비가 없는 공백 문자(U+200B), 또는 어떤 문자도 아닌 문자(즉, 렌더링되지 않음)로 변환됩니다.
변환은 콘텐츠 스크립트를 기반으로 한 UA별 알고리즘에 따라 결정됩니다.
- 'white-space'가 'normal', 'nowrap', 또는 'pre-line'으로 설정된 경우,
- 모든 탭(U+0009)은 공백(U+0020)으로 변환됩니다.
- 다른 공백(U+0020)을 따르는 모든 공백(U+0020) — 심지어 인라인 전의 공백도,
해당 공백이 또한 'white-space'가 'normal', 'nowrap' 또는 'pre-line'으로 설정된 경우 — 제거됩니다.
그 후, 블록 컨테이너의 인라인이 배치됩니다. 인라인은 양방향 재정렬을 고려하여 배치되며,
'white-space' 속성에 지정된 대로 줄 바꿈을 처리합니다. 줄 바꿈 시, 줄 바꿈 기회는 위의 공백 축소 단계 이전의 텍스트를 기반으로 결정됩니다.
각 줄이 배치될 때,
- 'white-space'가 'normal', 'nowrap', 또는 'pre-line'으로 설정된 줄의 시작 부분의 공백(U+0020)은 제거됩니다.
- 모든 탭(U+0009)은 다음 탭 정지점에 맞춰 다음 글리프의 시작 가장자리를 정렬하는 수평 이동으로 렌더링됩니다.
탭 정지점은 블록 글꼴에서 공백(U+0020)의 너비의 8배 배수 지점에서 발생합니다.
- 'white-space'가 'normal', 'nowrap', 또는 'pre-line'으로 설정된 줄의 끝 부분의 공백(U+0020)도 제거됩니다.
- 'white-space'가 'pre-wrap'으로 설정된 줄 끝의 공백(U+0020) 또는 탭(U+0009)은 UA가 시각적으로 축소할 수 있습니다.
떠 있는 요소와 절대 위치 요소는 줄 바꿈 기회를 제공하지 않습니다.
참고.
CSS 2.2는 줄 바꿈 기회가 발생하는 위치를 완전히 정의하지 않았습니다.
다음과 같은 마크업 조각을 가정하고, 공백(강조 및 식별을 위해 다양한 배경 및 테두리 설정됨)에 특별히 주목합니다:
<ltr>A <rtl> B </rtl> C</ltr>
...여기서 <ltr> 요소는 왼쪽에서 오른쪽으로의 임베딩을 나타내고
<rtl> 요소는 오른쪽에서 왼쪽으로의 임베딩을 나타냅니다.
'white-space' 속성이 'normal'로 설정되었음을 가정하면, 위의 처리 모델은 다음 결과를 생성합니다:
- B 앞의 공백( )은 A 뒤의 공백( )과 축소됩니다.
- C 앞의 공백( )은 B 뒤의 공백( )과 축소됩니다.
이로 인해 두 개의 공백이 남으며, 하나는 왼쪽에서 오른쪽 임베딩 레벨의 A 뒤에, 다른 하나는 오른쪽에서 왼쪽 임베딩 레벨의 B 뒤에 위치합니다.
이는 유니코드 양방향 알고리즘에 따라 렌더링되며, 최종 결과는 다음과 같습니다:
A BC
A와 B 사이에는 두 개의 공백이 있고, B와 C 사이에는 공백이 없습니다.
이는 명시적 임베딩 레벨 대신 문자 고유의 양방향성을 사용하는 것으로 피할 수 있습니다.
또한, 시작 및 끝 태그 바로 내부의 공백은 공백 축소를 처리할 때 이상한 동작을 하므로 피하는 것이 좋습니다.
U+0009(탭), U+000A(줄 바꿈), U+0020(공백), U+202x(양방향 서식 문자)가 아닌 제어 문자는
일반 문자와 동일한 방식으로 렌더링해야 하는 문자로 처리됩니다.
결합 문자는 결합하려는 문자와 하나의 문자로 처리되어야 합니다. 예를 들어,
:first-letter는 "o<span>̈</span>"와 같은 콘텐츠의 전체 글리프를 스타일링합니다.
이는 기본 문자만 일치시키지 않습니다.