CSS 텍스트 서식 지정이란?
CSS를 활용하면 텍스트에 다양한 서식을 적용해 시각적으로 매력적인 웹 콘텐츠를 만들 수 있습니다. 글자 색상부터 자간, 행간, 정렬 방식, 그림자 효과까지 세밀하게 조절할 수 있어 문서의 가독성과 디자인 완성도를 동시에 높일 수 있습니다.
CSS 텍스트 서식 주요 속성
color
텍스트의 색상을 지정하는 속성입니다.
letter-spacing
글자와 글자 사이의 간격(자간)을 설정합니다.
line-height
한 줄의 높이(행간)를 지정합니다.
text-align
텍스트의 가로 정렬을 제어합니다. left(왼쪽), right(오른쪽), center(가운데), justify(양쪽) 값으로 정렬 방식을 지정할 수 있습니다.
text-decoration
밑줄(underline), 취소선(line-through), 윗줄(overline) 등 텍스트 장식을 추가하고 스타일링할 때 사용합니다.
text-indent
요소의 첫 번째 줄 들여쓰기를 설정합니다.
text-shadow
텍스트 주변에 그림자 효과를 표시합니다. 가로 오프셋, 세로 오프셋, 흐림 정도(blur), 색상을 순서대로 지정할 수 있습니다.
text-transform
텍스트의 대소문자를 변환합니다. uppercase, lowercase, capitalize 등의 값을 사용합니다.
word-spacing
단어와 단어 사이의 간격을 설정합니다.
기본 문법
텍스트 서식 속성은 아래와 같은 기본 문법 형식을 따릅니다.
Selector {
font-variant: /*값*/
}예제 1: 텍스트 그림자와 양쪽 정렬 활용
다음 예제는 CSS에서 텍스트 서식을 지정하는 다양한 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2::before {
content: "DEMO ";
text-align: center;
text-decoration: line-through;
color: orange;
}
article {
width: 600px;
text-align: justify;
text-shadow: -10px -5px lightgreen;
}
</style>
</head>
<body>
<h2>Example Heading</h2>
<article>This is demo text. Here, we are displaying different ways to format text.</article>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: word-spacing으로 단어 간격 조절
다음 예제는 word-spacing 속성을 활용해 단어 사이 간격을 넓히고, box-shadow와 함께 시각적 효과를 더하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
display: flex;
float: left;
word-spacing: 30px;
box-shadow: inset 0 0 6px violet;
}
div::after {
content: " ";
border: 8px solid green;
}
div + div {
background-color: indianred;
width: 200px;
color: white;
text-align: justify;
}
</style>
</head>
<body>
<div>SAS stands for Statistical Analysis Software. It was created in the year 1960 by the SAS Institute.</div>
<div>SAS is a leader in business analytics. Through innovative analytics it caters to business intelligence and data management software and services.</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
