CSS 텍스트 첫 문장 들여쓰기 두 가지 방법 (text-indent, first-letter)

수 많은 도서들, 그리고 그 속에 담겨있는 엄청난 양의 텍스트들... 이 텍스트들의 공통점이 하나 있습니다. 모든 도서가 이렇지는 않겠지만 대부분은 들여쓰기가 적용되어 있습니다. 보통 새로운 문단이 시작되면 첫 단어의 왼쪽이 살짝 떨어져 있을겁니다. 이런 식으로요.

 

예시 살펴보기

See the Pen 텍스트 들여쓰기 두 가지 방법 by rgy0409 (@rgy0409) on CodePen.

 

위의 예시를 쭉 훑어보시면 두 개의 무작위 문단과 두 개의 이미지가 있습니다. 각 문장은 p태그로 감싸여 있으며 들여쓰기가 적용되어 있습니다. 또한 p태그 안에도 img 태그를 넣었습니다. 그런데 이 두개의 이미지는 차이가 있습니다. 이미지의 왼쪽 부분을 유심히 살펴보시면 알 수 있습니다. 첫번째 이미지에는 들여쓰기 효과가 적용되어 있지만 두번째 이미지에는 들여쓰기가 적용되지 않았습니다. CSS에서 들여쓰기를 제어하는 두 가지 방법은 다음과 같습니다.

 

선택자 {
    text-indent: 값;
}

선택자::first-letter {
    margin-left: 값;
}

위의 예시를 살펴보시면 ex1과 ex2 두 개의 클래스명이 있습니다. ex1에는 text-indent가 적용되었으며 ex2에는 first-letter가 적용되었습니다.

 

text-indent

이 방법은 텍스트의 첫 단어에 적용되는 일종의 margin-left와 같습니다. 값은 px, rem, em 등등의 다양한 단위를 사용해 적용시킬 수 있습니다. 만약 p태그 안에 텍스트만 가득하다면 들여쓰기를 적용함에 있어서 전혀 문제가 되지 않습니다. 하지만 문제는 방금 전에도 언급했듯 img 태그를 사용하는 경우입니다.

 

img도 일종의 텍스트 취급을 받습니다. 그렇기때문에 img의 왼쪽에도 text-indent 값만큼 벌어지게 됩니다. 이 문제를 어디서 발견했느냐면 바로 티스토리 플랫폼입니다. 친효스킨을 만들면서 들여쓰기 기능을 넣고 싶었고 text-indent를 적용시켰더니 텍스트 뿐만 아니라 이미지에도 영향을 주더군요. 티스토리의 이미지 태그는 기본적으로 p태그 안에 들어가는 형태로 발행되기 때문입니다. img만 따로 빠져나오면 전혀 상관 없지만 기본값이 p태그안에 img가 들어가기에 이 방법을 사용할수는 없었습니다. 그래서 두번째 방법을 사용하게 됩니다.

 

::first-letter

가상선택자를 사용한 방법을 통해 텍스트에만 영향을 주고 이미지에는 영향을 주지 않도록 만들 수 있습니다. first-letter 가상선택자 사용 방법은 매우 쉽습니다. 텍스트가 들어있는 태그를 선택 후 first-letter를 추가 입력합니다. 그리고 왼쪽으로부터 떨어져야 하니까 margin-left 또는 padding-left를 사용하면 됩니다.

 

이 방법을 사용하면 위의 예시에서 살펴볼 수 있듯 텍스트에만 들여쓰기가 적용되고 이미지에는 영향을 주지 않게됩니다. 만약 p태그 안에 텍스트 뿐만 아니라 다른 요소들을 사용할 일이 있다면 아무래도 첫번째 방법 보다는 가상 선택자를 사용하는 두번째 방법이 스트레스를 덜 받지 않을까 싶습니다. 끝.