CSS - 텍스트 정렬, 간격 조절

Text-align (텍스트 정렬)

---

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

• start : 시작 위치에 정렬
• end : 끝 위치에 정렬
• left (기본값) : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 가운데 정렬
• justify : 양쪽 정렬
• match-parent : 부모 요소를 따라 정렬

 

 

line-height (줄 간격 조절)

---

line-height: px | float | %

• px : 픽셀크기로 설정
• float : 글자 크기가 px인 문단의 줄 간격을 float(0.5, 1.0, 2.0, 3.5..)배로 설정
• 백분율(%) : 글자 크기(px) 의 백분율(50, 100, 200, 350)%배로 설정

텍스트를 세로 정렬하려면 height값과 line-height 값을 동일하게 맞춰주면 된다.

 

text-decoration (텍스트 밑줄, 윗줄, 취소선 표시)

---

text-decoration : none | underline | overline | line-through

• none : 텍스트에 줄 표시 x
• underline : 밑줄 표시
• overline : 윗줄 표시
• line-through : 취소선 표시

 

text-shadow (텍스트 그림자 효과)

---

text-shadow : none | 가로거리 세로거리 번짐정도 색상

• none : 텍스트에 그림자 효과 x
• 가로거리 : 텍스트에서 그림자까지의 가로 거리 (+면 오른쪽, -는 왼쪽에 그림자 효과)
• 세로거리 : 텍스트에서 그림자까지의 세로 거리 (+면 아래쪽, -는 위쪽에 그림자 효과)
• 번짐정도 : 그림자가 번지는 정도 (+면 모든방향으로 확대, -면 모든방향으로 축소, 기본값은 0)
• 색상 : 그림자의 색상 (단일로도 가능하고, 콤마를 구분하여 여러 색상지정 가능, 기본값은 글자색)

 

text-transform (텍스트 대소문자 변환)

---

text-transform : none | capitalize | uppercase | lowercase | full-width

• none : 줄을 표시하지 않음
• capitalize : 첫 글자를 대문자로
• uppercase : 모두 대문자로
• lowercase : 모두 소문자로
• full-width : 모두 전각문자로 (가로,세로 비율이 동일한 글자)

 

letter-spacing, word-spacing (글자 간격 조절)

---

letter-spacing : px, em, %
word-spacing : px, em, %

• letter-spacing : 글자 사이 간격을 단위(px, em)나 퍼센트(%)만큼 띄움
• word-spacing : 단어 사이 간격을 단위(px, em)나 퍼센트(%)만큼 띄움