CSS 밑줄(underline) 관련 메모

먼저 글 하나 링크. 잘 된 설명과 예제다.

Styling Underlines on the Web BY JOHN D. JAMESON ON OCTOBER 10, 2016

기본은 이 사이트 https://www.w3schools.com/css/css_link.asp

CSS는 영문에 어울리게 되어 있기 때문에
텍스트 아래에 밑줄이 나올 때, 한글은 밑줄이 붙어버린다.
그래서 밑줄을 좀 띄어 주면 보기가 좋아진다. 

그리고 밑줄이 붙었을 때만 띄우면 레이아웃이 깨지니까, 텍스트 전체적으로 다 밑줄을 조금 띄워 디자인 통일성을 유지하도록 CSS를 조정해주어야 한다.

예를 들어 이런 식이다.

.article u {border-bottom: 1px solid; padding-bottom: 2px; text-decoration:none;}

.article a:link          { color: blue; text-decoration:none; border-bottom:1px dashed blue; padding-bottom:2px; }

.article a:visited       { color: violet; text-decoration:none; border-bottom:1px dashed violet; padding-bottom:2px; }

.article a:hover         { color: red; text-decoration:none; border-bottom:1px dashed red; padding-bottom:2px; font-weight: bolder;}

.article a:active        { color: blue; text-decoration:none; border-bottom:1px dashed blue; padding-bottom:2px; }