[css] text-decoration: none

text-decoration: none은 CSS 속성으로, 텍스트에 적용된 꾸밈 효과를 제거하는 역할을 합니다. 이 속성을 링크(또는 다른 텍스트 요소)에 적용하면, 기본적으로 텍스트에 표시되는 밑줄이나 다른 장식이 제거됩니다.

---

상세 설명

1. 기본 동작:
   • HTML에서 <a> 태그(링크)는 기본적으로 **밑줄(underline)**이 표시됩니다.
   • 이 밑줄은 브라우저의 기본 스타일로 적용된 text-decoration: underline 때문입니다.
2. text-decoration: none의 효과
   • 이 속성을 사용하면 링크에서 밑줄이 제거됩니다.
   • 결과적으로, 텍스트는 링크로 작동하지만, 시각적으로는 일반 텍스트처럼 보이게 됩니다.

---

예제

기본 링크

<a href="https://example.com">링크</a>

• 기본 스타일: 밑줄(underline)이 표시됨.

text-decoration: none 적용

<a href="https://example.com" style="text-decoration: none;">링크</a>

 

• 밑줄이 사라지고 일반 텍스트처럼 표시됩니다.

---

기타 옵션

text-decoration에는 다양한 옵션이 있습니다:

• underline: 밑줄 표시
• overline: 텍스트 위에 선 표시
• line-through: 텍스트 중앙에 선 표시(취소선)
• none: 모든 텍스트 장식 제거

---

활용 사례

• 링크에서 밑줄을 제거하여 디자인을 깔끔하게 만들고 싶을 때 사용합니다.
• 대신, 밑줄이 사라져도 링크임을 사용자에게 명확히 하기 위해, hover 상태에서 색상 변경 등 추가 스타일을 적용하는 것이 좋습니다.

a {   text-decoration: none;   color: blue; } a:hover {   color: red; }

 

이처럼 text-decoration: none은 주로 디자인 목적으로 사용됩니다.