text-indent CSS 들여쓰기 내어쓰기

css로 들여 쓰기와 내어 쓰기를 할 수 있는

text-indent 사용방법을 알아봅시다.

 

 

 

---

1. text-indent

div{
	text-indent : 1em;
}

text-indent

text-indent에서

indent는 "들여쓰다"라는 뜻으로

글자 들여 쓰기라는 직관적인 속성입니다.

 

속성 값으로는

들여 쓰고 싶은 공간만큼 거리를

숫자로 적어주시면 됩니다.

 

단위는 px, em, % 등이 있습니다.

 

 

 

-

 

---

2. text-indent 적용 예시

text-indent 적용 예시

text-indent 적용 예시입니다.

제 포트폴리오 사이트 중 일부인데요.

 

표시된 부분이 속성 값만큼 들여 쓰기 된 모습입니다.

1em을 주면 위의 이미지만큼 들여쓰기 됩니다.

 

포트폴리오를 직접 확인하고 싶으신 분은

아래 버튼을 눌러주세요.

 

 

포트폴리오 보기

 

 

---

3. W3School text-indent

https://www.w3schools.com/cssref/pr_text_text-indent.asp

CSS text-indent property

text-indent 설명

더 상세한 설명이나

실습을 해보고 싶으시다면

w3school에서 확인해주세요~

 

-

 

div{
	text-indent : -1em;
}

내어 쓰기

참고로 내어 쓰기는

-(마이너스) 숫자를 넣어주면 됩니다.

 

 

---

이상으로 text-indent css 들여 쓰기 내어 쓰기 방법을 알아보았습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/html + css] - css 변수 사용 방법

css 변수 사용 방법

[coding/html + css] - css flexbox 게임으로 배워보자

css flexbox 게임으로 배워보자

 

그럼 이만.

총총.