웹 페이지에서 텍스트 들여쓰기를 적용하려면 CSS의 text-indent 속성을 사용하면 됩니다. 이 속성은 문단의 첫 번째 줄만 들여쓰기할 때 사용되며, px, em, % 등 다양한 단위로 들여쓰기 크기를 지정할 수 있습니다.
text-indent 기본 문법
selector {
text-indent: 값;
}값에는 픽셀(px), 배수 단위(em), 퍼센트(%) 등을 사용할 수 있으며, 음수 값을 지정하면 내어쓰기(들여쓰기 반대) 효과도 낼 수 있습니다.
예제 1: px 단위로 들여쓰기
다음은 30px 만큼 첫 줄을 들여쓰기하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-indent: 30px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
</p>
</div>
</body>
</html>실행 결과
문단의 첫 번째 줄이 왼쪽에서 30px 떨어진 위치부터 시작되는 것을 확인할 수 있습니다.
예제 2: em 단위로 들여쓰기
이번에는 상대 단위인 em을 사용해 보겠습니다. em은 글꼴 크기를 기준으로 하므로, 반응형 웹에서 유용하게 활용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-indent: 15em;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
</p>
</div>
</body>
</html>실행 결과
글꼴 크기의 15배에 해당하는 너비만큼 첫 줄이 들여쓰기되어 나타납니다.
정리
text-indent 속성은 문단 첫 줄의 들여쓰기를 간단하게 처리할 수 있는 CSS 속성입니다. 고정 크기가 필요하면 px, 글꼴 크기에 비례한 유연한 들여쓰기가 필요하면 em 또는 % 단위를 사용하는 것이 좋습니다.