HTML5+CSS3]6-3 문단 스타일

https://www.youtube.com/user/easyspub

 

easyspub

⭐문단 스타일에서 조절하는 부분은 텍스트 정렬이나 들여쓰기, 줄 간격 등이다.

 

✔direction 속성 : 글자 쓰기 방향 지정하기

👉기본형 : direction : ltr | rtl

👉텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지를 결정한다

아랍어는 오른쪽에서 왼쪽으로 쓴다

 

✔text-align : 텍스트 정렬하기

👉기본형

text-align : start | end | left | right | center | justify | match-parent

👉문단의 텍스트 정렬 방법을 지정한다.

 

✔text-justify 속성 : 정렬시 공백 조절하기

👉text-align 속성 값이 text-justify일 경우, 양쪽 끝에 맞추기 때문에 글자와 단어 사이 간격을 조절할 때 사용한다.

👉기본형 : text-justify : auto | none | inter-word | distribute

 

✔text-indent 속성 : 텍스트 들여 쓰기

👉문단의 첫자를 얼마나 들여 쓸지를 지정한다

👉기본형 : text-indent : <크기> | <백분율>

 

✔line-height 속성 : 줄 간격 조절하기

👉원하는 만큼 줄 간격을 조절할 수 있다

👉기본형 : line-height : normal | <숫자> | <크기> | <백분율> | inherit

<숫자>나 <백분율>로 지정했을 때는 글자 크기를 기준으로 지정

👉부모 요소를 기준으로 몇배인지 지정한다

보통 줄 간격은 글자 크기의 1.5~2배면 적당하다

 

✔text-overflow 속성 : 넘치는 텍스트 표기하기

👉white-space: nowrap으로 지정해 줄 바꿈을 하지 않을 때는 텍스트가 기준선을 벗어나 넘칠 수도 있다.

이때, 넘치는 텍스트를 어떻게 처리할지 지정한다

👉기본형 : text-overflow: clip | ellipsis