웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

[CSS 트릭] 텍스트 밑 줄을 커스텀 스타일의 언더라인 만드는 방법

Last Modified : 2023-11-27 / Created : 2023-11-21
236
View Count
안녕하세요 ~ 웹이즈프리입니다. 웹페이지를 만들 때 텍스트에 밑 줄을 추가하여 강조 등의 목적으로 사용할 수 있습니다. 이 때 css의 text-decoration을 사용할 경우 쉽고 간단한 밑 줄 추가가 가능하죠. 하지만! 기능적으로는 충족하지만 심미적으로 이쁜 스타일의 목적은 함께 달성하기 어렵습니다. 하지만 두 가지 목적을 모두 달성할 수 있는 방법을 아래에서 알아봅니다.




커스텀 밑 줄 만드는 방법, text underline


먼저 아래와 같은 텍스트가 존재합니다. 이제 웹이즈프리만 밑 줄을 추가하기 위해서 text--underline 이름의 클래스를 함께 추가하였습니다.
<p>
  <span class="text text--decoration">웹이즈프리</span>에 오신 걸 환영합니다.
</p>

가장 간단한 방법의 커스텀 밑 줄을 만들어보겠습니다. 이 때 색은 노란색으로 높이값은 3px의 크기를 가지도록 만들 예정입니다. 코드를 작성하면 아래와 같이 완성됩니다.
.text.text--decoration {
  position: relative;
  z-index: 0;
}
.text.text--decoration::before {
  content: '';
  position: absolute;
  z-index: -1;
  display: inline-block;
  width: 100%;
  height: 100%;
  border-bottom: 3px solid yellow;
  left: 0;
  bottom: 0;
}

위 코드에서 특별히 어려운 부분은 없습니다. 해당 엘리먼트에 가상 선택자를 사용하고 여기에 border를 사용하여 밑 줄과 동일한 효과를 주었습니다. 다만 z-index 값이 각각 다르게 사용된 것을 보실 수 있는데 이 것은 border의 z-index 값이 더 높게되면 텍스트가 일부 가려져 나타나지 않기 때문입니다.

이제 위 코드를 실행하면? 아래와 같이 나타나게 됩니다.

<div class="test test1">
<p><span class="text text--decoration">웹이즈프리</span>에 오신 걸 환영합니다.</p>
</div>
<style>
.test.test1 .text.text--decoration {
position: relative;
z-index: 0;
}
.test.test1 .text.text--decoration::before {
content: '';
position: absolute;
z-index: -1;
display: inline-block;
width: 100%;
height: 100%;
border-bottom: 3px solid yellow;
left: 0;
bottom: 0;
}
</style>

보시는 것처럼 일반적인 텍스트 밑 줄 효과보다 횔씬 이쁘고 두꺼운 언더라인, 밑 줄이 추가된 것을 보실 수 있습니다. 일반 텍스트 밑 줄 효과와는 차이가 크다 할 수 있습니다.

참고로 일반적인 underline 역시 스타일을 변경하면 제한적인 스타일 구현이 가능합니다. 다만 간단한 애니메이션 등을 만들 경우거나 아래와 같이 여러 줄을 구현하는데에는 커스텀하게 만든 언더라인이 강점이 있겠습니다.



텍스트 밑 줄 애니메이션 효과, hover


만약 특정 텍스트 위에 마우스를 올려야 만 밑 줄이 나타나는 애니메이션을 구현하려고 합니다. 이 경우 아래와 같이 코드를 작성하면 구현 가능합니다. html은 위와 동일하고 css만 조금 변경해보도록 하겠습니다.
.text.text--decoration {
  position: relative;
  z-index: 0;
}
.text.text--decoration::before {
  content: '';
  position: absolute;
  z-index: -1;
  display: inline-block;
  width: 0;
  height: 100%;
  border-bottom: 3px solid yellow;
  left: 0;
  bottom: 0;
  transition: width 1s;
}

