CSS에서 text-indent 속성은 단락(paragraph)의 첫 줄을 들여쓰기할 때 사용합니다. 이 속성은 들여쓰기 간격을 지정하는 값으로 %(백분율) 또는 px, cm, em 등의 길이 단위를 받을 수 있습니다.
text-indent 속성의 주요 특징
text-indent는 블록 레벨 요소의 첫 번째 줄에만 적용되며, 나머지 줄은 원래 위치 그대로 유지됩니다. 음수 값을 사용하면 내어쓰기(hanging indent) 효과도 낼 수 있습니다.
예제
아래 코드를 실행하면 CSS의 text-indent 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "text-indent:2cm;"> 이 텍스트의 첫 번째 줄은 2cm만큼 들여쓰기되며, 나머지 줄은 원래 위치에 그대로 유지됩니다. 이것은 CSS의 text-indent 속성으로 구현한 결과입니다. </p> </body> </html>
실행 결과 설명
위 예제에서는 인라인 스타일로 text-indent: 2cm;를 지정했기 때문에, 해당 단락의 첫 줄이 왼쪽에서 2cm 떨어진 위치에서 시작합니다. 두 번째 줄부터는 들여쓰기 없이 일반적인 위치에 표시됩니다.
다양한 단위 활용하기
들여쓰기 값은 상황에 따라 다양하게 지정할 수 있습니다. 예를 들어 text-indent: 10%;처럼 백분율을 사용하면 부모 요소 너비 기준으로 들여쓰기가 적용되고, text-indent: 2em;처럼 em 단위를 사용하면 글자 크기에 비례한 자연스러운 들여쓰기를 만들 수 있습니다.