07-3 텍스트 관련 스타일

앞에서 글꼴과 관련된 스타일을 배웠으니 이번에는 텍스트와 관련된 스타일을 알아보겠음.

글꼴과 텍스트 스타일은 비슷해 보이는데 다름.

글꼴이 폰트와 관련된 내용이었다면 텍스트 스타일은 글자와 단어, 그리고 글자로 이루어진 문단에서 사용하는 스타일임.

 

>>>글자색을 지정하는 color 속성

[기본형] color: <색상>

 

>> CSS에서는 색상을 지정할 때 주로 rgb와 rgba로 표현함. rgb는 red, green, blue의 줄임말

하나도 안섞였을 때는 0으로 표시하고 가득 섞였을 때는 255로 표시

rgba는 불투명도를 지정한다 0~1사이 지정가능.

 

>>> 텍스트를 정렬하는 text-align 속성

text-align 속성은 문단의 텍스트 정렬 방법을 지정함.

[기본형] text-align: start | end | left | right | center | justify | match-parent

정렬 방법을 지정하지 않으면 왼쪽 정렬이 기본

 

>>> 줄 간격을 조절하는 line-height 속성

한 문단이 두 줄을 넘으면 줄 간격이 생김. line-height속성을 이용하면 줄 간격을 원하는 만큼 조절가능

텍스트 세로로 정렬할 때는 line-height의 속성값을 height 속성값과 똑같이 추가.

 

>>> 텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

text-decoration 속성은 텍스트에 밑줄을 긋거나 취소선을 표시함. 그리고 텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데 text-decoration 속성을 사용하면 없앨 수 있음.

 

>>> 텍스트에 그림자 효과를 추가하는 text-shadow 속성

CSS를 사용하여 텍스트에 그림자 효과도 줄 수 있음.

[기본형] text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

 

>>>텍스트의 대소 문자를 변환하는 text-transform 속성

이 속성은 한글에는 영향을 미치지 않고 영문자에만 적용됨

 

>>> 글자 간격을 조절하는 letter-spacing, word-spacing 속성

letter-spacing : 글자와 글자 사이의 간격을 조절

word-spacing : 단어와 단어 사이의 간격을 조