[html/css] text-indent 속성(들여쓰기)

[html/css] text-indent 속성(들여쓰기)

text-indent는 문단의 첫줄 들여쓰기할 때 쓰는 속성입니다.

들여쓰기만 잘 써도 문장이 멋스러워 보이죠...^^

text-indent 속성은 텍스트를 담고 있는 블록 컨테이너에 적용합니다.

▶속성값

길이값 px, em, cm 등의 단위로 지정, 기본값은 0임.

% 부모 요소 너비에 상대적인 백분율

*음수값도 가능.

▶사용 예:

div{text-indent:}

▶html/css 작성해 보겠습니다

text-indent.htm

<p> 부분엔 30px 들여쓰기

<div> 부분엔 10% 들여쓰기를 설정해 보겠습니다.

html/css

<!DOCTYPE html>
<html>
<head>
<style>

body{background: #CEFBC9;}

p{text-indent: 30px;}
div{ border: 1px solid blue;
text-indent: 10%;}

</style>
</head>
<body>

<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language.
While most often used to style web pages and interfaces written in HTML and XHTML,
the language can be applied to any kind of XML document, including plain XML, SVG and XUL.
CSS is a cornerstone specification of the web and almost all web pages use CSS style sheets to describe their presentation.</p>

<div>CSS can also allow the same markup page to be presented in different styles for different rendering methods,
such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader)
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
</div>

</body>
</html>

실행화면

p태그는 모드 30px 만큼 들여쓰기 되었고

div 안은 10% 들여쓰기가 되었습니다.

text-decoration 속성(none, underline, overline, line-through)

글자색 color 속성, 배경색 background-color 속성 배우기

vertical-align 속성 자세히 알기(수직 정렬)

[html/css] line-height 속성 배우기

글자 간격 지정 속성 letter-spacing

'css' 카테고리의 다른 글

[html/css] text-transform 속성 (대문자 전환) (0)	2014.06.12
[html/css] 수직으로 가운데 정렬 방법 (다섯 가지) (3)	2014.06.11
text-decoration 속성(none, underline, overline, line-through) (1)	2014.06.09
[html/css] vertical-align 속성 자세히 알기(수직 정렬) (3)	2014.06.05
비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE (1)	2014.06.02