티스토리 글에 일곱색깔 형광펜 밑줄 긋기

개요

티스토리에 글을 쓰다 보면 어느 특정한 문장이나 문구를 강조하고 싶은 경우가 생긴다.  그럴 경우에 굵은 글씨체를 사용한다거나 밑줄을 긋는 식으로 강조하게 되는데 특별히 눈에 띄지 않아 불만족스러울 때가 있다.

실생활에서 형광펜을 사용하듯이 강조하고 싶은 문구에 형광펜으로 밑줄을 그으면 눈에 잘 띌 텐데 하는 생각을 평소에 많이 하고 있었다.

 

웹서핑을 해보니 css를 활용하면 형광펜 효과를 낼 수 있다길래 예제를 약간 응용해서 아래와 같이 7가지 형광펜을 만들어 보았다.

 

형광펜 1 :  샘플 글입니다.

형광펜 2 :  샘플 글입니다.

형광펜 3 :  샘플 글입니다.

형광펜 4 :  샘플 글입니다.

형광펜 5 :  샘플 글입니다.

형광펜 6 :  샘플 글입니다.

형광펜 7 :  샘플 글입니다.

 

형광펜을 사용한 예제

문장에 형광펜을 사용한 예제를 보여주면 아래와 같다.  강조하고 싶은 곳에 원하는 색상으로 밑줄을 그어주면 그 문구가 확실히 도드라져 보인다.

헤르만 헤세 (Herman Hesse)

20세기 독일을 대표하는 작가. 1877년 독일 남부 뷔르템베르크의 칼프에서 장남으로 태어났다. 아버지 요하네스는 신교(新敎)의 목사이고, 어머니 마리는 인도에서 태어나 독일에서 교육을 받고, 인도로 돌아가 그곳에서 영국인 선교사와 결혼하였으나, 그와 사별한 후 요하네스와 재혼하여 그를 낳았다. 헤세는 4세부터 9세까지, 한때 스위스의 바젤에서 지낸 것 외에는 대부분 칼프에서 지냈다. 1890년 신학교 시험 준비를 위해 괴핑엔의 라틴어 학교에 다니며 뷔르템베르크 국가시험에 합격했다.

형광펜 만드는 방법

위에 예제와 같이 형광펜 밑줄 긋기를 하기 위해서는 일단 css 스크립트를 만들고 난 후 그것을 본문 글에 적용하는 두 단계의 과정으로 구분할 수 있다.

형광펜 css파일 만들기

먼저 html 편집 모드에 들어가서 css 탭을 선택하여 css 파일을 연다.  css 파일의 맨 끝에 아래 css 코드를 삽입한다.  동일한 포맷의 7가지 css이다.

• '.bl1'은 css의 이름으로 나중에 불러서 사용하려면 이름을 기억하고 있어야 한다.   
• 'border-bottom': 4px'는 형광펜의 두께를 지정하는 것인데 값을 조금씩 수정해가면서 자신의 입맛에 맞게 두께를 설정한다.
• 'box-shadow: inset 0 -7px 0'은 글자와 형광펜사이의 거리를 조절할 수 있는 값으로 마찬가지로 조금씩 값을 조정하면서 자신의 입맛에 맞는 거리를 찾아 설정한다.

/*****형광펜css ************/
.bl1 /* 형광펜 1*/
{
  	border-bottom: 4px solid #FF00FF; 
	box-shadow: inset 0 -7px 0 #FF00FF;
}
.bl2 /* 형광펜 2*/
{
  	border-bottom: 4px solid #FF9900;
	box-shadow: inset 0 -7px 0 #FF9900;
}
.bl3 /* 형광펜 3*/
{
  	border-bottom: 4px solid #FFFF00;
	box-shadow: inset 0 -7px 0 #FFFF00;
}
.bl4 /* 형광펜 4*/
{
  	border-bottom: 4px solid #BAFF1A;
	box-shadow: inset 0 -7px 0 #BAFF1A;
}
.bl5 /* 형광펜 5*/
{
  	border-bottom: 4px solid #00FF80;
	box-shadow: inset 0 -7px 0 #00FF80;
}
.bl6 /* 형광펜 6*/
{
  	border-bottom: 4px solid #00FFFF;
	box-shadow: inset 0 -7px 0 #00FFFF;
}
.bl7 /* 형광펜 7*/
{
  	border-bottom: 4px solid #8000FF;
	box-shadow: inset 0 -7px 0 #8000FF;
}

아래 그림은 css파일에 형광펜 css를 삽입한 코드를 캡처한 것이다.  그림에서 처럼 가장 마지막에 형광펜 css를 삽입한다.

<그림> css 파일에 형광펜 스크립트를 삽입한 예

 

글에 형광펜 적용하기 

위의 예제 글에 형광펜을 적용한 html 코드를 나타내면 아래와 같다.  css는 html 태그(p, span, div...)의 어느 곳에서든 class로 지정해서 불러오면 된다. 

<span class="bl1">헤르만 헤세 (Herman Hesse)</span> <br /><br /><span class="bl2">20세기 독일을 대표하는 작가.</span> <span class="bl3">1877년 독일 남부 뷔르템베르크의 칼프에서 장남으로 태어났다.</span> <span class="bl4">아버지 요하네스</span>는 신교(新敎)의 목사이고, <span class="bl5">어머니 마리</span>는 인도에서 태어나 독일에서 교육을 받고, 인도로 돌아가 그곳에서 영국인 선교사와 결혼하였으나, 그와 사별한 후 요하네스와 재혼하여 그를 낳았다. 헤세는 4세부터 9세까지, 한때 스위스의 바젤에서 지낸 것 외에는 <span class="bk6">대부분 칼프에서 지냈다.</span> 1890년 신학교 시험 준비를 위해 괴핑엔의 라틴어 학교에 다니며 <span class="bl7">뷔르템베르크 국가시험에 합격</span>했다.

예제에서는 span에 class를 적용한 예로 bl1부터 bl7까지 자신이 선택한 색상에 해당되는 css이름을 class로 선언해주면 끝이다.   보여주는 효과에 비해 사용법은 사실 아주 쉬운 편이다.

 

맺음말

지금까지 티스토리 글에 일곱 색깔 형광펜으로 밑줄 긋는 방법에 대해 예제와 함께 알아보았다. 

그림보다 글이 많이 차지하는 콘텐츠의 경우에 글의 특정 부분을 강조해야 할 경우가 많은데 일반 밑줄 긋기나 글씨체를 진하게 하는 것으로 부족하다 싶기도 하고 약간 촌스럽게 느껴지기도 한다.  그래서 좀 특이한 강조 글씨를 찾게 되는데 이때 형광펜 밑줄 긋기가 딱 부합되지 않을까 생각해본다.

 

일곱 개의 색깔을 강조하고자 하는 용도별로 지정해서 사용해도 좋을 것 같다.

 

 

** Note.

현재 형광펜 스크립트를 티스토리 스킨에서 삭제한 상태입니다.

자바스크립트가 많으면 모바일 속도가 느려진다고 해서 시험삼아 일단 삭제했는데 이 글을 읽고 필요하다고 요청하는 분이 계시면 다시 업로드해놓게습니다.

아무래도 형광펜 스크립트가 동작해야 이해하는데 도움이 될 겁니다.