• Q&A
  • 회원가입
  • 로그인

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

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.

모든 브라우저 지원.

 

 

text-indent 구문

 

선택자 {text-indent: 속성값;}

 


[속성값]

 

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

% (백분율) 
부모 요소 너비의 % (백분율) 만큼 첫 줄 들여쓰기. 
음수 경우  내어쓰기 되며 margin-left 값을 추가해 정렬.
 
initial
이 속성의 기본값으로 자동 설정.
 
inherit 
부모 요소의 속성값을 상속.
자식 요소에서 별도의 속성을 지정 안할 경우 부모 요소의 속성이 자동 상속

 


text-indent 예제

 

<style>

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

</style>


이름: <input type='text'>

별명: <input type='text'>

확인: <input type='submit'>

 

결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012