HTML 들여쓰기 완벽 가이드: text-indent 속성 활용법

HTML 들여쓰기(text-indent)란?

HTML 인라인 스타일 속성 중 하나인 text-indent는 종이에 글을 쓸 때 문단의 첫 줄을 들여 쓰는 것처럼, 텍스트 단락(paragraph)에 들여쓰기를 적용해 주는 속성입니다.

픽셀(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 HTML</title>
   </head>
<body>
       <p style="text-indent: 25px;">
           Baseball ipsum dolor sit amet passed ball outs, sweep stretch bleeder triple play. Left fielder count fair swing cork balk ball. Full count southpaw reliever lineup crooked number fastball second base. Perfect game outfielder rally force dodgers right fielder dead ball era right field. Pickoff world series peanuts batting average cup of coffee foul inside robbed. Bleeder club appeal first base sidearm mustard steal line drive inning.
       </p>
       <p style="text-indent: 25px;">
           Sidearm bullpen base on balls national pastime losses reliever umpire pull dribbler. Manager 4-bagger tag national pastime pennant good eye relief pitcher. Save on-base percentage fan ejection baseball card skipper reliever strikeout bench. On-base percentage fenway contact win warning track, ball rhubarb center field. Starting pitcher hey batter out cellar cardinals basehit double switch. Play hey batter tigers sidearm in the hole shortstop no decision.
       </p>
       <p style="text-indent: 25px;">
           Off-speed petey pinch hitter astroturf walk off no decision count full count wrigley. Hack cheese helmet tossed gap run red sox. Fall classic in the hole ejection rotation rally center field shift. Manager pickoff knuckleball assist pinch runner pitchout stretch. Steal hardball extra innings alley rubber off-speed flyout third base. Baseline butcher boy umpire left field hitter, catcher win right field can of corn.
       </p>
   </body>

다양한 길이 단위 활용하기

위 예시에서 사용된 픽셀(px)은 절대 길이 단위입니다. 하지만 들여쓰기 크기를 반드시 픽셀로 지정할 필요는 없습니다. em, rem처럼 상대적·반응형으로 동작하는 길이 단위를 사용할 수도 있고, 전체 요소(문단) 너비를 기준으로 하는 백분율(%) 단위로도 들여쓰기를 표현할 수 있습니다.

CSS의 text-indent 속성과의 차이점

text-indent 속성은 이름이 같은 CSS 속성과 기능적으로 완전히 동일합니다. 두 방식의 유일한 차이점은 선택자 규칙(selector rule)이 작성되는 위치입니다.

CSS 방식: HTML의 head 영역 내 style 태그 또는 외부 스타일시트(.css 파일)에 다른 CSS 규칙들과 함께 작성합니다.
HTML 인라인 방식: 실제 마크업(markup) 내부에 인라인 스타일 형태로 직접 작성합니다.

따라서 여러 요소에 일관된 스타일을 적용하고 관리하려면 CSS 방식을, 특정 요소 하나에만 간단히 스타일을 적용하려면 HTML 인라인 방식을 사용하는 것이 좋습니다.