글자 점선 밑줄 | 점 사이 간격과 높이를 자유자재로 한다

html의 글자 밑줄(underline) 태그는 다양한 속성이 있지만 아쉽게도 여백 속성이 없어 단어의 가독성이 떨어진다. 따라서 문단의 제목 등에서 여백 설정이 가능한 밑줄을 나타내기 위해서는 ‘보드(border)’ 속성이나 ‘백그라운드 이미지(background-image)’ 속성을 이용하면 된다. 점선 밑줄과 점 사이의 간격과 크기의 조절이 자유로운 ‘백그라운드 이미지(background-image)’ 속성을 알아본다.

밑줄 만들기1

아래처럼 CSS를 만들고 글자 태그에 적용하면 화면 전체에 밑줄이 표시된다.

<style>
#uline{
   display:inline;
   margin: 20px 0 20px 0;
   background-image: linear-gradient(to right, blue 50%, rgba(51,153,0,0) 0%);
   background-position:bottom;
   background-size: 10px 2px;
   background-repeat: repeat-x;
   padding-bottom: 5px;
   width:100%;
}
</style>

밑줄 만들기2

아래처럼 CSS를 만들고 글자 태그에 적용하면 화면 전체에 밑줄이 표시된다.

<style>
#uline{
   margin: 20px 0 20px 0;
   background-image: linear-gradient(to right, yellow 50%, rgba(51,153,0,0) 0%);
   background-position:bottom;
   background-size: 10px 2px;
   background-repeat: repeat-x;
   padding-bottom: 5px;
   width:100%;
}
</style>

분리선 만들기

아래처럼 CSS를 만들고 글자 태그에 적용하면 화면 전체에 밑줄이 표시된다.

<div id="guline"class="separator" style="clear: both;"></div>

의 관련글