[HTML/CSS] 텍스트 들여쓰기 / 내어쓰기 (text-indent)

텍스트가 많은 문서일 때는 문단의 첫 글자를 들여쓰게 되면 문단의 시작이 눈에 확 들어오기 때문에 가독성이 향상됩니다. 이번 포스팅에서는 웹 문서에서 문단을 들여 쓸거나 내어쓸 수 있는 text-indent 속성에 대해 알아보도록 하겠습니다.

 

 텍스트 들여쓰기 

See the Pen 텍스트 들여쓰기 by wjdxo513 (@wjdxo513) on CodePen.

 

text-indent 속성에 양수의 크기나 백분율을 넣으면 해당 값만큼 들여쓰기를 할 수 있습니다. 백분율로 크기를 설정하였을 경우에는 부모 요소의 너비가 달라지면 들여쓰기 값도 달라집니다.

 

 

 텍스트 내어쓰기 

See the Pen 텍스트 내어쓰기 by wjdxo513 (@wjdxo513) on CodePen.

 

text-indent 속성에 음수의 크기나 백분율을 넣으면 해당 값만큼 내어쓰기를 할 수 있습니다. 백분율로 크기를 설정하였을 경우에는 부모 요소의 너비가 달라지면 내어쓰기 값도 달라집니다.