.text.text--decoration:hover::before {
  width: 100%;
}

코드가 완성되었습니다. 보시면 처음 예제와 달라진 부분을 확인할 수 있습니다. 즉 width값이 평소에는 0이었다가 마우스가 올라간 hover 상태에서는 100%가 되어 나타나게 되죠. 아래는 이를 직접 구현한 부분입니다. 마우스를 올려서 달라진 부분을 확인해보세요.

@ 마우스 Hover 효과가 추가된 텍스트
<p>
<span class="text4 text--decoration">웹이즈프리</span>에 오신 걸 환영합니다.
</p>
<style>
.text4.text--decoration {
position: relative;
z-index: 0;
}
.text4.text--decoration::before {
content: '';
position: absolute;
z-index: -1;
display: inline-block;
width: 0;
height: 100%;
border-bottom: 3px solid yellow;
left: 0;
bottom: 0;
transition: width 1s;
}
.text4.text--decoration:hover::before {
width: 100%;
}
</style>

다음으로 여러 줄에 언더 라인을 추가하는 방법을 알아보겠습니다.


멀티 라인에서 밑 줄 사용하는 방법


위의 방법은 해당 엘리먼트가 단 한 줄인 경우에만 적용 가능하다는 단점이 있습니다. 하지만 만약 여러 줄인 경우에 텍스트 언더라인을 추가하려고 합니다. 이 경우에도 가능할까요? 약간의 트릭을 사용하면 이 것 역시 가능합니다. 이를 구현하는 방법은 바로 백그라운드 그라디언트 효과를 사용하는 방법입니다.


백그라운드 그라디언트를 적용하여 멀티 라인 밑 줄 효과 구현이 가능

즉 배경효과를 y축으로 반복 적용하면 여러 줄의 밑 줄을 적용한 것과 동일한 결과를 가져올 수 있는 것입니다. 먼저 html는 다음과 같습니다.
<div class="test test2">
  <p>
    <span class="text text--decoration">웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다.</span>
  </p>
</div>

다음으로 css 코드입니다.
.test.test2 {
  max-width: 400px;
}
.test.test2 .text.text--decoration {
  background-image: linear-gradient(transparent 60%, yellow 0);
  background-size: 100%;
}

위의 css 코드를 살펴보면 linear-gradient를 사용하여 그라데이션 효과를 추가하였습니다. 이 때 transparent는 위 영역의 크기로 60%로 설정합니다. 그렇게되면 아래는 40%의 노란색 영역이 바로 밑 줄 영역이 됩니다.

그럼 아래에서 어떻게 구현했는지 확인해봅니다. 각각 최대 길이 400px, 200px, 100px인 경우의 예제입니다.

<div class="test test2">
<p><span class="text text--decoration">웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다.</span></p>
</div>
<br>
<div class="test test3">
<p><span class="text text--decoration">웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다.</span></p>
</div>
<br>
<div class="test test4">
<p><span class="text text--decoration">웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다. 웹이즈프리에 오신 걸 환영합니다.</span></p>
</div>
<style>
.test.test2 {
max-width: 400px;
}
.test.test3 {
max-width: 200px;
}
.test.test4 {
max-width: 100px;
}
.test2 .text.text--decoration,
.test3 .text.text--decoration,
.test4 .text.text--decoration {
background-image: linear-gradient(transparent 60%, yellow 0);
background-size: 100%;
}
</style>


위 코드의 실행 결과입니다. 보시는 것처럼 각각 400px, 200px, 100px인 경우의 여러 줄에 적용된 밑 줄 언더라인 효과를 보실 수 있습니다. 이와 같은 방법으로 한 줄이 아닌  여러 줄에 커스텀 언더라인 스타일 적용이 가능합니다.

여기까지 커스텀하게 만든 밑 줄 효과 방법에 대하여 알아보았습니다.

Previous

[CSS] 폰트 크기의 최대값을 설정하는 방법은 없을까? 없다면 대체 방법은?