HTML/CSS에서 단락 텍스트 들여쓰기하는 방법 총정리

HTML 요소 안에서 텍스트를 들여쓰고 싶으신가요? CSS를 활용하면 단락의 첫 줄을 아주 간단하게 들여쓸 수 있습니다.

지금부터 그 방법을 하나씩 살펴보겠습니다.

text-indent로 단락 첫 줄 들여쓰기

먼저, 다음과 같은 단락 텍스트가 있다고 가정해 보겠습니다.

<p class="indent">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa sit aperiam deserunt quae excepturi fugit, consequuntur cum corporis illum natus quibusdam quasi ab at. Laboriosam aperiam aut laborum animi soluta eligendi iste doloribus error, ex eius magnam? Aperiam illum nam cupiditate omnis. Repudiandae doloribus voluptatibus, animi quas incidunt eveniet fugiat!
</p>

이때 CSS 속성인 text-indent를 사용하면 첫 줄을 원하는 길이만큼 들여쓸 수 있습니다.

p.indent {
    text-indent: 30px;
}

실제로 적용하면 화면에 다음과 같이 표시됩니다.

들여쓰기 단위는 자유롭게 선택 가능

다른 CSS 길이 속성과 마찬가지로 text-indent에도 어떤 단위든 사용할 수 있습니다. 픽셀(px), em, rem은 물론 백분율(%) 단위까지 모두 정상적으로 동작합니다.

특히 백분율처럼 상대 단위를 사용하면 웹페이지 너비에 따라 들여쓰기 크기가 자동으로 조절됩니다. 즉, 화면이 넓어질수록 들여쓰기도 함께 커지게 됩니다.

음수 값으로 내어쓰기(Outdent) 만들기

원한다면 음수 text-indent 값을 지정할 수도 있습니다. 이렇게 하면 첫 줄이 왼쪽으로 돌출되는 내어쓰기 효과를 얻을 수 있습니다.

p.indent {
    text-indent: -30px;
}

음수 들여쓰기를 적용한 단락의 실제 모습은 다음과 같습니다.

단락 전체를 오른쪽으로 이동하려면 margin-left 사용

첫 줄뿐 아니라 단락 전체를 오른쪽으로 옮기고 싶다면 margin-left 속성을 사용하는 것이 좋습니다.

p.shifted {
    margin-left: 30px;
}

적용 결과는 아래와 같습니다. 첫 번째 단락은 그대로 두었고, 두 번째 단락에만 margin-left를 적용했습니다.

정리하자면, 첫 줄만 들여쓰기할 때는 text-indent, 단락 전체를 이동시키고 싶을 때는 margin-left를 사용하면 됩니다. 상황에 맞는 속성을 골라 깔끔한 텍스트 레이아웃을 구성해 보세요.