[HTML/CSS] 텍스트 밑줄 간격 늘리기

 

지난번에는

css의 text-decoration 속성을 설정하여

문자열에 밑줄을 그리고, 색깔, 위치, 굵기, 모양 등을 정의하는 방법을 알아보았습니다.

[HTML/CSS] 글자 밑줄 긋기 (위치, 두께, 색깔, 모양 지정하기) text-decoration

[HTML/CSS] 글자 밑줄 긋기 (위치, 두께, 색깔, 모양 지정하기) text-decoration

 

이번에는,

텍스트와 밑줄 사이의 간격을 조정하는 방법을 정리해 보겠습니다.

 

여러가지 방법이 있지만,

여기서는 그 중 3가지 방법을 정리해 보았습니다.

• text-underline-position (text-decoration)
• text-underline-offset (text-decoration)
• padding-bottom (border-bottom)

 

 

text-underline-position (text-decoration)

첫번째 방법은 text-underline-position 속성을 'under'로 지정하는 것입니다.

 

<p class='my-underline'>
  underline
</p>
<p class='my-underline-position'>
  underline with 'text-underline-position'
</p>

.my-underline {
  text-decoration : underline;
}
.my-underline-position {
  text-decoration : underline;
  text-underline-position : under;
}

 

text-underline-position : under;

text-underline-position은 밑줄의 위치를 지정할 수 있는 속성입니다.

text-underline-position 속성의 값을 under로 설정하면

알파벳과 밑줄이 겹치지 않도록 할 수 있습니다.

 

다만, 이 속성값은

Internet Explorer, Firefox for Android, Safari on iOS에서 동작하지 않습니다.

 

 

 

text-underline-offset (text-decoration)

두번째 방법은 text-underline-offset 속성을 사용하는 것입니다.

이 속성을 사용하면, 밑줄의 위치를 지정 할 수 있습니다.

 

<p class='my-underline'>
  underline
</p>
<p class='my-underline-offset-1'>
  underline with 'text-underline-offset' 1px
</p>
<p class='my-underline-offset-5'>
  underline with 'text-underline-offset' 5px
</p>

.my-underline {
  text-decoration : underline;
}
.my-underline-offset-1 {
  text-decoration : underline;
  text-underline-offset : 1px;
}
.my-underline-offset-5 {
  text-decoration : underline;
  text-underline-offset : 5px;
}

 

text-underline-offset : 1px;

text-underline-offset : 5px;

text-underline-offset 속성에 문자와 밑줄 사이의 간격을 지정할 수 있습니다.

 

단, 이 속성은

Internet Explorer, Firefox for Android, Opera Android 에서 지원되지 않습니다.

 

 

 

padding-bottom (border-bottom)

위에서 소개한 text-underline-position, text-underline-offset을 사용하는 방법은 편리하지만,

일부 브라우저에서 완벽하게 지원하지 않는 단점이 있습니다.

따라서, 모든 브라우저에서 정확하게 동작하게 하기 위해서는

text-decoration을 사용하여 밑줄을 표현하는 대신

border를 사용하는 트릭을 이용해서, 밑줄을 표현해야 합니다.

 

<p>
<span class='my-border-bottom'>
  underline (border-bottom)
</span>
</p>
<p>
<span class='my-border-padding-1'>
  underline (border-padding)
</span>
</p>
<p>
<span class='my-border-padding-10'>
  underline (border-padding)
</span>
</p>

.my-border-bottom {
  border-bottom: 1px solid;
}
.my-border-padding-1 {
  border-bottom: 1px solid;
  padding-bottom: 1px;
}
.my-border-padding-10 {
  border-bottom: 1px dashed red;
  padding-bottom: 10px;
}

 

border-bottom: 1px solid;

먼저, 밑줄을 표현하기 위해서

text-decoration 속성이 아닌 border-bottom 속성을 지정하였습니다.

즉, 여기서는 span 객체의 아래쪽 경계선을 1px 굵기로, 선을 하나 그어준 것입니다.

 

border-bottom: 1px dashed red;

border-bottom 속성을 조정하여

밑줄의 모양과 굵기, 모양, 색깔을 조정할 수 있습니다.

 

padding-bottom: 1px;

padding-bottom: 10px;

border-bottom 속성과 함께 padding-bottom 값을 지정하여

텍스트와 border 사이의 간격, 즉, 텍스트와 밑줄 사이의 간격을 지정할 수 있습니다.

 

 

---

 

지금까지,

텍스트 밑줄의 간격을 조정하는 방법을 알아보았습니다.