[CSS] 텍스트에 형광펜 효과 주기 u태그 사용

웹 페이지에서 특정 텍스트를 강조하려면 어떻게 해야 할까요? 종이에 글을 쓸 때 중요한 부분에 형광펜을 사용하여 강조하는 것처럼, 웹 페이지에서도 이와 같은 효과를 줄 수 있습니다. 이 글에서는 CSS를 사용하여 <u>태그로 텍스트에 형광펜 효과를 주는 방법을 알아보겠습니다.

 

 

1. 기본 형광펜 효과

먼저, 텍스트에 기본적인 형광펜 효과를 주기 위한 CSS 코드를 살펴보겠습니다.

highlight {
    background-color: yellow;
    padding: 3px 5px;
    border-radius: 3px;
}

위의 스타일을 적용하면 텍스트에 노란색의 배경색이 생기며, 약간의 패딩과 둥근 모서리를 가진 형광펜 효과를 얻을 수 있습니다.

<p>이것은 <u class="highlight">형광펜 효과</u>를 가진 텍스트입니다.</p>

 

이것은 형광펜 효과를 가진 텍스트입니다.

 

2. 다양한 형광펜 색상

형광펜에는 여러 가지 색상이 있습니다. CSS를 사용하면 다양한 색상의 형광펜 효과를 적용할 수 있습니다.

highlight-pink {
    background-color: hotpink;
}

highlight-green {
    background-color: lime;
}

highlight-orange {
    background-color: orange;
}

 

3. 텍스트 강조하기

텍스트만 형광펜 효과를 주는 것이 아니라, 중요한 부분은 굵은 글씨체로 강조할 수도 있습니다.

.highlight-strong {
    font-weight: bold;
}

또한 형광펜으로 밑줄 긋는 효과를 낼 수 있습니다.

.highlight-under {
    text-decoration: none;
    display: inline;
    box-shadow: inset 0 -9px 0 yellow;
}

여기서 text-decoration: none;는 밑줄을 삭제하는 태그입니다.

결과는 다음 이미지와 같습니다.

 

4. 소스파일첨부

위에서 사용한 코드를 파일로 첨부합니다.

css형광펜효과.zip

0.00MB

 

결론

CSS를 활용하면 웹 페이지의 텍스트에 형광펜 효과를 쉽게 추가할 수 있습니다.

이 효과는 사용자의 주의를 끌거나 텍스트 중에서 중요한 부분을 강조하는 데 유용합니다.

CSS의 다양한 속성을 활용하여 블로그 등에 원하는 스타일과 효과를 적용해보세요!

 

함께보면 좋은 글

[CSS] a태그 글자 강조하기 마우스 오버 색 변경

[CSS] a태그로 둥근 모서리와 그라디언트 배경, 애니메이션 효과 버튼 만들기