CSS 텍스트
CSS 텍스트 속성은 텍스트의 외관을 정의할 수 있습니다.
텍스트 속성을 통해 텍스트의 색상, 글자 간격, 텍스트 정렬, 텍스트 장식, 텍스트 인덱싱 등을 변경할 수 있습니다.
텍스트 들여쓰기
웹 페이지의 단락의 첫 번째 행을 내쳐주는 것은 가장 일반적인 텍스트 포맷팅 효과 중 하나입니다.
CSS는 다음과 같이 제공합니다: text-indent 속성이 속성은 텍스트 인덱싱을 쉽게 구현할 수 있습니다.
text-indent 속성을 사용하여 모든 요소의 첫 번째 행을 지정된 길이로 내쳐줄 수 있습니다. 그리고 이 길이는 음수일 수도 있습니다.
이 속성은 가장 일반적으로 문단의 첫 번째 행을 인쇄하는 데 사용되며, 모든 문단의 첫 번째 행을 5 em로 인쇄하는 규칙을 설정합니다:
p {text-indent: 5em;}
주의:일반적으로 모든 블록 요소에 text-indent를 적용할 수 있지만, 행 내 요소나 이미지와 같은 대체 요소에 대한 text-indent 속성을 적용할 수 없습니다. 그러나 블록 요소(예: 문단)의 첫 번째 행에 이미지가 있으면, 그 이미지는 해당 행의 나머지 텍스트와 함께 이동합니다.
훌륭한 팁:행 내 요소의 첫 번째 행을 '인쇄'하려면, 왼쪽 내간거리나 왼쪽 외간거리를 사용하여 이러한 효과를 만들 수 있습니다.
음수 값 사용
text-indent는 음수 값을 설정할 수도 있습니다. 이러한 기술을 사용하면 많은 흥미로운 효과를 만들 수 있습니다. 예를 들어, 'suspend indent'는 첫 번째 행이 요소의 나머지 부분의 왼쪽에 'suspend'된 것입니다:
p {text-indent: -5em;}
그러나 text-indent에 음수 값을 설정할 때 주의하세요. 음수 값을 설정하면, 일부 문장의 첫 번째 행이 브라우저 창의 왼쪽 경계를 넘어갈 수 있습니다. 이러한 표시 문제를 피하기 위해, 음수 인쇄에 대한 외부 마argins이나 내부 margins를 설정하는 것이 좋습니다:
p {text-indent: -5em; padding-left: 5em;}
백분율 값 사용
text-indent는 모든 길이 단위를 사용할 수 있습니다. 이 중에는 백분율 값도 포함됩니다.
백분율은 인쇄 요소 부모 요소의 너비에 비례해야 합니다. 다시 말해, 인쇄 값을 20%로 설정하면 영향을 받는 요소의 첫 번째 행은 부모 요소 너비의 20%로 인쇄됩니다.
다음 예제에서, 인쇄 값은 부모 요소의 20%입니다. 즉, 100 픽셀입니다:
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
상속
text-indent 속성은 상속될 수 있으며, 다음과 같은 표시를 고려하세요:
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>
이 표시된 구간은 50 픽셀로 인쇄됩니다. 이는 이 구간이 id가 inner인 div 요소의 인쇄 값을 상속받았기 때문입니다.
수평 정렬
text-align 은 기본 속성으로, 요소 내에텍스트 행상호 간의 정렬 방식. 전 3개의 값은 매우 직관적이지만, 4번째와 5번째 값은 약간 복잡합니다.
값 left, right, center는 각각 요소 내 텍스트를 왼쪽 정렬, 오른쪽 정렬, 중앙 정렬하게 합니다.
서양 언어는 왼쪽에서 오른쪽으로 읽으며, 모든 text-align의 기본 값은 left입니다. 텍스트는 왼 경계에 정렬되고, 오른쪽 경계는 날카로운 모양이 됩니다(왼쪽에서 오른쪽으로 텍스트로 불립니다). 히브리어나 아라비아어와 같은 언어는 오른쪽에서 왼쪽으로 읽기 때문에 text-align의 기본 값은 right입니다. 예상대로 center는 각 텍스트 행이 요소 내에 중앙에 위치하게 합니다.
훌륭한 팁:블록 요소나 테이블 요소를 중앙에 배치하려면, 이러한 요소에 적절한 좌우 외 경계를 설정하여야 합니다.
text-align:center와 <CENTER>
text-align:center와 <CENTER> 요소의 역할이 같다고 생각할 수 있지만, 실제로는 매우 다릅니다.
<CENTER>는 텍스트에 영향을 미치지만, 전체 요소를 중앙에 배치합니다. text-align은 요소의 정렬을 제어하지 않고, 내용에 영향을 미칩니다. 요소 자체는 한 단락에서 다른 단락으로 이동하지 않으며, 텍스트만 영향을 받습니다.
justify
마지막 수평 정렬 속성은 justify입니다.
양 끝 정렬된 텍스트에서, 텍스트 행의 좌우 끝은 부모 요소의 내 경계에 위치합니다. 그런 다음, 단어와 글자 간의 간격을 조정하여各行의 길이가 정확하게 같게 합니다. 양 끝 정렬된 텍스트가 인쇄 영역에서 흔하다는 것을 이미 알고 계셨을 것입니다.
주의해야 할 것은, 양 끝 정렬된 텍스트가 부모 요소의 좌우 경계 사이의 공간을 채우기 위해 확장되는 방식을 사용자 대리자(而不是 CSS)가 결정한다는 것입니다. 자세한 내용을 알고 싶다면, 참조 CSS text-align 속성 참조 페이지.
단어 간격
word-spacing 속성단어(단어) 간의 표준 간격을 변경할 수 있습니다. 기본 값 normal과 0 값은 같습니다.
word-spacing 속성은 양수 길이값 또는 음수 길이값을 받아들이며. 양수 길이값을 제공하면 단어 간의 간격이 증가합니다. word-spacing에 음수 값을 설정하면 그것을 좁히게 됩니다:
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
이는 문장입니다. 단어 간의 공간은 증가됩니다.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
주의:CSS에서 '단어'(word)에 대한 정의를 더 깊이 이해하려면 방문하세요 CSS word-spacing 속성 참조 페이지.
글자 간격
letter-spacing 속성word-spacing과의 차이는, 문자 간격은 문자나 글자 간격을 수정하는 것입니다.
word-spacing 속성과 마찬가지로, letter-spacing 속성의 가능한 값은 모든 길이를 포함합니다. 기본 키워드는 normal입니다(이는 letter-spacing:0과 같습니다). 입력된 길이 값은 문자나 글자 간격을 지정된 양만큼 늘리거나 줄입니다:
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
문자 변환
text-transform 속성텍스트의 대소문자를 처리합니다. 이 속성은 4 가지 값이 있습니다:
- none
- uppercase
- lowercase
- capitalize
기본 값 none은 텍스트에 어떤 변경도 하지 않으며, 원래 문서의 기존 대소문자를 사용합니다. 그 이름에서 알 수 있듯이, uppercase과 lowercase는 텍스트를 전체 대문자와 전체 소문자로 변환합니다. 마지막으로, capitalize은 각 단어의 첫 글자를 대문자로 변환합니다.
속성으로서 text-transform는 중요하지 않을 수 있지만, 갑자기 모든 h1 요소를 대문자로 변경하려고 결정하면 매우 유용합니다. 모든 h1 요소의 내용을 단独으로 수정할 필요가 없습니다. text-transform를 사용하여 이 수정을 완료할 수 있습니다:
h1 {text-transform: uppercase}
text-transform를 사용하면 두 가지 이점이 있습니다. 첫째, 간단한 규칙으로 수정을 완료할 수 있으며, h1 요소 자체를 수정할 필요가 없습니다. 둘째, 미래에 모든 대소문자를 원래의 대소문자로 전환하기로 결정하면 수정이 더 쉽게 완료될 수 있습니다.
텍스트 장식
다음으로, 우리는 논의할 것입니다 text-decoration 속성이는 매우 흥미로운 속성으로, 매우 흥미로운 행동을 제공합니다.
text-decoration은 5 가지 값이 있습니다:
- none
- underline
- overline
- line-through
- blink
예상대로, underline는 요소에 하늘줄을 추가합니다. overline는 텍스트의 최상단에 하늘줄을 그립니다. line-through 값은 텍스트 중간에 연결선을 그립니다. 이는 HTML의 S 및 strike 요소와 동일합니다. blink는 텍스트가 깜박이는 효과를 줍니다. Netscape가 지원한 논란이 많은 blink 태그와 유사합니다.
none 값은 원래 요소에 적용된 모든 장식을 끊습니다. 일반적으로 장식이 없는 텍스트는 기본적인 외관입니다만, 이렇지 않을 수도 있습니다. 예를 들어, 링크는 기본적으로 하늘줄이 있습니다. 링크의 하늘줄을 제거하고 싶다면 다음과 같은 CSS를 사용할 수 있습니다:
a {text-decoration: none;}
주의:이러한 규칙을 사용하여 링크의 하늘줄을 명시적으로 제거하면, 앵커와 일반 텍스트 간의 시각적인 유일한 차이는 색상입니다(기본적으로 이렇게 됩니다만, 색상이 확실하게 다른 것을 보장할 수는 없습니다).
또한 하나의 규칙에서 여러 가지 장식을 결합할 수 있습니다. 모든 트랙백이 하늘줄과 상하줄을 가지고 싶다면, 다음과 같은 규칙을 사용하세요:
a:link a:visited {text-decoration: underline overline;}
그러나 두 가지 다른 장식이 같은 요소와 일치할 경우, 승자 규칙의 값은 완전히 다른 값을 대체합니다. 다음과 같은 규칙을 고려해 보세요:
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
주어진 규칙에 따르면, 모든 class가 stricken인 h2 요소는 단 하나의 연결선 장식만 있으며, 하늘줄과 상하줄이 없는 이유는 text-decoration 값은 누적되지 않고 대체됩니다.
공백 문자 처리
white-space 속성사용자代理가 원본 문서의 공백 문자, 개행 및 탭 문자를 처리하는 데 영향을 미칩니다.
이 속성을 사용하면 브라우저가 문자 간 및 텍스트 행 간의 공백 문자를 처리하는 방식을 영향을 미칠 수 있습니다. 일정한 의미에서, 기본적인 XHTML 처리는 공백 문자 처리를 완료했습니다: 모든 공백 문자를 하나의 공백으로 합쳐줍니다. 따라서 다음과 같은 태그가 웹 브라우저에서 표시될 때, 각 문자 간에 단 하나의 공백만 표시되고, 요소 내의 개행은 무시됩니다:
<p>This paragraph has many
spaces in it.</p>
이러한 기본 행동을 명시적으로 설정할 수 있습니다:
p {white-space: normal;}
위의 규칙은 브라우저가 일반적인 방식으로 처리하도록 지시합니다: 불필요한 공백 문자를 버립니다. 이 값이 주어지면, 줄 바꿈 문자(엔터)는 공백 문자로 변환되며, 한 행에 여러 공백 문자가 연속으로 나타나면 하나의 공백 문자로 변환됩니다.
값 pre
그러나 white-space를 pre로 설정하면, 이 속성에 영향을 받는 요소 내의 공백 문자 처리는 다르며, XHTML의 pre 요소와 같은 행동을 보입니다. 공백 문자는 무시되지 않습니다.
white-space 속성의 값이 pre로 되어 있으면, 브라우저는 추가 공백 문자 및 엔터를 주의 깊게 관찰합니다. 이 면에서만, 어떤 요소도 pre 요소와 같은 역할을 할 수 있습니다.
주의:테스트 결과, IE 7 및 이전 버전의 브라우저는 이 값을 지원하지 않으므로, 위의 예제를 확인하기 위해 비 IE 브라우저를 사용하십시오.
값 nowrap
대비되는 값은 nowrap로, 요소 내의 텍스트 줄 바꿈을 방지하며 br 요소를 사용하지 않으면서도 줄 바꿈을 합니다. CSS에서 nowrap는 HTML 4에서 <td nowrap>를 사용하여 테이블 셀을 줄 바꿈하지 않게 설정하는 것과 매우 유사하지만, white-space 값은 어떤 요소에도 적용할 수 있습니다.
값 pre-wrap과 pre-line
CSS2.1은 이전 버전의 CSS에서 없었던 pre-wrap과 pre-line 값을 도입했습니다. 이 값의 역할은 작성자가 공백 문자 처리를 더 잘 제어할 수 있도록 하는 것입니다.
요소의 white-space 설정이 pre-wrap으로 되어 있으면, 요소 내의 텍스트는 공백 문자 시퀀스를 유지하지만, 텍스트 행은 정상적으로 줄 바꿈됩니다. 이 값으로 설정되면, 원본 텍스트의 행 구분자 및 생성된 행 구분자도 유지됩니다. pre-line은 pre-wrap과 반대로, 일반 텍스트와 같이 공백 문자 시퀀스를 합치지만 줄 바꿈 문자를 유지합니다.
주의:우리는 IE7과 FireFox2.0 브라우저에서 위의 두 가지 예제를 테스트했지만, 값 pre-wrap과 pre-line은 양호한 지원을 받지 못했습니다.
요약
아래 표는 white-space 속성의 동작을 요약합니다:
| 값 | 빈 공간 문자 | 줄 바꿈 문자 | 자동 줄바꿈 |
|---|---|---|---|
| pre-line | 합치기 | 보존 | 허용 |
| normal | 합치기 | 무시 | 허용 |
| nowrap | 합치기 | 무시 | 허용하지 않음 |
| pre | 보존 | 보존 | 허용하지 않음 |
| pre-wrap | 보존 | 보존 | 허용 |
텍스트 방향
영어 책을 읽고 있다면, 왼쪽에서 오른쪽으로, 위에서 아래로 읽습니다. 이것이 영어의 흐름 방향입니다. 하지만 모든 언어가 이렇지 않습니다. 고대 중국어는 오른쪽에서 왼쪽으로 읽으며, 이스라엘어와 아라비아어 등도 마찬가지입니다. CSS2는 방향성을 설명하는 속성을 도입했습니다.
direction 속성direction 속성은 블록 요소의 텍스트 쓰기 방향, 테이블 열 레이아웃 방향, 내용이 요소의 프레임을 수평으로 채우는 방향, 그리고 양쪽 정렬 요소의 마지막 줄의 위치에 영향을 미칩니다.
주의:행 내 요소에 대해서는, unicode-bidi 속성direction 속성이 적용되는 것은 embed 또는 bidi-override로 설정된 경우에만 됩니다.
direction 속성은 두 가지 값이 있습니다: ltr과 rtl. 대부분의 경우 기본 값은 ltr로, 왼쪽에서 오른쪽으로 텍스트를 표시합니다. 오른쪽에서 왼쪽으로 텍스트를 표시하려면 값 rtl을 사용해야 합니다.
CSS 텍스트 예제:
- 문자색 설정
- 이 예제에서는 텍스트의 색을 설정하는 방법을 보여줍니다.
- 텍스트 배경색 설정
- 이 예제에서는 일부 텍스트의 배경색을 설정하는 방법을 보여줍니다.
- 문자 간격 지정
- 이 예제에서는 문자 간격을 증가하거나 감소하는 방법을 보여줍니다.
- 퍼센트로 줄 간격 설정
- 이 예제에서는 퍼센트 값을 사용하여 단락의 줄 간격을 설정하는 방법을 보여줍니다.
- 픽셀 값으로 줄 간격 설정
- 이 예제에서는 픽셀 값을 사용하여 단락의 줄 간격을 설정하는 방법을 보여줍니다.
- 수치로 줄 간격 설정
- 이 예제에서는 수치를 사용하여 단락의 줄 간격을 설정하는 방법을 보여줍니다.
- 텍스트 정렬
- 이 예제에서는 텍스트를 정렬하는 방법을 보여줍니다.
- 텍스트 장식
- 텍스트에 장식 추가
- 텍스트 들여쓰기
- 텍스트 첫 번째 줄 인덱싱
- 텍스트 내 문자 제어
- 이 예제에서는 텍스트 내 문자를 제어하는 방법을 보여줍니다.
- 요소 내 줄바꿈 금지
- 이 예제에서는 요소 내 텍스트의 줄바꿈을 금지하는 방법을 보여줍니다.
- 단어 간 거리 증가
- 이 예제에서는 단락 내 단어 간의 거리를 늘리는 방법을 보여줍니다.
CSS 텍스트 속성
| 속성 | 설명 |
|---|---|
| color | 문자색 설정 |
| direction | 텍스트 방향 설정. |
| line-height | 줄 높이 설정. |
| letter-spacing | 글자 간격 설정. |
| text-align | 요소 내 텍스트 정렬. |
| text-decoration | 텍스트에 장식 추가. |
| text-indent | 요소 텍스트의 첫 줄에 들여쓰기. |
| text-shadow | 텍스트 그림자 설정。CSS2는 이 속성을 포함하지만 CSS2.1은 이 속성을 유지하지 않습니다. |
| text-transform | 요소 내 글자 제어. |
| unicode-bidi | 텍스트 방향 설정. |
| white-space | 요소 내 공백 처리 방식 설정. |
| word-spacing | 글자 간격 설정. |
