글꼴 색상은 색상을 통해 정의할 수 있습니다. 색상 값이 예상됩니다.
p {색상: 빨간색; }색상 단어 또는 16진수 색상 값을 값으로 지정할 수 있습니다.
쓰기 방향 정의하기
방향 속성은 요소의 쓰기 방향을 강제하는 데 사용할 수 있습니다. 역방향 쓰기 방향은 오른쪽에서 왼쪽으로 쓰는 언어와 관련하여 흥미롭습니다.
또한 오버플로로 인해 크기가 큰 콘텐츠가 어느 쪽에서 잘릴지 결정하는 데에도 사용할 수 있습니다.
- ltr - 왼쪽에서 오른쪽으로
- rlt - 오른쪽에서 왼쪽으로
다음 예는 이 속성을 사용하는 방법을 보여줍니다.
.normal {direction:ltr;} .rueckwaerts {direction:rtl;}
여기에는 두 개의 클래스가 정의되어 있습니다.
<p class="normal">왼쪽에서 오른쪽으로 쓰여진 텍스트. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">오른쪽에서 왼쪽으로 작성되는 텍스트입니다. 1 2 3 4 5 6 7 8 9 0</p>
브라우저에서 결과는 다음과 같이 표시됩니다:
텍스트의 가로 정렬
텍스트 단락 및 블록 요소에 포함된 기타 연속 텍스트 또는 인라인 요소의 가로 정렬은 텍스트 정렬 속성을 통해 정의됩니다. 참고로 기본 설정은 왼쪽 정렬입니다.
- 왼쪽 - 왼쪽 정렬
- 오른쪽 - 오른쪽 정렬
- center - 가운데 정렬
- justify - 맞춤으로 정렬
예시입니다:
<p style="text-align:right;"> Welcome </p>
결과는 다음과 같습니다:
세로 정렬
세로 정렬 속성은 줄 높이와 관련하여 한 줄 내의 세로 텍스트 정렬을 결정하는 데 사용됩니다. 이 사양은 항상 인라인 요소여야 하는 상위 요소를 참조합니다. 표 내에서도 텍스트를 정렬할 수 있습니다.
다음 값을 사용할 수 있습니다:
- sub - 아래 첨자
- super - 위 첨자
- 기준선 - 기준선에 맞춰 정렬
- top - 상위 요소의 위쪽 가장자리에 정렬
- 하단 - 부모 요소의 하단 가장자리에 정렬됩니다.
- 가운데 - 상위 요소의 상단과 하단 가장자리 사이의 중앙에 정렬됩니다.
- text-top - 텍스트 상단에 정렬
- 텍스트 하단 - 텍스트 하단에 정렬합니다.
- 길이 지정 - 양수 또는 음수 값으로 요소를 기준선 위 또는 아래로 이동합니다.
- 백분율 - 양수 또는 음수 값은 요소를 기준선 위 또는 아래로 이동시킵니다.
예시
.baseline { 세로-정렬: 기준선; }
안타깝게도 세로 정렬 값은 브라우저에 따라 매우 불균일하게 해석된다는 점에 유의하세요. 따라서 페이지를 온라인에 올리기 전에 결과를 테스트해야 합니다.
텍스트 장식 결정
텍스트 장식은 텍스트 또는 하이퍼링크에 추가 속성을 할당하는 데 사용됩니다.
- 없음 - 텍스트 장식 없음
- 밑줄 - 밑줄
- 밑줄 - 밑줄
- 취소선 - 취소선
- 깜박임 - 깜박임
다음은 또 다른 예시입니다:
a:link { text-decoration: none; }
이는 페이지의 하이퍼링크에 더 이상 밑줄이 없음을 의미합니다.
개별 단어 사이의 간격도 명시적으로 정의할 수 있습니다.
<span style="word-spacing:0.5em">Welcome to PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em"> Welcome to PSD-Tutorials.de!</span>
숫자 값이 필요합니다. 백분율 값은 사용할 수 없습니다.
참고로 문자 간격은 Word 간격 과 유사합니다. 그러나 문자 간격은 텍스트의 개별 문자 사이의 간격을 결정하는 데 사용됩니다. 여기에는 숫자 값도 허용되지만 백분율은 허용되지 않습니다.
<span style="글자 간격:0.1em">문자 간격이 0.1em인 텍스트 예시</span><br> <span style="글자 간격:0.3em">문자 간격이 0.3em인 텍스트 예시</span><br>
텍스트 변환 속성을 사용하여 텍스트의 대문자화 여부를 지정할 수 있습니다. 이는 소스 텍스트의 실제 표기법과는 무관합니다. 소문자를 적용할 수도 있습니다.
- 소문자 - 소문자
- 대문자 - 대문자
- 대문자 - 단어 시작 부분을 대문자로 표시합니다.
- 없음 - 텍스트 변환 없음
예시
.small { text-transform: 소문자; }결과는 브라우저에서 다음과 같이 표시됩니다:
공백 및 문자 나누기
공백 속성은 소스 텍스트의 공백 및 줄 바꿈이 브라우저에 표시되는 방식을 지정하는 데 사용됩니다.
- 일반 - 자동 줄 바꿈이 삽입됩니다. 또한 여러 개의 공백이 하나로 결합됩니다.
- pre - 줄 바꿈이 소스 텍스트에 표시되는 대로 표시됩니다.
- nowrap - 자동 줄 바꿈이 없습니다.
- pre-line - 여러 개의 공백이 하나로 결합됩니다. 상자가 표시될 만큼 충분히 크지 않은 경우에도 줄 바꿈이 있습니다.
- 미리 줄 바꿈 - 상자가 표시하기에 충분히 크지 않은 경우 줄 바꿈이 발생합니다.
다음은 다른 예시입니다:
<pre class="brush:xml;"><!DOCTYPE HTML> <HTML lang="de"<head> <title>PSD-Tutorials.de</title&t; <meta charset=<UTF-8" />style&t; body&t;p { font-family:"Courier New", Courier, monospace; font-size: 200%; } body p { color:#0066FF; } </style&t; </head&t; <body&t; &p&t; 1단락 </p&t; &p&t; 2단락 </p&t; &p>단락 3< <div> <p>단락 4< </div> </body> </html></pre>브라우저에서는 다음과 같이 표시됩니다.
그림자 구현
text-shadow 속성을 사용하여 텍스트에 그림자를 강제로 적용할 수 있습니다. 이 속성은 비교적 최신 브라우저에서만 지원된다는 점에 유의하세요. text-shadow를 해석할 수 없는 브라우저에서는 그림자 없이 글꼴이 표시됩니다.text-shadow는 다음과 같이 사용됩니다:
text-shadow: hV vV 흐림 #xxxxxx;
이 값의 의미는 다음과 같습니다:
- hV - 수평 이동
- vV - 수직 이동
- 블러 - 흐림
- 그림자 색상 #xxxxxx - 그림자 색상
다음 예시는 텍스트 그림자의 일반적인 적용 예시입니다.
.shadow { color: #444; font-size: 34px; text-shadow: 2px 2px 3px #333; }
그런 다음 정의된 클래스를 1차 제목에 적용합니다.
<h1 class="shadow">PSD-Tutorials.de</h1>
결과는 다음과 같습니다:
이미 설명했듯이 브라우저에서 해석하지 않아도 아무런 부정적인 영향을 미치지 않으므로 텍스트 그림자를 문제없이 사용할 수 있습니다. 그러면 텍스트가 그림자 없이 간단히 표시됩니다.
