○ text-decoration : 텍스트의 줄 표시 / 없애기
text-decoration 속성을 이용해서 흔히 사용하는 텍스트의 밑줄 또는 취소선을 작성할 수 있게 됩니다. 그리고 의외로 많은 분들이 궁금해하는! 텍스트에 하이퍼링크 적용 시 나타나는 밑줄을 없애는 것도 이 속성을 이용해서 실행할 수 있습니다.
text-decoration 속성 값에는 다음과 같은 종류가 있습니다.
· none : 텍스트에 줄 표시하지 않음
· underline : 밑줄 표시
· overline : 윗줄 표시
· line-through : 취소선 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<p style="text-decoration: none;">none 속성입니다.</p>
<p style="text-decoration: underline;">under line 속성입니다.</p>
<p style="text-decoration: overline;">over line 속성입니다.</p>
<p style="text-decoration: line-through;">line through 속성입니다.</p>
</body>
</html>
○ text-shadow : 텍스트에 그림자 효과 주기
워드나 파워 포인트에서 텍스트에 주던 그림자 효과를 기억하실 것입니다. 사실, 심미적인 관점에서 최근에 많이 사용하게 되는 기능은 아닙니다. 그래도 간혹 사용이 필요한 기능이기 때문에 디테일한 속성 값 부여에 대한 연습 차원에서 확인해 보도록 하겠습니다.
기본적으로 텍스트에 그림자 효과를 주기 위해서는 가로 거리, 세로 거리, 번짐 정도, 색상 값을 지정하게 됩니다. 예를 들면 다음과 같은 형태가 됩니다.
.shadow {
text-shadow: 1px 1px 3px #ffa500;
}
· 가로 거리 : 텍스트부터 그림자까지의 가로 거리입니다. 양수 입력 시 글자의 오른쪽으로, 음수 입력 시 글자의 왼쪽으로 생성됩니다. 필수 입력 값입니다.
· 세로 거리 : 텍스트부터 그림자까지의 세로 거리입니다. 양수 입력 시 글자의 아래쪽으로, 음수 입력 시 글자의 위쪽으로 생성됩니다. 필수 입력 값입니다.
· 번짐 : 그림자가 번지는 정도이며, 양수를 입력하면 그림자가 모든 방향으로 번지게 됩니다. 음수를 넣으면 그림자가 모든 방향으로 축소되는데, 실제 기본 값은 0입니다.
· 색상 : 그림자의 색상을 지정합니다. 기본 값은 현재의 글자색이며, 공백으로 구분해 여러가지 생상 입력이 가능합니다.
○ text-transform : 텍스트 대소문자 변환
영문자를 기준으로, 대소문자의 입력 값을 일괄적으로 변형할 수 있습니다. 당연히 한글에는 영향을 주지 않습니다. text-transform 속성에 다음 값을 지정하여 변경이 가능합니다. 예를 들어서 특정 입력 란에 유저가 대문자를 쓰더라도, 반드시 소문자만 입력을 받아야 하는 (ID나 닉네임 등) 경우에 적용하면 유용하겠죠?
· capitalize : 첫 번째 글자 대문자 변환
· uppercase : 모든 글자 대문자 변환
· lowercase : 모든 글자 소문자 변환
· full-width : 가능한 모든 문자를 전각 문자로 변환
* 전각 문자 - 가로와 세로의 길이 비율이 같은 글자이며 반각 문자는 가로와 세로 길이 비율이 1:2인 글자를 의미함
.trans {
text-transform: capitalize;
}
○ letter-spacing, word-spacing : 글자 간격 조정(자간)
우리가 워드 등에서 흔히 사용하게 되는 '자간 조정' 기능을 생각하시면 됩니다. letter-spacing은 글자 별 간격을 조정하고 word-spacing은 단어 별 간격을 조정하게 됩니다. 실제로는 letter-spacing을 중심으로 자간을 설정하게 됩니다.
간격 값을 입력할 때는 px, em, %단위를 사용하게 됩니다. em은 한 번 다루었었는데 해당 폰트의 대문자 M 너비를 기준으로 조정하게 됩니다.
.spacing {
letter-spacing: 0.5em;
}
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 2. 텍스트 스타일(6) - 표 스타일 (0) | 2023.04.02 |
|---|---|
| [CSS] 2. 텍스트 스타일(5) - 목록 스타일 (0) | 2023.04.01 |
| [CSS] 2. 텍스트 스타일(4) - 텍스트 정렬 1 (0) | 2023.03.29 |
| [CSS] 2. 텍스트 스타일(3) - 텍스트 컬러 (0) | 2023.03.27 |
| [CSS] 2. 텍스트 스타일(2) - 웹(외부) 폰트 사용하기 (0) | 2023.03.26 |
