HTML을 활용해서 문장의 하이라이트 효과를 줄 수 있는 탬플릿을 공유드리려고 합니다. 이전에 한번 HTML을 활용한 글상자 탬플릿을 공유드렸었는데요. 오늘은 문장을 강조할 때 활용할 수 있는 밑줄이나 형광펜 효과 같은 하이라이트 기법입니다.
웹페이지나 블로그 포스트를 작성할 때 CSS, HTML 등을 활용해서 다양한 디자인이나 시각적 효과를 만들 수 있습니다. CSS까지 활용한다면 더 다양한 효과들을 만들 수 있겠지만, 스킨을 건드려야 하기 때문에 가급적이면 포스트 내에서 해결할 수 있는 HTML만을 사용하는 것을 선호하는 편인데요.
아래 본문에서 오늘 소개해드릴 하이라이트 효과들과 HTML 코드, 사용방법들을 말씀드리도록 하겠습니다.
1. 굵은 밑줄 표시하기
기본적으로는 Ctrl + U 단축키를 활용해서, 선택 영역의 글자에 밑줄효과를 넣을 수 있습니다. 기본 제공되는 밑줄 서식은 두께도 얇고, 색상도 검은색이어서 강조한다는 느낌을 주기가 어렵습니다.
이럴 때 HTML 코드를 활용하면 두꺼운, 그리고 색상이 있는 밑줄을 표시할 수 있는데요. HTML 편집창에서 아래의 코드를 입력하시면 화면에는 이렇게( 굵은 파란색 밑줄 ) 표시됩니다.
<span style="border-bottom: 5px solid blue;">굵은 파란색 밑줄</span>
HTML 코드의 구조를 살펴보면,
- <span> 코드를 활용해서 스타일(Style)을 적용할 영역을 구분합니다.
- "border-bottom" 코드를 사용해서 해당 영역에 밑줄을 추가합니다.
- 밑줄의 상세 디자인(두께, 모양, 색상)을 지정합니다.
위의 예시에서는 두께는 5px, 모양은 실선(Solid), 색상은 파랑(Blue)으로 정의했습니다.
또한, 코드의 수정을 통해서 상세 디자인들을 변경해 보실 수도 있습니다.
1) 두께 조정하기
HTML 코드에 입력한 픽셀 수치를 조정해서 밑줄의 두께를 조정하실 수 있습니다.
| 사이즈 | 5px | 3px | 1px |
| 예시 | 5픽셀 | 3픽셀 | 1픽셀 |
2) 밑줄 모양 변경하기
예시에서는 실선(solid) 형태의 밑줄을 보여드렸지만 점선, 긴 점선, 이중선 등 여러 스타일을 활용하실 수가 있습니다. 예를 들어 점선으로 밑줄을 만들고 싶다면 solid 대신 dotted를, 이중선이라면 double을 입력하는 방식입니다. 아래 표를 참고하시기 바랍니다.
| 모양 | 점선 |
긴 점선 |
이중선 |
| HTML 코드 | dotted | dashed | double |
3) 밑줄 색상 변경하기
색상 변경은 많은 분들이 아시겠지만, 위의 예시에서 blue로 지정된 색상을 원하는 색상명이나 특정 색상코드를 입력해서 변경하실 수 있습니다.
| 모양 | 초록색 | 빨간색 |
진분홍색 |
| HTML 코드 | green | #ff0000 | deeppink |
종합해서 다시 말씀드리자면, border-bottom 코드를 활용해서 밑줄을 그리고 세부 디자인들을 조정할 수가 있습니다. 만약 딥핑크 색상의 이중선을 3px 크기로 그리고 싶으시다면 다음과 같은 코드를 사용하시면 됩니다.
<span style="border-bottom: 3px double deeppink;"> 진분홍색 이중선</span>
2. 형광펜 효과 만들기
단순히 밑줄을 긋는 것이 아니라, 글자를 약간 덮으면서 형광펜으로 칠한 느낌을 줄 수도 있습니다. 많이들 사용하시는 효과일 텐데 HTML 코드만으로도 가능한 부분입니다. 바로 이렇게 말이죠.
<span style="background: linear-gradient(to top, aquamarine, transparent 50%);">바로 이렇게 말이죠.</span>
코드의 구조를 살펴보면,
- <span> 코드를 활용해서 스타일(Style)을 적용할 영역을 구분합니다.
- background(배경) 스타일을 정하는데 linear-gradient, 즉 선형으로 이루어진 그러데이션을 배경으로 합니다.
- to top : 아래를 시작점으로 위로 향하는 그러데이션 효과이며, aquamarine 색으로 시작합니다.
- transparent 50%는 투명한 색이 되는 시점을 아래에서부터 50% 지점에 다다른 순간이라고 지정합니다.
마찬가지로 일부 코드를 수정하면 다양하게 응용할 수 있습니다. 색상이 글자를 덮는 범위를 조정할 수도 있고, 그러데이션의 방향을 위/아래/오른쪽/왼쪽 모두 가능합니다. 당연히 색상을 변경하는 것도 가능합니다.
| 모양 | 색상 범위 축소 | 범위 확대 및 색 변경 |
방향을 아래로 |
| HTML 코드 | transparent 30% | violet, transparent 70% | to bottom |
3. 그림자 효과 활용하기
마지막으로 소개해드릴 하이라이트 효과는 그림자 효과입니다. 그림자 효과는 과하게 사용하면 가시성을 해치지만 잘 사용한다면, 글자에 입체감을 주며 눈에 확 들어오게 하는 효과를 누릴 수 있습니다.
문장에 입체감이 느껴지시나요?
<b><span style="text-shadow: gray 2px 2px 4px;">문장에 입체감이 느껴지시나요?</span></b>
코드는 "text-shadow: 색상 / 수평 거리 / 수평 거리 / 흐림 효과"로 구성이 됩니다.
- 색상은 기본 검은색으로 설정되어 있고, 색상 명칭이나 HTML 코드로 변경이 가능합니다. 또한 순서상 색상이 가장 마지막에 와도 무방합니다.
- 수평 거리는 텍스트를 기준으로 그림자가 좌우 중 어느 위치에 얼마큼의 간격으로 보이는지를 지정하는 것입니다. 음수이면 텍스트 기준으로 좌측, 양수이면 우측에 위치합니다.
- 수직 거리는 텍스트를 기준으로 그림자가 상하 중 어느 위치에 얼만큼의 간격으로 보이는지를 지정하는 것입니다. 음수이면 텍스트 기준으로 위쪽에, 양수이면 아래쪽에 위치합니다.
- 마지막은 번짐(블러) 정도를 지정하는 것입니다. 숫자가 크면 클수록 번짐 정도가 더 높아지게 되어 흐리게 보입니다.
즉, 위의 예시의 코드를 해석하자면 텍스트를 기준으로 우측 2px, 아래쪽 2px에 회색 그림자를 표시하고 4px만큼 번지게 보이게 하는 코드인 것입니다.
예시의 코드를 기준으로 색상, 위치, 번짐정도 등을 수정하셔서 활용하실 수 있습니다.
※ 네온사인 느낌 만들기
그림자 효과를 활용하면 네온사인 느낌을 만들수도 있습니다. 그림자는 중첩해서 활용할 수 있기 때문입니다.
네온사인 효과 만들기
<b><span style="color: #ffffff; text-shadow: 0 0 10px grey, 0 2px 6px blue, -2px 0 6px blue;">
네온사인 효과 만들기</span></b> 스크립트를 보시면 아시겠지만, text-shadow에 3개의 그림자 효과가 중첩된 것을 확인하실 수 있습니다. 글자를 기준으로 오른쪽 아랫부분에 그림자 하나, 왼쪽 위 부분에 그림자 하나, 그리고 글자 뒤로 넓게 번지는 그림자까지 총 3개의 효과를 중첩했습니다. 추가적으로 네온사인 효과가 잘 어울리도록 글자의 색상을 하얀색(#ffffff)으로 설정했습니다.
참고하셔서, 다양한 색상의 네온사인 효과도 많들어서 활용하실 수 있습니다.
이번 포스트에서는 문장에 하이라이트를 줄 수 있는 다양한 HTML 코드를 말씀드렸습니다. 개인적으로는 심플한 것을 좋아하다 보니 많이 활용하지는 않지만, 그럼에도 필요한 부분에 하이라이트를 줄 수 있다면 중요 내용을 명확하게 전달하기 좋겠습니다.
여러분들께서도 포스트의 내용을 참고하시어 본인만의 템플릿을 만들어 활용해 보시기 바랍니다 :)