CSS에서 텍스트 서식을 지정하려면 텍스트 색상, 텍스트 장식, 줄 높이, 텍스트 방향, 텍스트 정렬 등을 변경할 수 있습니다.
몇 가지 예를 살펴보겠습니다 -
텍스트 정렬
CSS를 사용하여 텍스트 정렬을 설정하려면 text-align 속성을 사용하십시오. 다음은 가능한 속성 값입니다 -
text-align: left|right|center|justify|initial|inherit;
예시
텍스트 정렬을 설정하는 예를 살펴보겠습니다 -
<!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> 출력
줄 높이
줄 높이를 설정하려면 line-height 속성을 사용하십시오. 다음은 속성 값입니다 -
line-height: normal|number|length|initial|inherit;
예시
<!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> 출력
텍스트 장식
CSS의 텍스트 장식의 경우 다음 속성의 약식 속성으로 text-decoration 속성을 사용하십시오 -
text-decoration-line text-decoration-color text-decoration-style
예시
CSS에서 텍스트 장식의 예를 살펴보겠습니다. −
<!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> 출력
