텍스트 관련 CSS

이번 포스팅에서는 글자 색상을 변경하거나 그림자 효과, 여백, 자간 등을 조정하는 css 속성에 대해 정리해 보려고 한다.

---

색상 지정하기

h1 {color: blue;} /* 색상 이름 사용 가능 */
h2 {color: rgb(0,180,0);} /* rgb값 사용 가능*/
p {color: #4e4e4e;} /* 16진수 사용 가능 */

 

 텍스트에 선 긋기

p {text-decoration: none;}
/* 밑줄 없음 */

p {text-decoration: underline;}
/* 밑줄 표시 */

p {text-decoration: overline;}
/* 영역 위에 선 있음 */

p {text-decoration: line-through;}
/* 취소선 있음 */

text-decoration:none; 속성값의 경우 링크에서 생기는 밑줄을 없애는 데에 쓰인다.

 

대/소문자 변환하기

p {text-transform: none;}
/* 변환 안함 (그대로 유지) */

p {text-transform: capitalize;}
/* 첫번째 글자를 모두 대문자로 */

p {text-transform: uppercase;}
/* 모든 글자를 대문자로 */

p {text-transform: lowercase;}
/* 모든 글자를 소문자로 */

p {text-transform: full-width;}
/* 가능한 모든 문자를 전각 문자로 */

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

 

텍스트에 그림자 효과 주기

text-shadow: none; 속성값은 그림자 효과가 없음을 나타낸다. text-shadow: 가로거리 세로거리 번짐정도 색상; 을 순서대로 기입하여 그림자 효과를 나타낼 수 있으며, 쉼표(,)로 구분하여 그림자를 중첩하여 사용할 수도 있다. 그런 경우에 맨 먼저 지정한 그림자 값이 텍스트 가장 가까이에 표시된다.

아래 예제를 확인해 보자.

.shadow {text-shadow: 2px 2px;}
.shadow {text-shadow: 2px 2px 3px #eee;}
.shadow {text-shadow: 5px -5px 8px #eee;}
/* 텍스트 그림자 한개 사용 */

.shadow {text-shadow: 0 0 3px yellow, 0 -3px 3px #eee, 3px -6px 6px #666;}
/* 텍스트 그림자 중첩으로 여러개 사용 */

 

공백 처리하기

공백을 처리하는 css 속성은 white-space 인데 속성값으로는 아래 다섯가지를 사용할 수 있다.

- normal : 여러개의 공백을 하나로 표시

- nowrap : 여러개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄바꿈 하지 않음(계속 한 줄로 표시)

- pre : 여러개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄바꿈 하지 않음(계속 한 줄로 표시)

- pre-line : 여러개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시

- pre-wrap : 여러개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시

설명을 들어도 약간 혼란스러운데, 실제 예제로 확인할 수 있는 웹페이지가 있어 아래 링크를 공유한다.

developer.mozilla.org/ko/docs/Web/CSS/white-space 

white-space

 

자간 조절하기

p {letter-spacing: 크기;}
/* 글자와 글자 사이를 조절 */

p {word-spacing: 크기;}
/* 단어와 단어 사이 간격을 조절 */

주로 letter-spacing 이 많이 사용되며 바뀌는 글꼴에 맞추어 자간을 유지해야 하므로 em 단위를 지정해주는 것이 좋다. 

ex) p {letter-spacing: 0.2em;}