CSS를 활용한 텍스트 서식 지정
CSS를 사용하면 텍스트 색상, 텍스트 장식(text decoration), 줄 높이(line height), 텍스트 방향, 텍스트 정렬 등 다양한 속성을 조절해 텍스트 서식을 자유롭게 꾸밀 수 있습니다.
아래에서 주요 속성별 사용법과 예제를 하나씩 살펴보겠습니다.
1. 텍스트 정렬 (Text Alignment)
텍스트 정렬을 설정하려면 CSS의 text-align 속성을 사용합니다. 사용할 수 있는 속성 값은 다음과 같습니다.
text-align: left|right|center|justify|initial|inherit;
- left / right / center: 각각 왼쪽, 오른쪽, 가운데 정렬
- justify: 양쪽 정렬로, 텍스트가 좌우 경계에 맞춰 균등하게 배치됨
- initial / inherit: 기본값 사용 또는 부모 요소의 값 상속
예제
다음은 text-align 속성으로 본문을 양쪽 정렬(justify)하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
-webkit-columns: auto auto; /* Chrome, Safari, Opera */
-moz-columns: auto auto; /* Firefox */
columns: auto auto;
text-align: justify;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>실행 결과
2. 줄 높이 (Line Height)
줄 간격(행간)을 조절하려면 line-height 속성을 사용합니다. 설정 가능한 값은 다음과 같습니다.
line-height: normal|number|length|initial|inherit;
- normal: 브라우저 기본 줄 높이 적용
- number: 글자 크기에 대한 배수로 지정 (예: 1.9)
- length: px, em 등 고정 단위로 지정
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
line-height: 1.9;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>실행 결과
3. 텍스트 장식 (Text Decoration)
CSS에서 텍스트에 밑줄, 윗줄, 취소선 같은 장식 효과를 주려면 text-decoration 속성을 사용합니다. 이 속성은 아래 세 가지 하위 속성을 한 번에 지정할 수 있는 축약형(shorthand)입니다.
text-decoration-line text-decoration-color text-decoration-style
- text-decoration-line: 장식의 위치 지정 (underline, overline, line-through 등)
- text-decoration-color: 장식 선의 색상 지정
- text-decoration-style: 장식 선의 스타일 지정 (solid, dotted, wavy 등)
예제
다음은 텍스트에 윗줄(overline)과 밑줄(underline)을 동시에 적용하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>실행 결과
