위와 같은 언더라인을 CSS의 linear-gradient를 사용해서 적용시킨다.
developer.mozilla.org/ko/docs/Web/CSS/linear-gradient()
linear-gradient - CSS: Cascading Style Sheets | MDN
CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는
의 특별한 종류인 자료형입니다.
developer.mozilla.org
CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 <image>의 특별한 종류인 <gradient> 자료형입니다.
strong이라는 태그에서 linear-gradient를 이용해 위 아래로 색갈을 점진적으로 변화시키는 css 속성을 이용해서 적용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
width : 200px;
font-size: 20px;
line-height: 28px;
margin-top: 8px;
margin: 0 auto;
}
strong {
color: blue;
background: linear-gradient(rgba(255, 255, 255, 0) 0 20px, rgba(179, 62, 41, 0.12) 20px 25px, rgba(255, 255, 255, 0) 25px 100%);
}
</style>
</head>
<body>
<p>언더라인 커스텀 입니다. <strong>지금은 중요표시!</strong> 입니다.<br> <strong>밑줄 커스텀 하는 방법을 알보겠습니다. 언더라인 커스텀입니다.</strong>감사합니다.</p>
</body>
</html>
속성에 대한 설명.
p 태그의 line-height는 28px로 적용된다. 따라서 다음과 같이
background-color 의 속성이 위에서부터 20px 5px 3px의 영역을 차지하게 된다. linear-gradient 속성은 그라데이션 효과를 줄수 잇는데 경계의 길이를 정확히 나누어준다면 뚜렷한 경계를 낼수가 있다 따라서 base-line부터 3px 뛰어진 곳에 5px 크기만큼의 언더라인의 색깔을 적용한다.
이방법이 좋은 이유는 가상요소 ::after을 이용한다면 줄바꿈이 되는곳에서는 적용할 수 없지만 이방법을 사용하면 적용할 수 있다.
'개인공부' 카테고리의 다른 글
| 프론트엔드 추천 (0) | 2021.05.22 |
|---|---|
| CSS transform 그리기 (0) | 2021.05.11 |
| css 클래스명 선정. (0) | 2021.05.10 |
| scss 자주쓰는 mixin (0) | 2021.05.04 |
| CSS 말줄임 후 더보기 버튼 (React) (0) | 2021.05.02 |
