HTML CSS 제목 밑줄 소스 길게 표시하기
HTML과 CSS를 이용하여 제목이나 특정 태그에 밑줄을 표시하는 코드를 간단히 작성해 보려고 합니다. 대부분 HTML 태그에서 글자의 밑줄을 표시하기 위해서는 CSS 코드의 text-decoration: underline; 을 사용하면 되지만 글자가 표시된 부분만 밑줄이 표시되게 됩니다.
하지만 제가 하고 싶었던 글자의 밑줄 표현은 글자의 수와 상관없이 화면 끝까지 밑줄이 표시되기를 원했습니다.
CSS text-decoration: underline; 을 사용하지 않고 간단히 밑줄을 표시하기 위해서 저는 border-bottom 속성을 이용해서 밑줄을 표시하였습니다.
첫 번째는 HTML의 h 제목 태그에 border-bottom 속성을 사용하여 밑줄을 표시하니 아래 이미지와 같이 화면 전체에 밑줄이 표시되었습니다.
다른 태그에는 어떻게 표시되는지 확인을 해보니 span 태그는 불가능하였고 p 태그, div 태그, h 태그는 화면 전체에 밑줄이 표시되었습니다.
span 태그의 경우는 다른 태그와 합쳐서 사용하는 용도의 태그이다 보니 span 태그의 길이만큼만 밑줄이 표시 되었습니다.
html 태그 중 한 라인을 다 차지하는 박스 형태의 html 태그라면 border-bottom 속성으로 밑줄을 끝까지 표시할 수 있었습니다.
실제 소스는 아래 텍스트를 복사하셔서 가지고 가셔서 테스트하시고 사용하시면 됩니다.
<html>
<head>
<style type="text/css">
.title{border-bottom: solid 1px black;}
.p_title{border-bottom: solid 1px red;}
.div_title{border-bottom: solid 1px blue;}
.span_title{border-bottom: solid 1px green;}
</style>
</head>
<title>제목 밑에 밑줄이 있었으면 좋겠어</title>
<body>
<h3 class="title">제목 아래에 긴밑줄이 있었으면 좋겠어</h3>
<p class="p_title">P 태그도 이게 가능할까?</p>
<div class="div_title">div 태그는?</div>
<span class="span_title">span도 가능?</span>
</body>
</html>
border-bottom 사용 용도는 밑줄을 사용하기 위한 CSS 속성은 아니지만 그래도 간단히 제목이나 특정 태그에 밑줄을 표시하기에는 가장 간단하고 편한 방법 같습니다.
익스플로러와 크롬 엣지 브라우저에서 테스트를 진행해 보았을 때는 밑줄이 문제없이 표시되었습니다.
혹시라도 필요하신 분들이 있다면 참고하시기 바랍니다.
