이번 글은 텍스트의 들여쓰기, 내어쓰기를 할 수 있는 css 속성인 text-indent에 대해서 알아보도록
하겠습니다.
- text indent란?
텍스트의 들여쓰기, 내어쓰기를 하는 속성값으로, 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가
됩니다.
기본값은 0으로, 내어쓰기를 할 때에는 해당 영역 밖으로 텍스트가 나갈 수 있으니 내어쓰기를 할 때에는
왼쪽에 여백을 적절히 줘야 합니다.
- 예제 코드
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div {
width: 500px;
height: 400px;
font-size: 20px;
border: 1px solid black;
}
.one {
text-indent: 20px;
}
.two {
text-indent: -20px;
}
.three {
padding-left: 30px;
text-indent: -20px;
}
</style>
</head>
<body>
<div class="one">
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor,
you can edit and test each example yourself!
</div>
<div class="two">
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor,
you can edit and test each example yourself!
</div>
<div class="three">
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor,
you can edit and test each example yourself!
</div>
</body>
</html>
결과창을 보시면 맨 위에는 20px 들여쓰기가 된 것을 볼 수 있고, 중간 div는 음수를 넣어서 내어쓰기가
되었는데 좌측 여백이 없어 텍스트가 div 영역 밖으로 나간 것을 볼 수 있습니다.
그래서 맨 아래의 div에는 padding-left로 여백을 주고 내어쓰기를 해서 영역 밖으로 나가지 않았습니다.
+
추가로, text-indent 속성은 block이나 inline-block 요소에만 사용이 가능하니 주의하시길 바랍니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| css white-space 속성 (0) | 2021.12.26 |
|---|---|
| css border-radius 속성 (0) | 2021.12.26 |
| css text-align 속성 (0) | 2021.12.23 |
| css z-index 속성 (0) | 2021.12.23 |
| css vertical-align 속성 (0) | 2021.12.23 |
댓글