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

 

[HTML+CSS][텍스트 관련 스타일] 01 - 글꼴 관련 스타일

 

폰트를 바꿔보는 시간을 가져보았으니

이제는 텍스트 스타일을 바꿔보는 시간을 가져보도록 하자.

 

 

---

 

 

color 속성 : 글자 색 지정

 

웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는

글자 색을 바꿀 때 사용하는 속성으로

색상 값은 16진수나 rgb, hsl 또는 색상 이름으로 표기할 수 있다.

 

 

 

 

---

 

 

text-decoration 속성 : 텍스트에 줄 표시/없애기

 

 

 

 

---

 

 

text-transform 속성 : 텍스트 대소문자 변환

 

영문자를 표기할 때 텍스트의 대소문자를 원하는 대로 바꿔서 사용한다.

 

 

 

 

---

 

 

text-shadow 속성 : 텍스트에 그림자 효과

 

텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체적으로 보이게 할 수 있으며,

효과를 여러 개 적용해 더욱 또렷하고 멋진 효과를 표현할 수도 있다.

 

 

 

 

---

 

 

white-space : 공백 처리하기

 

 

 

---

 

 

letter-spacing, word-spacing : 텍스트 간격 조절

 

letter-spacing은 낱글자 사이 간격을 조절하고

word-spacing은 단어와 단어 사이의 간격을 조절한다.

 

이때, 자간은 바뀌는 글꼴에 맞추어 간격을 유지해야 하기 때문에

가능하면 em단위로 지정해 주는 것이 좋다.

 

 

 

 

---

 

 

텍스트에 간단한 효과를 넣어주는 것 만으로도

글자가 살아나는 것 같다.

 

미숙하지만 자주 사용해 자연스럽게 표현할 수 있도록 해야겠다.

 

 

---

 

 

< 참고 >

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

 

 

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