text-indent
속성의 이해
text-indent
속성은
텍스트 첫 줄의 들여쓰기 간격을 설정합니다.
- 양수 값은 안쪽으로 들여쓰기가 되고,
- 음수 값은 텍스트의 첫 줄을 바깥쪽으로 내어쓸 수 있습니다.
text-indent 속성은 텍스트 첫 줄의 들여쓰기 간격을 설정합니다. 양수 값은 안쪽으로 들여쓰기가 되고, 음수 값은 텍스트의 첫 줄을 바깥쪽으로 내어쓸 수 있습니다.
참고사항
text-indent
속성은 블록 컨테이너에만 적용됩니다. 인라인 컨테이너에는 적용되지 않습니다.
형식 구문
selector {
text-indent: <길이> | <백분율(%)>
}
구문
/* <길이> 값 */
text-indent: 0; /* 초깃값 */
text-indent: 20px;
text-indent: -20px;
text-indent: 1em;
text-indent: -2em;
text-indent: 1rem;
text-indent: -1rem;
/* <백분율(%)> 값 - 블록 컨터이너 너비에 대한 백분율 */
text-indent: 10%;
text-indent: -10%;
/* 전역 값 */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;
값
text-indent
속성은 <길이>
단위 값, <백분율(%)>
단위 값을 사용할 수 있습니다.
음수 값도 허용됩니다.
음수 값은 텍스트의 첫 줄을 바깥쪽으로 내어쓸 수 있습니다.
<길이>
단위 값
텍스트 첫 줄의 들여쓰기 간격 크기의 값입니다. (양수, 0
, 음수가 가능합니다.)
상대적 <길이>
단위
절대적 <길이>
단위
-
px
- CSS에서 사용 가능한 절대적 길이 단위
<백분율(%)>
단위 값
블록 컨테이너의 너비에 대한 백분율로 정의합니다. (양수, 0
, 음수가 가능합니다.)
형식 정의
초깃값 | 0 |
---|---|
적용 요소 | 블록 컨테이너 |
상속 | 예 |
애니메이션 | 예 |
예제
다음의 두 가지 예제를 통해 text-indent
속성의 적용되는 모습을 살펴보세요.
기본 들여쓰기
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
p {
text-indent: 4em;
background-color: #f2f2f2;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
세로 쓰기 모드에서 text-indent
<div class="vertical-text">
세로쓰기 모드에서는
첫 번째 줄이 오른쪽에서 왼쪽으로 내려가기 때문에,
들여쓰기는 위쪽 방향으로 적용됩니다.
</div>
.vertical-text {
writing-mode: vertical-rl;
text-indent: 2em;
border: 1px solid #ccc;
width: 200px;
height: 150px;
padding: 1em;
}
코드 부연설명
writing-mode
속성은 텍스트 줄을 가로 또는 세로로 배치할지 여부와 블록 컨테이너의 흐름이 되는 방향을 지정합니다.
direction: rtl
에서 text-indent
<p class="rtl-arabic" lang="ar" dir="rtl">
هذا نص عربي تجريبي يستخدم لمحاكاة اتجاه الكتابة من اليمين إلى اليسار مع تطبيق المسافة البادئة على السطر الأول.
</p>
.rtl-arabic {
direction: rtl;
text-align: right;
text-indent: 2em;
border: 1px solid #ccc;
width: 200px;
padding: 1em;
}
코드 부연설명
CSS의 direction
속성은 텍스트를 포함한 인라인 콘텐츠의 진행 방향을 설정하며, ltr
(왼쪽 → 오른쪽) 또는rtl
(오른쪽 → 왼쪽)로 지정할 수 있습니다.
هذا نص عربي تجريبي يستخدم لمحاكاة اتجاه الكتابة من اليمين إلى اليسار مع تطبيق المسافة البادئة على السطر الأول.
브라우저 호환성
마지막 업데이트 정보: 2025-05-15
속성과 값 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-indent
|
1 | 12 | 1 | 3.5 |
each-line
|
지원하지 않음 | 지원하지 않음 | 121 | 15 |
hanging
|
지원하지 않음 | 지원하지 않음 | 121 | 15 |
명세서
명세서 사양 | |
---|---|
text-indent
|
CSS Text Module Level 3 #text-indent-property |