들어가기 전에
문서나 코드를 살펴보면 새로운 문단의 시작에서 들여쓰기를 많이 사용합니다.
들여쓰기는 문단의 처음 왼쪽 글머리에 빈칸을 만들어 가독성을 향상하는 효과가 있습니다.
text-indent를 이용해서 문장의 첫 줄을 들여쓰기할 수 있습니다.
핵심키워드
- 들여쓰기
학습하기
12) 속성-text-indent
text-indent 속성
텍스트의 들여쓰기를 지정하는 속성입니다.
기본 값 : 0
text-indent: length | initial | inherit;< 속성 값 >
length | px, em 등 고정 수치로 지정. 음수 허용 |
% | 부모 요소의 width를 기준으로 퍼센트로 지정 |
- length 문단의 첫 줄에 대한 들여쓰기를 수행합니다. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동합니다.
- percent ( % ) 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기합니다.
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>text-indent</title>
</head>
<body>
<h1>text-indent</h1>
<h2>length 1em</h2>
<p style="text-indent: 1em;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
<h2>length 40px</h2>
<p style="text-indent: 40px;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
<h2>percentage 15%</h2>
<p style="text-indent: 15%;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
<h2>length -40px (비추천)</h2>
<p style="text-indent:-40px;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.<br>들여쓰기에 음수사용은 올바르지 않으며 본래의 기능에서 벗어남</p>
</body>
</html>
참고자료
- CSS text-indent property
https://www.w3schools.com
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
- text-indent
https://developer.mozilla.org
- The text-indent CSS property specifies the amount of indentation (empty space) that is put before lines of text in a block. By default, this controls the indentation of only the first formatted line of the block, but the hanging and each-line keywords can be used to change this behavior.
