텍스트를 표현하는 다양한 스타일 4 - 텍스트 관련 스타일 2 : 글자 효과를 주는 다양한 속성

이어서 컬러 속성에 대해서 학습을 진행해본다. 앞서 색을 지정하는 4가지 방식에 대해서 배울 수 있었다. 이 내용은 CSS뿐 아니라 포토샵이나 다른 작업을 할 때도 필요하니 잘 숙지하기로 하자.

---

 

 

 

 

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

 

왼쪽 · 오른쪽 · 양쪽 · 가운데 정렬 등을 사용할 수 있다.

 

 

 

텍스트 정렬하기

 

 

정렬 방법을 지정하지 않을 경우 왼쪽 정렬이 기본이다. 왼쪽 정렬에서는 오른쪽에 여백이 생기지만, 양쪽 정렬에서는 여백이 생기지 않는다는 차이가 있다.

---

 

 

 

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

줄 간격을 원하는 만큼 조절할 수 있다.

 

줄 간격 24px로 지정하기

p { font-size: 12px; line-height: 24px; }
p { font-size: 12px; line-height: 2.0; }
p { font-size: 12px; line-height: 200%; }

 

 

 

 

이 3가지 방식으로 지정할 수 있다.줄 간격은 텍스트를 세로 정렬할 때도 유용하다.

---

 

 

텍스트를 세로로 가운데 정렬하기

정렬이 되어 있지 않은 경우이다.

 

이때 높이와 줄 높이를 100px로 함께 맞추어주고 텍스트로 가운데 정렬을 하니 이렇게 잘 맞춰진 것을 볼 수 있다.

 

---

 

 

 

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

밑줄을 긋거나 취소선을 표시한다. 텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데 이 속성을 사용하면 없앨 수 있다.

 

텍스트에 줄 표시하기

 

밑줄을 표시하고 윗줄, 취소선까지 표현할 수 있다.

---

 

 

 

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

그림자 효과는 본문에서 자주 사용하면 지저분해 보이지만, 사이트 제목처럼 강조해야 할 글자에 사용하면 눈에 띄게 만들 수 있다. 이 속성은 그림자 효과를 추가해 텍스트를 좀더 입체감 나게 보여줄 수 있으며, 다음과 같은 형식으로 사용한다.

 

가로와 세로 거리만 지정하면 나머지 값은 기본값을 사용해 텍스트 그림자를 표시할 수 있다.

 

 

 

텍스트에 그림자 효과 추가하기

 

 

 

여기서 조금 이해가 안 되는 부분이 있다. 두번째 문장에서 그림자를 노란색으로 설정했는데 검은색 글씨는 코드 상으로는 없었다. 아마도 아무것도 지정하지 않으면 기본값으로 검은색이 들어가는 것 같았다.

---

 

 

 

 

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

영문자를 표기할 때 텍스트의 대소문자를 원하는대로 바꿀 수 있다. 이 속성은 텍스트를 대소문자 또는 전각 문자로 변환한다. 한글에는 영향을 미치지 않고 영문자에만 적용된다.

 

 

 

글자 일부 또는 전체를 대소문자로 바꾸기

 

---

 

 

 

 

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

 

letter-spacing 속성은 글자와 글자 사이의 간격을 조절하고, word-spacing 속성은 단어와 단어 사이 간격을 조절한다. CSS에서는 주로 letter-spacing 속성을 사용해 자간을 조절한다.

이 2가지 속성은 px, em과 같은 단위나 %로 크깃값을 조절한다.

 

글자 간격 조절하기

 

 

---

 

 

 

학습을 마치고

드디어 텍스트 스타일 관련 학습을 마쳤다. 이제 텍스트 스타일에도 이처럼 다양한 속성이 있다는 것을 배우는 중이다. 마치 워드 문서를 배우고 있는 느낌이다.