CSS 'Text-decoration' 더 멋지게 사용하기 정보
CSS 'Text-decoration' 더 멋지게 사용하기본문
습관적으로 쓰던 기능만 사용하는 버릇이 우리에겐 있습니다.
'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;
}
By 웹학교
3
댓글 4개
좋은팁 감사합니다.
@techstar ^-^ 새로운 한 주 멋지게 보내세요.
감사 합니다.
@들레아빠 늘 번성하세요. ^-^