[CSS] 형광펜 밑줄 효과: CSS를 활용하여 형광펜처럼 강조하는 방법 3가지

형광펜 밑줄 효과: 웹 페이지에서 특정 텍스트를 강조하고 싶다면, HTML과 CSS를 활용하여 형광펜처럼 강조하는 효과를 줄 수 있습니다. 아래 코드는 “홈 화면 바로가기 만들기” 부분에 노란색 배경과 굵은 글씨 효과를 주어, 형광펜으로 밑줄을 친 듯한 느낌을 줄 수 있습니다.

형광펜 밑줄 효과

<p>스마트폰에서 <span class="highlight">홈 화면 바로가기 만들기</span> 기능을 사용하여 자주 방문하는 웹사이트에 빠르게 접근하세요!</p>

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
    padding: 2px;
  }
</style>

형광펜 밑줄 효과: 아래 절반만 노란색으로 칠해진 효과

<p>스마트폰에서 <span class="half-highlight">홈 화면 바로가기 만들기</span> 기능을 사용하여 자주 방문하는 웹사이트에 빠르게 접근하세요!</p>

<style>
  .half-highlight {
    background: linear-gradient(transparent 50%, yellow 50%);
    font-weight: bold;
    padding: 2px;
  }
</style>

형광펜 밑줄 효과: 밑줄 느낌으로 강조

<p>스마트폰에서 <span class="underline-highlight">홈 화면 바로가기 만들기</span> 기능을 사용하여 자주 방문하는 웹사이트에 빠르게 접근하세요!</p>

<style>
  .underline-highlight {
    border-bottom: 4px solid yellow;
    font-weight: bold;
    padding-bottom: 2px;
  }
</style>

본 게시물은 코딩&웹 카테고리로 분류되어 관련 포스트를 확인 할 수 있습니다.