CSS로 텍스트에 밑줄 긋기
CSS에서 텍스트에 밑줄을 추가하려면 text-decoration 속성을 사용합니다. 이 속성의 값을 underline으로 설정하면 해당 텍스트 아래에 밑줄이 표시됩니다.
아래 예제 코드를 실행하면 인라인 스타일을 통해 텍스트에 밑줄이 적용되는 결과를 바로 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "text-decoration:underline;"> India </p> </body> </html>
text-decoration 속성의 다양한 값
text-decoration 속성은 밑줄뿐만 아니라 다양한 장식 선을 지정할 수 있습니다.
- underline – 텍스트 아래에 밑줄을 그립니다.
- overline – 텍스트 위에 선을 그립니다.
- line-through – 텍스트 중앙에 취소선을 그립니다.
- none – 장식 선을 제거합니다. 링크(<a>) 태그의 기본 밑줄을 없애고 싶을 때 자주 사용됩니다.
이처럼 text-decoration 속성 하나만으로도 텍스트 스타일을 손쉽게 꾸밀 수 있으며, 필요에 따라 여러 값을 조합해 활용할 수도 있습니다.