CSS 텍스트 스타일링 밑줄, 취소선, 그림자 효과, 대소문자 변환, 글자 간격 조절 속성 정리
텍스트 밑줄 및 취소선 적용 text-decoration 속성
텍스트에 밑줄 및 취소선 등을 표시할 때 사용하는 CSS 속성은 text-decoration입니다.
취소선을 사용할 때 주의해야 할 사항은 text-decoration 속성으로 지정한 취소선은 사용자에게 보여주는 효과 외에는 아무런 효과도 없습니다.
만일 웹 크롤러 및 브라우저에서 해당 문자는 삭제 및 취소된 의미를 전달하려면 해당 텍스트에 del 태그를 감싸줘서 표현해 줘야 합니다.
text-decoration의 속성과 del 태그와 비교
<p style="text-decoration:none">텍스트 줄 아무 효과 없음.</p>
<p style="text-decoration:underline">텍스트 밑줄 표시</p>
<p style="text-decoration:overline">텍스트 윗줄 표시</p>
<p style="text-decoration:line-through">단순 텍스트 취소선 표시</p>
<del>웹크롤러 및 브라우저에 해당 텍스트 삭제 의미 전달은 del 태그 사용</del>
 |
| text-decoration속성의 취소선은 단순 취소선이고, del 태그를 사용하면 웹크롤러 및 브라우저에 취소 및 삭제의 의미를 전달할 수 있습니다. |
텍스트 그림자 효과 적용 text-shadow 속성
텍스트를 강조하기 위해 여러 가지 효과들을 적용하곤 하는데 그중에서 텍스트에 그림자 효과를 지정하기 위해서는 text-shadow 속성을 사용하면 텍스트가 강조되어 보다 눈에 띄게 만들 수 있습니다.
text-shadow 기본형 및 속성값
text-shadow : <가로 길이> <세로 길이> <번짐 강도> <색상>
|
구성 요소 |
설명 |
|
<가로 길이> |
그림자까지의 세로 거리로 필수 속성. 양수값은 오른쪽, 음수값은 왼쪽에 그림자를 만듬
|
|
<세로 길이> |
그림자까지의 세로 거리로 필수 속성. 양수값은 아래쪽, 음수값은 위쪽
|
|
<번짐 강도> |
양수값을 사용하면 그림자가 모든 방향으로 퍼져 나가므로 그림자가 크게 표시, 반대로 음수값은 모든 방향으로 축소되어 보임. 기본값은 0
|
|
<색상> |
그림자 색상을 지정, 한가지만 지정할 수도 있고 공백으로
구분해 여러 색상을 지정할수도 있음.
|
text-shadow 예제
<style>
#front {
color : #32877b;
text-shadow : 1px 1px black;
}
#back {
text-shadow : 7px 7px 3px black;
color : #3aa78e;
}
#full {
color : white;
text-shadow: 8px -8px 25px black;
}
</style>
</head>
<body>
<!-- 본문 내용 -->
<h2 id="front">프론트 엔드</h2>
<h2 id="back">백 엔드</h2>
<h2 id="full">풀스택</h2>
</body>
 |
| CSS의 text-shadow 속성을 사용하면 글자에 여러 형태의 그림자 효과를 줄 수 있습니다. |
영문 대,소문자 변환 text-transform 속성
영문자의 소문자를 대문자로 대문자를 소문자로 변환할 때, text-transform 속성을 사용하면 됩니다. text-transform에서 사용할 수 있는 속성값 리스트는 아래와 같습니다.
|
속성값 |
설명 |
|
capitalize |
첫 번째 문자를 대문자로 변환 |
|
uppercase |
모든 문자를 대문자로 변환 |
|
lowercase |
모든 문자를 소문자로 변환 |
|
full-width |
전각 문자로 변환 |
글자 사이 간격을 조절하는 letter-spacing과 word-spacing 속성
CSS의 letter-spacing은 한 글자 한 글자 사이의 간격을 조절하고 word-spacing은 단어와 단어 사이의 간격을 조절할 때 사용합니다.