CSS에서 텍스트를 장식하려면 text-decoration 속성을 사용합니다. 이 속성은 텍스트에 밑줄, 윗줄, 취소선 등 다양한 선 효과를 추가할 수 있게 해주며, 웹 페이지의 가독성과 디자인을 향상시키는 데 유용하게 활용됩니다.
text-decoration 속성의 주요 값
- none — 장식 효과를 제거합니다(링크의 기본 밑줄 제거 등에 사용).
- underline — 텍스트 아래에 밑줄을 그립니다.
- overline — 텍스트 위에 선을 그립니다.
- line-through — 텍스트 중앙에 취소선을 그립니다.
- blink — 텍스트가 깜빡이는 효과를 줍니다.
텍스트 장식 예제
다음 예제는 각 값을 인라인 스타일로 적용하여 텍스트를 장식하는 방법을 보여줍니다.
<html> <head> </head> <body> <p style = "text-decoration:underline;"> 이 텍스트에는 밑줄이 그려집니다. </p> <p style = "text-decoration:line-through;"> 이 텍스트에는 취소선이 그려집니다. </p> <p style = "text-decoration:overline;"> 이 텍스트 위에는 윗줄이 그려집니다. </p> <p style = "text-decoration:blink;"> 이 텍스트는 깜빡이는 효과가 적용됩니다. </p> </body> </html>
참고 사항
blink 값은 과거에 깜빡임 효과를 위해 사용되었지만, 접근성 문제와 브라우저 호환성 문제로 현재 대부분의 최신 브라우저에서 지원되지 않으므로 사용하지 않는 것이 좋습니다. 또한 여러 개의 값을 함께 조합하여 사용할 수도 있습니다. 예를 들어 text-decoration: underline overline;처럼 작성하면 밑줄과 윗줄이 동시에 적용됩니다.