CSS text-indent 속성이란?
text-indent 속성은 문단의 첫 번째 줄을 들여쓰기할 때 사용하는 CSS 속성입니다. 신문이나 잡지처럼 문단 시작 부분에 여백을 두어 가독성을 높이고 싶을 때 유용하게 활용할 수 있습니다.
값으로는 백분율(%) 또는 들여쓰기 간격을 지정하는 숫자와 단위(cm, px, pt, em 등)를 사용할 수 있으며, 음수 값을 지정하면 내어쓰기(첫 줄이 왼쪽으로 빠져나가는 형태)도 가능합니다.
주요 사용 가능 값
- 길이 단위: 2cm, 20px, 1.5em 등 고정된 크기로 들여쓰기
- 백분율(%): 부모 요소(컨테이닝 블록) 너비를 기준으로 들여쓰기
text-indent 사용 예제
다음 코드를 실행하면 text-indent 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "text-indent:2cm;"> 이 텍스트의 첫 번째 줄은 2cm만큼 들여쓰기되며, 나머지 줄은 원래 위치에 그대로 유지됩니다. 이것이 CSS text-indent 속성의 동작 방식입니다. </p> </body> </html>
위 예제에서는 인라인 스타일로 text-indent:2cm;를 지정했기 때문에 해당 문단의 첫 줄만 2cm만큼 오른쪽으로 밀려나고, 두 번째 줄부터는 일반적인 위치에 표시됩니다.
참고 사항
여러 문단에 일괄 적용하려면 인라인 스타일 대신 CSS 클래스나 태그 선택자를 사용하는 것이 좋습니다.
p {
text-indent: 1.5em;
}이렇게 하면 모든 <p> 문단의 첫 줄이 일관된 간격으로 들여쓰기되어, 문서 전체의 가독성과 디자인 완성도를 높일 수 있습니다.