text-indent은 문단의 첫 글자를 들여쓰기 하는 것으로 얼마나 할지를 지정
|
속성 |
설명 |
|
크기 |
단위로 들여 쓸 크기를 지정(음수 사용 가능) |
|
백분율 |
부모 요소의 너비를 기준으로 상대적 크기 지정 |
티스토리 뷰
1. 개념
text-indent - 텍스트 들여쓰기
2. 태그
text-indent
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
<style>
div
{
margin-top
:
20px
;
}
</style>
</head>
<body>
1
<div style
='
text-indent
:
15px
'
>
키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.
</div>
2
<div style
='
text-indent
:
20%
'
>
키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.
</div>
</body>
</html>
|
결과 화면
코드 설명
1
text-indent
:
15px
;
문단의 첫 글자의 들여쓰기를 부분을 15px로 설정되어서 작은 네모 박스 만큼 들여쓰기를 하였습니다.
백분율이 아닌 단위로 크기를 지정할 경우에는 부모 요소 너비와 상관 없이 들여쓰기가 고정됩니다.
백분율이 아닌 단위로 크기를 지정할 경우에는 부모 요소 너비와 상관 없이 들여쓰기가 고정됩니다.
2
text-indent
:
20%
;
백분율로 들여쓰기를 지정한 경우에는 부모 요소의 너비를 기준으로 들여쓰기 너비가 달라집니다.
지금 예제는 div의 부모가 body이기 때문에 웹 페이지 너비가 변동 될 경우에는 들여쓰기 너비 또한 달라집니다.
지금 예제는 div의 부모가 body이기 때문에 웹 페이지 너비가 변동 될 경우에는 들여쓰기 너비 또한 달라집니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] text-overflow - 넘치는 텍스트 표기 (0) | 2021.04.08 |
|---|---|
| [css3] line-height - 줄 간격 조절 (0) | 2021.04.07 |
| [css3] text-align - 텍스트 정렬 (0) | 2021.04.05 |
| [css3] letter-spacing,word-spacing - 텍스트 간격 조절 (0) | 2021.04.02 |
| [css3] white-space - 공백 처리 (0) | 2021.04.01 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday