[HTML+CSS][텍스트 관련 스타일] 03 - 문단 스타일

 

[HTML+CSS][텍스트 관련 스타일] 02 - 텍스트 스타일

 

텍스트에 대해 다양한 스타일에 대해서 알아보았다면

문단으로 글을 작성할 때 넣을 수 있는 스타일에 대해서

알아보자.

 

 

---

 

 

direction 속성 : 글자 쓰는 방향 지정

 

 

 

---

 

 

text-align 속성 : 텍스트 정렬

 

 

 

 

 

---

 

 

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

 

text-align 속성이 justify일 경우, 양 끝쪽에 맞춰지기 때문에

글자와 단어 사이의 간격이 어색하게 벌어질 것을 대비해

간격을 조절할 수 있는 속성이다.

 

 

---

 

 

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

 

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

 

 

 

 

---

 

 

line-height 속성 : 줄 간격 조절

 

원하는 만큼의 줄 간격을 조절한다.

 

 

 

 

---

 

 

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

 

'white-space: nowrap'로 지정해 줄 바꿈이 이루어지지 않았을 때

텍스트가 기준선을 벗어나는 경우가 발생하게 되는데

이 넘치는 텍스트를 어떻게 처리할지 결정해 주는 속성이다.

 

단, text-overflow 속성은 해당 요소에서 overflow 속성 값이 hidden이거나

scroll, auto 이면서 white-space:nowrap 속성을 함께 사용했을 경우에만 적용된다.

 

 

 

 

---

 

 

white-space와 text-overflow가 실생활에 많이 본 것 같지만

꽤 어려운 것 같다.

 

그래도 내가 직접 입력해 효과를 적용해보니

왜 자주 사용하는지 알 것 같다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※