습관적으로 쓰던 기능만 사용하는 버릇이 우리에겐 있습니다.

'text-decoration'

가장 많이 사용하는 css 속성일텐데...

아마도 'none'을 지정하지 않을까 싶네요.

link의 밑줄을 제거하는 용으로 말이죠.

그런데 꼭 필요할 수도 있는 이 속성의 중요 기능은 놓치고 있지 않나요?

모 학습지 광고의 빨간펜 밑줄 '쫙!!!!' 기능 같은 것이 있습니다.

사용 예1 :

html : 

<a href="https://365ok.co.kr" class="t-deco">웹학교</a>

css :

.t-deco{
  text-decoration:underline 2px solid red;
}

이렇게 하면 텍스트 아래에 빨간 줄이 그려집니다. (첫번째 선의 너비값, 두번째 선의 유형값, 세번째 선의 색상값)

조금 더 응용하면,

사용 예2 :

html : 

<a href="https://365ok.co.kr" class="t-deco">웹학교</a>

css :

.t-deco{
  text-decoration:none;
}

.t-deco:hover{
  text-decoration:underline 2px solid red;
}

결과는 텍스트 기본 형태는 밑줄을 제거하고, 마우스를 올리면 빨간 밑줄이 쫙!!!

여기에 더하여 텍스트와 밑줄 사이의 간격을 지정해 주는 속성을 더해줄 수 있습니다.

'text-underline-offset'

css : 

.t-deco:hover{
  text-decoration:underline 2px solid red;
  text-underline-offset: 6px;
}

웹학교 무료강좌 / 웹학교 컨텐츠몰 / PHP포탈

By 웹학교