블로그 가독성 향상: CSS로 스타일리시한 형광펜 효과 추가
웹 콘텐츠를 더 돋보이게 만들고 싶다면, CSS를 활용하여 다양한 형광펜 효과를 적용하는 것이 좋은 방법입니다. 이 포스트에서는 간단한 형광펜 효과부터 그라데이션 효과, 사용자 상호작용에 반응하는 형광펜까지 다양한 CSS 기법을 소개합니다.
기본 형광펜 사용하기 (`mark` 태그 활용)
가장 간단한 방법은 <mark> 태그를 사용하는 것입니다. 기본적으로 노란색 형광펜 효과가 적용됩니다.
1. mark 태그를 사용하면 노란색 형광펜 효과가 나옵니다.
<p>1. <mark>mark 태그를 사용하면</mark> 노란색 형광펜 효과가 나옵니다.</p>사용자 정의 형광펜 색상
CSS 클래스를 정의하고 <mark> 태그에 적용하면 다양한 색상으로 변경할 수 있습니다.
2. 다른 색상의 형광펜 효과를 원한다면 CSS 클래스에서 색상을 지정해주세요.
<style>
mark.mint {
background-color: #3fffa7;
}
</style>
<p>2. <mark class="mint">다른 색상의 형광펜 효과를 원한다면</mark> CSS 클래스에서 색상을 지정해주세요.</p>배경 속성을 이용한 형광펜 효과
CSS의 background 속성을 이용하면 더욱 창의적인 형광펜 효과를 줄 수 있습니다.
3. CSS에서 background 속성을 이용하여 다양한 형광펜 효과를 줄 수 있습니다.
<style>
.highlight {
background-color: #ffe6ff;
}
</style>
<p>3. <span class="highlight">CSS에서 background 속성을 이용하여</span> 다양한 형광펜 효과를 줄 수 있습니다.</p>반만 밑줄 그은 형광펜 효과
선형 그라데이션을 사용하여 반만 밑줄을 그은 독특한 효과를 줄 수 있습니다.
4. 형광펜으로 반만 밑줄 그은 효과를 줄 수 있습니다.
<style>
.half_highlight {
background: linear-gradient(to top, #ffffbb 50%, transparent 50%);
}
</style>
<p>4. <span class="half_highlight">형광펜으로 반만 밑줄 그은 효과</span>를 줄 수 있습니다.</p>그라데이션 형광펜 효과
그라데이션 형광펜 효과로 텍스트를 더욱 돋보이게 할 수 있습니다.
5. 그라데이션 형광펜 효과를 줄 수 있습니다.
<style>
.highlight.two-highlight {
background: linear-gradient(to right, #fe88ff 0%, #c2a4ff 100%);
}
</style>
<p>5. <span class="highlight two-highlight">그라데이션 형광펜 효과</span>를 줄 수 있습니다.</p>인터랙티브 형광펜 효과
사용자 상호작용에 반응하는 형광펜 효과를 줄 수 있습니다. 마우스를 올리면 색상이 변경됩니다.
6. 마우스를 올리면 스륵-하고 올라오는 형광펜 효과를 볼 수 있습니다.
<style>
.highlight_up {
background-image: linear-gradient(120deg, #2bffcb 0%, #54fff9 100%);
background-repeat: no-repeat;
background-size: 100% 0%;
background-position: 0 88%;
transition: 0.23s ease-in;
}
.highlight_up:hover {
background-size: 100% 50%;
}
</style>
<p>6. <span class="highlight_up">마우스를 올리면 스륵-하고 올라오는 형광펜 효과</span>를 볼 수 있습니다.</p>