본문 바로가기
프로그래밍 공부 정리/html,css

텍스트 관련 스타일(3)

by 메기사랑 2021. 12. 10.

**direction
==> 텍스트를 쓰는 방향을 설정
ltr 왼쪽으로 오른쪽으로, 기본값
rtl 오른쪽으로 왼쪽으로 

------------------------------------------------
**text-align
==> 텍스트를 정렬 방식을 설정
left 왼쪽맞춤
right 오른쪽맞춤
center 가운데맞춤
justify 양끝맞춤
match-parent 부모노드에 맞춤

---------------------------------------------------
**text-justify
==> text-align="justify"로 설정할 경우에 
글자사이의 간격, 단어사이의 간격을 조절할 때 사용.

auto 자동
none 정렬하지 않음.
inter-word 단어사이의 공백을 조절하여 정렬
distribute 인접한 글자 사이의 공백을 똑같이 만들어 정렬

==> 현재 브라우저에서는 잘 지원되지 않음.

------------------------------------------------------
**text-indent
들여쓰기를 설정
크기, 백분율

line-height
줄간격을 설정
2  <--- 글자크기 2배


--------------------------------------------------
**overflow: hidden
==> 요소의 크기를 넘치는 컨텐츠를 
보이지 않도록 설정

-------------------------------------------------
**text-overflow
overflow:hidden, white-space: nowrap과 같이 사용하며
넘치는 텍스트를 어떻게 할지 설정

clip  : 잘라버림
ellipsis  : 말줄임표(...)를 표시함.

여러줄의 내용보다는
한줄짜리 내용에 적합합니다.

--------------------------------------------------------
**list-style
리스트의 기호 모양을 설정합니다.