[DOM_Style] JS - textIndent 속성 - 텍스트 들여쓰기/내어쓰기 (= textIndent속성 = 텍스트인덴트속성)

1. textIndent 예제 - 텍스트 들여쓰기 설정
2. textIndent 정의
3. textIndent 구문
4. textIndent 예제 - 텍스트 들여쓰기 설정값 반환

textIndent 예제 - 텍스트 들여쓰기 설정

 

<div id="hz">

홈짱닷컴 Homzzang.com 홈페이지 제작관리 강의

홈짱닷컴 Homzzang.com 홈페이지 제작관리 강의

홈짱닷컴 Homzzang.com 홈페이지 제작관리 강의

</div><br>

<button type="button" onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementById("hz").style.textIndent = "50px";

}

</script>

 

결과보기 

textIndent 정의

 

텍스트의 첫 줄 들여쓰기 설정/반환.

(음수 허용되며, 음수 경우 내어쓰기 됨.)

 

---

 

1.

• 기본값: 0
• 반환값: text-indent 나타내는 문자열
• CSS버전: CSS1

2.

모든 브라우저 지원. 

 

textIndent 구문

 

반환

object.style.textIndent 

 

설정

object.style.textIndent = "length|%|initial|inherit"

 

---

[속성값]

 

length
px,pt,cm,em 등 단위 만큼 첫 줄 들여쓰기. (기본값: 0)

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

% (백분율) 

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

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

 

initial

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

 

inherit 

부모 요소의 속성값을 상속.

 

textIndent 예제 - 텍스트 들여쓰기 설정값 반환

 

<div id="hz" style="text-indent:50px">

홈짱닷컴 Homzzang.com 홈페이지 제작관리 강의

홈짱닷컴 Homzzang.com 홈페이지 제작관리 강의

홈짱닷컴 Homzzang.com 홈페이지 제작관리 강의

</div><br>

<button type="button" onclick="homzzang()">클릭</button>

<script>

function homzzang() { 

    alert(document.getElementById("hz").style.textIndent);

}

</script>

 

결과보기