들여쓰기, 내어쓰기 하는 방법 - text-indent
text-indent
들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기,
값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다.
기본형
text-indent : value- value : 크기를 지정합니다. 음수 값도 사용할 수 있습니다.
예제
다음은 들여쓰기와 내어쓰기를 한 간단한 예제입니다. 내어쓰기를 할 경우 속성
값을 음수로 하고 좌측에 여백을 줍니다.
><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. <span>Proin gravida velit dictum dui consequat malesuada.</span></p>
<p class="indent1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. <span>Proin gravida velit dictum dui consequat malesuada.</span></p>
<p class="indent2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. <span>Proin gravida velit dictum dui consequat malesuada.</span></p>
.indent1 {
text-indent: 2em;
}
.indent2 {
text-indent: -2em;
margin-left: 2em;
}data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="520"
data-pen-title="CSS 들여쓰기, 내어쓰기 text-indent 예제"
data-slug-hash="ZEWZZVG"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 520px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.