문단의 첫 줄을 들여쓰기하려면 CSS의 text-indent 속성을 사용합니다. 이 속성에는 백분율(%) 또는 들여쓰기 간격을 지정하는 숫자 값을 설정할 수 있으며, px·cm·em 같은 길이 단위도 지원합니다.
예제
다음 코드를 실행하면 첫 줄 들여쓰기 결과를 직접 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "text-indent:2cm;"> This text will have first line indented by 2cm and this line will remain at its actual position this is done by CSS text-indent property. </p> </body> </html>
위 예제에서는 text-indent: 2cm;을 적용했기 때문에 문단의 첫 줄만 2cm만큼 들여쓰기되고, 나머지 줄은 원래 위치에 그대로 유지됩니다.
주요 속성값 정리
- 길이 단위(px, cm, em 등): 고정된 간격만큼 첫 줄을 들여씁니다.
- 백분율(%): 부모 요소(포함 블록) 너비를 기준으로 한 비율만큼 들여씁니다.
- 음수 값: 반대로 내어쓰기(hanging indent) 효과를 만들 수 있습니다.
text-indent 속성은 상속되므로, 부모 요소에 설정하면 자식 문단에도 동일하게 적용된다는 점을 참고하세요.