CSS에서 제공하는 여러 속성을 통해 색상, 정렬, 간격, 장식, 변형 등 다양한 텍스트 스타일을 매우 쉽고 효과적으로 정의할 수 있습니다.
일반적으로 사용되는 텍스트 속성에는 텍스트 정렬, 텍스트 장식, 텍스트 변환, 텍스트 들여쓰기, 줄 높이, 문자 간격, 단어 간격 등이 포함됩니다. 이러한 속성을 사용하면 문자, 단어, 공백 등의 시각적 모양을 정밀하게 제어할 수 있습니다.
요소에 대해 이러한 텍스트 속성을 설정하는 방법을 자세히 살펴보겠습니다.
1.text-align 텍스트 정렬
text-align 속성은 요소의 텍스트 가로 정렬을 설정하는 데 사용됩니다. 속성의 선택 값은 다음과 같습니다.
예:
<!DOCTYPEhtml><html><head><style>p{border:1pxsolidblack;/*텍스트 정렬을 보다 직관적으로 반영하기 위해 p 태그에 설정된 테두리는 다음과 같습니다*/}.text1{text- 정렬: 왼쪽;}.text2{텍스트 정렬 :right;}.text3{text-align:center;}</style></head><body><pclass=text1>왼쪽 정렬</p><pclass=text2>오른쪽 정렬</p><pclass= text3>가운데 정렬</p></body></html>표시되는 결과는 다음과 같습니다.
2. 텍스트 장식
text-장식 속성은 텍스트 장식을 설정하거나 삭제하는 데 사용됩니다. 가장 일반적인 방법은 <a> 태그의 기본 밑줄을 제거하는 것입니다. 물론, 강조 효과를 얻기 위해 필요한 요소의 텍스트에 일부 장식을 추가하기 위해 text-장식 속성을 사용할 수도 있습니다.
텍스트 장식 속성의 선택적 값은 다음과 같습니다.
예:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>텍스트 장식</title><style>h1.under{text-장식:underline;}h1.over{text-장식:overline ;}p.line{text-장식:line-through;}p.blink{text-장식:blink;}a.none{text-de coration:none;}p.underover{text-장식:underlineoverline;}</style></head><body><h1class=under>underline</h1><pclass=lin e>취소선</p><pclass=blink>플래시 효과가 있지만 브라우저에 표시되지 않습니다.</p><h1class=over>밑줄</h1><p>이것은 <aclass=nonehref=#> 링크입니다 </a> 기본적으로 링크에 밑줄이 그어져 있지만 여기서는 제거합니다. </p><pclass=underover>윗줄 및 밑줄</p></body></html>표시되는 결과는 다음과 같습니다.
3.텍스트 변환
text-transform 속성은 텍스트에 포함된 영문자의 대/소문자를 제어하는 데 사용됩니다. 이 속성을 통해 원본 텍스트를 수정하지 않고도 텍스트의 영문자를 소문자, 대문자 또는 대문자 첫 글자로 균일하게 변경할 수 있습니다.
4.텍스트 들여쓰기
text-indent 속성은 요소의 텍스트에 첫 줄 들여쓰기 효과를 추가하는 데 사용됩니다. 속성의 선택 값은 다음과 같습니다.
5.라인 높이 라인 높이
이 속성은 라인 상자의 레이아웃에 영향을 줍니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다.
줄 높이와 글꼴 크기(줄 간격) 사이의 계산된 차이는 두 부분으로 나누어 텍스트 콘텐츠 줄의 위쪽과 아래쪽에 추가됩니다. 이 내용을 담을 수 있는 가장 작은 상자는 라인 상자입니다.
예:
<!DOCTYPEhtml><html><head><style>p.small{line-height:0.8;}p.big{line-height:200%;}</style></head><body><p> 이것은 기본 표준 행 높이입니다<br>이것은 기본 표준 행 높이입니다<br>이것은 기본 표준 행 높이입니다<br></p><pclas s=small>숫자를 사용하여 더 작은 행 높이 정의<br>숫자를 사용하여 더 작은 행 높이 정의<br>숫자를 사용하여 더 작은 행 높이 정의<br></p><pclass=big>사용 양식 사용 더 큰 행 높이를 정의하려면 백분율 형식을 사용하세요.<br>더 큰 행 높이를 정의하려면 백분율 형식을 사용하세요.<br>더 큰 행 높이를 정의하려면 백분율 형식을 사용하세요.<br></p></body>< /html >표시되는 결과는 다음과 같습니다.
6. 글자 간격
텍스트 사이의 간격은 음수일 수 있습니다. 기본값은 모든 브라우저에서 letter-spacing 속성을 지원합니다.
예:
<!DOCTYPEhtml><html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gbk2312/><title>CSS의 문자 간격 속성</title><style>*{margin:0; 패딩:0 ;}body{width:1000px;margin:200pxauto;}p{font-size:18px;}.p01{letter-spacing:2px;}.p02{letter-spacing:10px}</style></head>< body><pclass=p01>css 텍스트 간격 테스트 텍스트! </p><pclass=p02>css 텍스트 간격 테스트 텍스트! </p></body></html>표시되는 결과는 다음과 같습니다.
7.단어간격
word-spacing 속성은 단어 사이의 간격을 설정하는 데 사용되지만 중국어에서는 유효하지 않습니다. 속성의 선택 값은 다음과 같습니다.
8.text-shadow 텍스트 섀도우
text-shadow는 텍스트에 그림자를 추가합니다. 텍스트와 장식에 여러 개의 그림자를 추가할 수 있습니다. 그림자 값은 쉼표로 구분됩니다. 각 그림자 값은 X 및 Y 방향의 요소 오프셋, 흐림 반경 및 색상 값으로 구성됩니다.
9. 수직 정렬
수직 정렬 속성은 요소의 수직 정렬을 설정합니다.
CSS의 수직 정렬 속성은 인라인 요소와 대체된 요소(예: 이미지 및 양식 입력 상자)에만 사용할 수 있습니다.
먼저 그림을 살펴보겠습니다. 기준선은 문자 x의 아래쪽 가장자리입니다.
기준선, 최종선, 최고선, 중간선과 같은 개념이 언급됩니다.
(1) 윗줄 : 한자의 위쪽 가장자리
(2) 중심선 : 영문소문자 x의 중앙을 지나는 선
(3) 기준선 : 소문자 x의 하단 가장자리;
(4) 밑줄 : 한자의 아래쪽 가장자리.
(5) 콘텐츠 영역: 하단 라인과 상단 라인으로 둘러싸인 영역을 말합니다.
(6) 줄 높이: 콘텐츠 영역과 콘텐츠 영역을 기준으로 대칭적으로 확장된 공백 영역을 포함하며, 이를 줄 높이라고 하며 인접한 텍스트 줄의 기준선 사이의 거리로도 간주할 수 있습니다.
(7) 줄 간격: 이전 텍스트 줄의 아래쪽 줄과 다음 텍스트 줄의 위쪽 줄 사이의 인접한 텍스트 줄 사이의 거리를 말합니다.
(8) 인라인 박스(Inline box): 브라우저 렌더링 모델의 개념으로 표시할 수 없지만 존재하며 높이가 라인 높이와 동일하다.
(9) 라인 박스(Line box) : 같은 라인의 내부 박스와 유사한 개념이다. 라인 박스는 이 라인의 가상 직사각형 박스를 의미하며 브라우저 렌더링 모드에서도 같은 개념이다. 라인 박스의 높이는 이 라인의 모든 요소 중 인라인 박스의 가장 큰 값과 같습니다(라인 높이 값이 가장 큰 인라인 박스가 벤치마크로 사용되며, 다른 인라인 박스는 자체 기준을 사용하여 벤치마크에 정렬됩니다). 정렬 방법을 선택하고 라인 상자의 높이가 최종적으로 계산됩니다.
10.white-space는 공백 문자를 처리합니다.
다음 표에는 공백 속성의 동작이 요약되어 있습니다.
11.방향 텍스트 방향