[CSS] text-indent (텍스트 들여쓰기, 내어쓰기)

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		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	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

POTATO THAT WANT TO BE HUMAN

[CSS] text-indent (텍스트 들여쓰기, 내어쓰기) 본문

FRONTEND/CSS

[CSS] text-indent (텍스트 들여쓰기, 내어쓰기)

녜힝 2022. 5. 3. 22:04

😶‍🌫️ text-indent

text-indent 는 문단의 첫 글자를 들여쓰기(혹은 내어쓰기) 하는 속성입니다.

값을 지정해 얼마나 들여쓸 것인지 지정합니다. 들어갈 수 있는 값에 대해 알아보겠습니다.

	속성	설명
	크기	단위로 들여 쓸 크기를 지정 (음수 사용 가능)
	백분율	부모 요소의 너비를 기준으로 상대적 크기 지정

값이 양수이면 들여쓰기가, 값이 음수이면 내어쓰기가 됩니다.

기본값은 0으로 지정하지 않을 시 들여쓰기 없이 출력됩니다.

예시를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>CSS text-indent example</title>
        <style>
            .txt1 {
            	text-indent: 20px;
            }
            .txt2 {
            	text-indent: -40px;
            }
            .txt3 {
            	text-indent: 30%;
            }
        </style>
    </head>
    <body>
    	<!-- 예시에 사용된 텍스트는 한글입숨을 사용했습니다. -->
    	<p class="txt1">
            법률이 정하는 주요방위산업체에 종사하는 근로자의 단체행동권은 
            법률이 정하는 바에 의하여 이를 제한하거나 인정하지 아니할 수 있다. 
            이 헌법중 공무원의 임기 또는 중임제한에 관한 규정은 이 헌법에 의하여 
            그 공무원이 최초로 선출 또는 임명된 때로부터 적용한다.
        </p>
    	<p class="txt2">
            법률이 정하는 주요방위산업체에 종사하는 근로자의 단체행동권은 
            법률이 정하는 바에 의하여 이를 제한하거나 인정하지 아니할 수 있다. 
            이 헌법중 공무원의 임기 또는 중임제한에 관한 규정은 이 헌법에 의하여 
            그 공무원이 최초로 선출 또는 임명된 때로부터 적용한다.
        </p>
    	<p class="txt3">
            법률이 정하는 주요방위산업체에 종사하는 근로자의 단체행동권은 
            법률이 정하는 바에 의하여 이를 제한하거나 인정하지 아니할 수 있다. 
            이 헌법중 공무원의 임기 또는 중임제한에 관한 규정은 이 헌법에 의하여 
            그 공무원이 최초로 선출 또는 임명된 때로부터 적용한다.
        </p>
    </body>
</html>

이에 대한 결과를 살펴보겠습니다.

(쉬운 구분을 위해 body에 테두리선을 추가하였습니다.)

- 첫 번째 문단은 20px 만큼 들여쓰기를 했습니다.

- 두 번째 문단은 -40px 만큼 내어쓰기를 했습니다.

이처럼 음수로 지정시 내어쓰기가 되며, 내어쓰기 한 부분이 영역을 벗어나게 됩니다.

- 세 번째 문단은 30% 만큼 들여쓰기를 했습니다. 부모요소인 body의 너비를 기준으로 30%가 지정되었습니다.

'FRONTEND > CSS' 카테고리의 다른 글

[CSS] float를 취소하기 위한 clearfix 이용하기 (0)	2022.05.08
[CSS] :nth-child()와 :nth-of-type() (0)	2022.05.05
[CSS] 미디어쿼리(Media Query) 사용하기 - 반응형웹 만들기 (0)	2022.04.21
[CSS] 드래그 방지 user-select (0)	2022.03.24
[CSS] 공백 처리 방법을 정하는 white-space (0)	2022.03.02

'FRONTEND/CSS' Related Articles

Comments

POTATO THAT WANT TO BE HUMAN

[CSS] text-indent (텍스트 들여쓰기, 내어쓰기) 본문

[CSS] text-indent (텍스트 들여쓰기, 내어쓰기)

😶‍🌫️ text-indent

'FRONTEND > CSS' 카테고리의 다른 글

티스토리툴바