CSS의 text-indent 속성은 블록 레벨 요소 안에서 텍스트 첫 번째 줄 앞에 삽입되는 들여쓰기(공백)의 크기를 지정합니다. 문단의 시작 부분을 자연스럽게 밀어내어 가독성을 높이고 싶을 때 유용하게 활용되며, 신문이나 잡지에서 흔히 볼 수 있는 전통적인 타이포그래피 스타일을 웹에서도 손쉽게 구현할 수 있습니다.
주요 특징
- px, em, rem 등 다양한 길이 단위와 백분율(%) 값을 사용할 수 있습니다.
- 백분율 값은 부모 요소(컨테이닝 블록)의 너비를 기준으로 계산됩니다.
- 음수 값을 지정하면 첫 줄이 왼쪽으로 빠져나가는 내어쓰기 효과도 가능합니다.
- 들여쓰기는 각 블록의 첫 번째 줄에만 적용되며, 이후 줄에는 영향을 주지 않습니다.
예제 1: 백분율(%)로 들여쓰기 지정하기
다음 예제는 text-indent 속성에 15% 값을 적용하여 문단의 첫 줄을 들여쓰는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 15%;
}
article {
background-color: darkgray;
margin: 2%;
}
</style>
</head>
<body>
<article>
<p>text-indent 속성을 사용하면 문단의 첫 줄만 선택적으로 들여쓰기할 수 있습니다. 값에는 픽셀(px), 배수(em)뿐 아니라 백분율(%)도 사용할 수 있습니다.</p>
<p>백분율 값은 부모 요소의 너비를 기준으로 계산되므로, 화면 크기에 따라 들여쓰기 폭이 반응형으로 조절된다는 장점이 있습니다.</p>
</article>
</body>
</html>실행 결과
위 코드를 실행하면 회색 배경의 article 영역 안에서 두 문단 모두 첫 줄이 전체 너비의 15%만큼 들여쓰기되어 표시됩니다.
예제 2: 테두리와 함께 들여쓰기 확인하기
이번 예제에서는 문단에 테두리를 추가하고 flex 레이아웃과 그림자 효과를 적용한 상태에서 text-indent 속성이 어떻게 동작하는지 살펴봅니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 2%;
text-indent: 13%;
border: 2px solid lightgoldenrodyellow;
}
div {
background-color: sandybrown;
display: flex;
flex: 1;
margin: 4%;
box-shadow: 0 0 24px rgba(0,0,0,0.6);
}
</style>
</head>
<body>
<div>
<p>문단에 연한 노란색 테두리를 적용하면 들여쓰기된 첫 줄의 시작 위치를 더욱 명확하게 확인할 수 있습니다.</p>
<p>text-indent 값이 13%로 지정되어 있으므로, 각 문단의 첫 줄은 div 영역 너비의 13%만큼 오른쪽으로 밀려 나타납니다.</p>
</div>
</body>
</html>실행 결과
코드를 실행하면 아래와 같이 샌드브라운 배경 위에 테두리가 있는 문단들이 배치되며, 각 문단의 첫 줄이 13%만큼 들여쓰기된 것을 확인할 수 있습니다.
마무리
text-indent 속성은 margin이나 padding과 달리 문단의 첫 줄에만 영향을 주기 때문에, 전체 문단 정렬은 그대로 유지하면서 시작 위치만 조정하고 싶을 때 매우 유용합니다. 백분율 값을 활용하면 화면 크기에 유연하게 대응하는 반응형 들여쓰기도 간단하게 구현할 수 있으니, 문서형 콘텐츠나 블로그 본문 디자인에 적극적으로 활용해 보시기 바랍니다.