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

 

CSS의 text-indent 속성을 사용하면

텍스트 단락의 들여쓰기와 내어쓰기의 정도를 설정할 수 있습니다.

 

text-indent 속성

CSS의 text-indent 속성을 사용하면,

블록에서 텍스트 앞에 놓이는 공간의 길이를 설정할 수 있습니다.

• 기본값 : 0
• 허용값
  • length : px, em 등
  • percentage : ex) 10% 등
• 값이 양수일 경우, 들여쓰기가 됩니다.
• 값이 음수일 경우, 내어쓰기가 됩니다.

 

 

단락 들여쓰기

<p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. </p>
<p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. </p>
<p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. </p>

p {
  text-indent : 50px;
  /* text-indent : 50%; */
}

<p> 태그에 text-indent를 50px로 지정하였습니다.

<p> 태그로 둘러싸인 모든 단락 앞이 50px만큼 들여쓰기 되었습니다.

주석 처리된 'text-indent: 50%;'의 주석을 해제하여, text-indent 값을 %로 지정하는 예제를 테스트해 보세요.

 

 

단락 내어쓰기

<p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. </p>
<p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. </p>
<p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. </p>

p {
  text-indent : -50px;
  /* text-indent : -50%; */
}

text-indent: -50px;

text-indent  값을 음수로 지정하면

단락의 첫 줄만 내어쓰기가 적용됩니다.

그런데, 위 예제와 같이 text-indent 값만 음수로 지정하면,

내어쓰기된 부분이 짤려보이게 됩니다.

 

<p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. </p>
<p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. </p>
<p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. </p>

p {
  text-indent : -50px;
  /* text-indent : -50%; */
  padding-left: 50px;
}

padding-left: 50px;

이전 예제에서 발생한, 내어쓰기 된 부분이 짤려보이는 문제를 해결하기 위해

padding-left 값을 지정해 주었습니다.

 

 

text-indent 속성으로 들여쓰기, 내어쓰기가 되지 않는 경우

<span> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. </span>
<br />
<span> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. <span>

span {
  text-indent : 50px;
}

css의 text-indent 속성은

html의 block 요소에 적용됩니다.

inline 요소에는 적용되지 않습니다.

따라서 위와 같은 <span> 요소에는 text-inline 속성 값을 지정해도 동작하지 않습니다.