CSS text-indent 속성으로 텍스트 들여쓰기 적용하는 방법

CSS 텍스트 들여쓰기(text-indent)란?

CSS의 들여쓰기 속성인 text-indent는 학교 시절 글이나 보고서를 작성할 때 문단의 첫 줄을 들여썼던 것과 매우 유사한 역할을 합니다. 이 속성을 사용하면 모든 텍스트 블록의 첫 번째 줄만 자동으로 들여쓰기되어, 문단의 시작 지점이 시각적으로 명확하게 구분됩니다.

픽셀(px) 단위로 들여쓰기 설정하기

아래 코드 예시는 픽셀(px) 단위를 사용해 text-indent를 적용하는 기본적인 방법을 보여줍니다.

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Text Indent CSS</title>
   </head>
   <style>
       .example {
           text-indent: 25px;
       }
   </style>
   <body>
       <p class="example">
           Cat ipsum dolor sit amet, american bobtail. Scottish fold ragdoll, and savannah but thai. Bombay. Lion. British shorthair maine coon. Tom. Leopard cheetah abyssinian and ocicat or american shorthair, but birman donskoy. Ocelot. Devonshire rex cougar for kitten. American shorthair lion. Lynx. Balinese persian so norwegian forest sphynx malkin. Devonshire rex kitten panther. Leopard manx tom donskoy but russian blue, ocicat tabby.
       </p>

       <p class="example">
           Tomcat malkin, and ocelot. Puma. Balinese . Panther lynx or american bobtail and turkish angora, manx cougar. Malkin scottish fold but sphynx russian blue, maine coon balinese . Ocicat sphynx devonshire rex, mouser bobcat. Kitty maine coon american bobtail havana brown.
       </p>

       <p class="example">
           Birman sphynx ragdoll tabby so british shorthair. Persian bombay thai for birman. Kitty havana brown maine coon tomcat and himalayan, but donskoy. Tom american bobtail birman, and ragdoll or panther or leopard yet american bobtail. Devonshire rex ocicat and munchkin. Lion lynx norwegian forest munchkin, tiger yet cheetah. American bobtail persian. Cornish rex. Leopard. Havana brown savannah puma yet tabby american shorthair, puma but tom. Egyptian mau kitten and lynx, havana brown tom, and siberian munchkin. Ocelot siberian so cheetah. American bobtail tiger, and lion. Kitten russian blue yet ocicat mouser thai and lynx norwegian forest. Panther. Mouser thai egyptian mau but devonshire rex. Lion panther for kitten. Ocelot savannah yet leopard or sphynx. Ocicat savannah puma ragdoll thai for panther siamese.
       </p>
   </body>
</html>

다양한 길이 단위로 들여쓰기 조절하기

위 예제에서 사용된 픽셀(px)은 화면 크기와 무관하게 고정된 값을 가지는 절대 길이 단위입니다. 하지만 text-indent는 반응형 웹에 더 유연하게 대응할 수 있는 상대 길이 단위로도 표현할 수 있습니다.

em: 해당 요소의 글꼴 크기를 기준으로 들여쓰기가 결정됩니다.
rem: 문서 전체의 루트(root) 글꼴 크기를 기준으로 계산됩니다.
%: 해당 요소(문단) 전체 너비에 대한 백분율로 들여쓰기 폭이 정해집니다.

예제 코드에서 픽셀 값을 em, rem, %로 하나씩 바꿔가며 결과가 어떻게 달라지는지 직접 실험해 보면, 각 단위의 특성과 반응형 동작 방식을 훨씬 쉽게 이해할 수 있습니다.