CSS로 문단 텍스트 들여쓰기
문단(단락)의 첫 줄을 들여쓰려면 CSS의 text-indent 속성을 사용하면 됩니다. 이 속성은 블록 요소인 문단의 첫 번째 줄 시작 위치를 지정한 만큼 안쪽으로 밀어 주는 역할을 합니다.
사용할 수 있는 값
text-indent 속성에는 다양한 형태의 값을 지정할 수 있습니다.
- 길이 값(px, cm, pt, em 등) : 고정된 크기만큼 들여쓰기를 적용합니다.
- 백분율(%) : 부모 요소 너비를 기준으로 들여쓰기 폭을 상대적으로 지정합니다.
- 음수 값 : 반대 방향으로 밀어 내어쓰기(hanging indent) 효과를 낼 수도 있습니다.
예제
다음 코드를 실행하면 CSS의 text-indent 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<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만큼 들여쓰기되고, 나머지 줄들은 원래 위치에 그대로 유지됩니다. 이처럼 text-indent 속성은 문단 전체가 아닌 첫 줄에만 영향을 준다는 점이 특징입니다.