[text] CSS - text-indent 속성 ★★ - 단락 첫줄 텍스트 들여쓰기 (= text-indent속성 = 텍스트인덴트 속성)

1. text-indent 예제 - 단락 첫 라인 텍스트 들여쓰기
2. text-indent 정의
3. text-indent 구문
4. text-indent 예제 - <input> 입력창 들여쓰기

text-indent 예제 - 단락 첫 라인 텍스트 들여쓰기 

 

<style>

div.a {text-indent: 50px;}

div.b {text-indent: -2em;}

div.c {text-indent: 30%;}

</style>

<h2>text-indent: 50px:</h2>

<div class="a">

  <p>홈짱닷컴 Homzzang.com ...</p>

</div>

<h2>text-indent: -2em:</h2>

<div class="b">

  <p>홈짱닷컴 Homzzang.com ...</p>

</div>

<h2>text-indent: 30%:</h2>

<div class="c">

  <p>홈짱닷컴 Homzzang.com ...</p>

</div>

 

결과보기

text-indent 정의

 

텍스트 단락의 첫 줄 들여쓰기 지정.

 

---

 

1.

padding margin border width -  가로길이 (= 너비)에 전부 반영 O 
text-indent -  가로길이 (= 너비)에 반영 X

 

2.

텍스트 단락의 가장 첫 줄만 들여쓰기 반영. (2번째 줄부터는 적용 X)

음수값 허용되며, 음수일 경우 내어쓰기됨.

 

3.

• 기본값: 0
• 상속여부: O
• 애니효과: O
• CSS버전: CSS1
• JS버전: object.style.textIndent="50px"

 

4.

모든 브라우저 지원.

※ 일부 속성값은 아지 미지원 브라우저 많음. 

 

5.

MDN text-indent 예제 보기

 

text-indent 구문

 

selector {text-indent: length|initial|inherit;}

 

---

[속성값]

 

length
px,pt,cm,em 등 단위 만큼 첫 줄 들여쓰기. 
음수 경우 내어쓰기 되며 margin-left 값을 추가해 정렬.

% (백분율) 

부모 요소 너비의 % (백분율) 만큼 첫 줄 들여쓰기. 

음수 경우  내어쓰기 되며 margin-left 값을 추가해 정렬.

 

initial

이 속성의 기본값으로 설정.

 

inherit 

부모 요소의 속성값 상속.

 

PS.

each-line, hanging 속성값은 미지원 브라우저가 대다수. ㅡㅡ;

text-indent 예제 - <input> 입력창 들여쓰기

 

<style>

input[type=text] { text-indent: 5px; }

</style>

이름: <input type='text'>

별명: <input type='text'>

확인: <input type='submit'>

 

결과보기