[CSS] 텍스트 스타일 알아보기 2 (TEXT)

전 포스트는 텍스트 스타일 중 글자, 단어와 돤련된 속성들이였습니다
이번에는 문단과 관련된 속성들에 대하여 알아보겠습니다

 

텍스트 스타일 관련 속성

 

1. text- align

글의 수평 정렬을 지정하는 속성

 

기본 문법 예시

text-align : left | right | center | justify

 

2. text- align-last

선택한 요소에서 마지막 라인만 수평 정렬 지정하는 속성

 

기본 문법 예시

text-align : auto | left | right | center | justify

 

속성 값	기능
left	좌측 정렬
right	우측 정렬
center	가운데 정렬
justify	양쪽 정렬

 

3. direction

글을 쓰는 방향을 지정하는 속성

 

기본 문법 예시

direction : ltr | rtl

 

속성 값	기능	기타
ltr	왼쪽에서 오른쪽으로	기본값
rtl	오른쪽에서 왼쪽으로

 

4. text-justify

글을 정렬 시 공잭을 조절하는 속성

 

기본 문법 예시

text-justify : auto | none | inter-word | distribute

 

속성 값	기능
auto	웹즈라우저에서 자동으로 지정
none	지정하지 않음
inter-word	단어와 단어 사이의 간격을 조절해 지정
distribute	인접한 글자사이의 공백을 동일하게 조절

 

5. text-indent

문단의 첫 문장 들여쓰기 지정

 

기본 문법 예시

text-indent : <크기>

 

6. line-height

행간(줄 간격) 조절하기

 

기본 문법 예시

line-height : <크기>

 

7. text-overflow

영역 밖으로 넘치는 텍스트 처리 방식 지정하기

 

기본 문법 예시

text-overflow : clip | ellipsis

 

속성 값	기능
clip	넘치는 텍스트를 자름
ellipsis	넘치는 텍스트를 말줄임표로 표시

 

TIP!
해당 속성은
overflow : hidden | scroll | auto ;
white-space : nowrap ;
일 경우에만 적용됨

 

---

 

관련 포스트

텍스트 스타일 알아보기 (TEXT)

[CSS] 텍스트 스타일 알아보기 (TEXT)

폰트 스타일 알아보기 (Fonts)

[CSS] 폰트 스타일 알아보기 (Fonts)

 

---

 

참조 자료

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