형광펜 효과 썸네일

HTML을 이용한 형광펜 효과와 밑줄 적용 방법

by


웹사이트는 정보를 효과적으로 전달하는 도구입니다. 그 중에서도 텍스트는 가장 중요한 요소 중 하나입니다. 이러한 텍스트를 강조하거나 독특하게 표현하기 위해, 형광펜 효과를 적용하는 방법을 알아보겠습니다. 이 글에서는 HTML과 CSS를 이용하여 텍스트에 형광펜 밑줄을 그어 형광펜 효과를 적용하는 방법을 설명하겠습니다.

목차
1. HTML과 CSS를 이용한 형광펜 효과
2. 형광펜 효과 밑줄 적용 방법
2.1. [html]
2.2. [css]
3. 결론

HTML과 CSS를 이용한 형광펜 효과

HTML(Hyper Text Markup Language)과 CSS(Cascading Style Sheets)는 웹사이트를 만드는 데 필수적인 도구입니다. HTML은 웹사이트의 구조를 정의하며, CSS는 웹사이트의 디자인을 담당합니다. 이 두 가지를 이용하면, 텍스트에 형광펜 효과를 적용할 수 있습니다.

 

형광펜 효과 밑줄 적용 방법

HTML과 CSS를 이용하여 형광펜 효과를 적용하는 방법은 다음과 같습니다.

HTML에서 <div>를 사용해서 텍스트를 감싸는 태그를 작성합니다.

CSS에서 이 태그에 해당하는 선택자를 linear-gradient를 정의하고 색상을 넣어줍니다.

[html]

  <div class="hh1">
   hh1 가나다라마바사아자차카타파하
  </div>

  <div class="hh2">
    hh2 가나다라마바사아자차카타파하
  </div>


[css]

.hh1 {
  display: inline-block;
  background: linear-gradient(to top, #d4e7f7 40%, transparent 20%);
}

.hh2 {
  display: inline-block;
  border-radius: 0.5em;
  background: linear-gradient(to top, #d4e7f7 40%, transparent 20%);
}

.hh1에 대해서 설명을 하면 이 CSS 코드는 .hh1이라는 클래스를 가진 HTML 요소에 대한 스타일을 정의하고 있습니다. 각 줄의 의미는 다음과 같습니다

display: inline-block; 이 속성은 .hh1 요소의 디스플레이 속성을 inline-block으로 설정합니다. inline-block은 inline과 block의 특성을 모두 가지고 있습니다. 즉, .hh1 요소는 한 줄에 나란히 배치될 수 있으면서도(inline의 특성), 너비와 높이를 지정할 수 있습니다(block의 특성).

background: linear-gradient(to top, #d4e7f7 40%, transparent 20%); 이 속성은 .hh1 요소의 배경에 선형 그라디언트를 적용합니다. 그라디언트는 #d4e7f7 색상에서 시작하여 위쪽으로 변화하고, 이 색상은 그라디언트의 하단 40%를 차지합니다. 그 다음부터 상단 20%까지는 투명한 색상으로 변화합니다. 그 이후의 40%는 명시되지 않았으므로 투명한 색상이 유지됩니다.

 

결론

따라서 이 CSS 코드는 .hh1 클래스를 가진 HTML 요소에 형광펜 효과를 적용하는 데 사용될 수 있습니다. 하단 40%는 #d4e7f7 색상으로 채워지고, 중간 20%는 점차 투명해지며, 상단 40%는 완전히 투명한 배경을 가지게 됩니다. 이렇게 함으로써 텍스트에 형광펜으로 밑줄을 그은 듯한 효과를 줄 수 있습니다.

.hh2는 .hh1에 border-radius(각진 부분을 둥글게 하는 코드)를 추가한 것의 차이입니다. 그래서 hh2는 끝 부분이 둥글게 되어 있습니다. 구현된 것을 비교해 보면 쉽게 알 수 있습니다.

형광펜 밑줄 구현

형광펜 효과가 필요하실 때 잘 활용하시길 바랍니다.



댓글