반응형
CSS를 사용해서 형광펜 효과를 주는 방법 2가지를 알아보겠습니다.
형광펜 효과를 사용하면 텍스트의 내용을 눈에 띄게 만들어 해당 내용을 강조해 주목도를 높일 수 있습니다. 하지만, 형광펜 효과를 남용해서 사용하면 오히려 아무 것도 강조하지 않았을 때보다 좋지 않으므로 필요한 부분에만 사용하는 것이 좋습니다.
위에 보이는 이미지처럼 효과를 주겠습니다. 빨간 형광펜 효과는 그라이언트를 이용했고, 파란 형광펜 효과는 가상 요소를 이용해 만들었습니다.
<body>
<div>
<p class="first">Highlighter Pen</p>
<p class="second">Highlighter Pen</p>
</div>
</body>우선, HTML 구조입니다. 간단하게 body, div, p태그만 사용했습니다.
첫 번째 방법입니다.
*,*::after,*::before{margin: 0; padding:0}
body{display: flex; justify-content: center; align-items: center; height:100vh;}
div{padding:24px;}
p{color:#1f2232; font-size: 36px; font-weight: bold; line-height: 48px; text-align: center;}
/* 글자 설정 및 레이아웃*/
p.first {
color:#ff4d4d;
background: linear-gradient(to top, #ffcdcd 30%, transparent 30%);
}
/* 형광펜 효과 주는 부분*/
그라디언트에서 2가지 색상을 사용하고 색상 뒤에 입력하는 %(퍼센트), px(픽셀)을 동일하게 맞출 경우 위의 네모 이미지처럼 그라디언트 효과 대신 색이 분리된 효과를 만들 수 있습니다.
두 번째 방법입니다.
*,*::after,*::before{margin: 0; padding:0}
body{display: flex; justify-content: center; align-items: center; height:100vh;}
div{padding:24px;}
p{color:#1f2232; font-size: 36px; font-weight: bold; line-height: 48px; text-align: center;}
/* 글자 설정 및 레이아웃*/
/* 형광펜 효과 시작 */
p.second {
position: relative;
top:0; left:0;
color:#4567ff;
}
p.second::after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%);
width: 104%;
height: 30%;
background-color: #cac7ff;
z-index: -1;
}
/* 형광펜 효과 끝 */가상 요소를 이용해 만든 방법으로, p태그에 position:relative를 사용하고 가상 요소에 position:absolute, content:""를 입력해줍니다. 가상 요소가 글자 밑에 오도록 z-index를 -1을 넣어줍니다. 그리고, 효과가 하단 중앙에 오도록 left,bottom과 transform을 설정하고, 원하는 너비와 높이를 입력해줍니다.
반응형
'html' 카테고리의 다른 글
| 구글 폰트를 웹 폰트로 사용하는 방법 (0) | 2024.03.14 |
|---|---|
| CSS로 글자에 그라디언트 색상 넣는 방법 (1) | 2023.08.03 |
| html에서 제목 요소인 <h1>~<h6> 태그 알아보기 (0) | 2021.01.16 |