티스토리 본문 형광펜 효과로 가독성을 높이세요

Reporter.Kim
라이프/블로그 정보
2023. 5. 14.

티스토리 본문 형광펜 효과로 가독성을 높이세요

블로그 방문자의 체류 시간을 확보하기 위해 티스토리에서는 다양한 포스팅 방법이 사용되고 있습니다. 그중 글과 이미지의 가독성을 높여 전달하려는 메시지를 분명히 하는 것도 방법이 됩니다. 그럼 티스토리 본문에서 특정 문장이나 단어를 눈에 띄게 만들어 가독성을 높이는 방법에 대해 알아보겠습니다.

1. 형광펜 효과로 가독성

본문에서 특정 문장이나 단어를 눈에 띄게 만드는 대표적인 방법은 글자를 두껍게 만들거나 밑줄을 치는 것이 있습니다. 그런데 이런 방법을 효과적으로 활용하면 더욱 가독성을 높일 수 있습니다. 바로 형광펜 효과입니다.

2. B태그 이용하는 형광펜 효과 방법

스킨 편집에는 HTML와 CSS가 있습니다. 이 중 HTML 태그에 글자를 두껍게 표현하는 B태그가 있는데, 이를 활용하여 특정 문장이나 단어를 강조하는 형광펜 효과를 낼 수 있습니다. 우선 스킨편집 CSS에 다음의 코드를 삽입합니다. 관리하기 편하게 맨 아래쪽에 넣는 것을 추천합니다.

∎ 티스토리 관리자 → 스킨 편집 → HTML 편집 → CSS로 이동 (아래의 코드는 복사 가능합니다.)

.tt_article_useless_p_margin > p > b { 
	padding: 2px 3px; 
	border-radius: 5px; 
	font-weight: bold; 
	color: rgba(0, 0, 0, 0.8); 
	background-color: rgba(0, 255, 0, 0.5); }
}

padding: 2px 3px; 형광펜 상/하, 좌/우 두께를 지정, px값이 클수록 두꺼워짐
border-radius: 5px; 형광펜 모서리의 라운드 지정, px값이 클수록 모서리가 부드러워 짐
font-weight: bold; normal(기본), bold(굵게) 지정
color: rgba(0, 0, 0, 0.8); 글자의 색상 지정
background-color: rgba(255, 228, 0, 0.7); 배경색 지정, RGBA컬러는 원하는 색상 검색

이렇게 지정하게 되면 B태그를 활용하여 형광펜 효과를 줄 수 있습니다. 이때 주의할 점은 기존에 작성한 모든 문서의 B태그에 형광펜 효과가 들어간다는 것을 유념해야 합니다. 그리고 한글 문서 작성 시 ‘Ctrl + B’가 글자를 두껍게 하는 단축키인 것처럼 티스토리 새 에디터에도 동일한 단축키가 적용됩니다. 그래서 형광펜과 글자 두꺼운 효과를 따로 사용할 때 불편할 수 있습니다.

3. 밑줄을 활용하는 형광펜 효과 방법

티스토리 본문에서 특정 문장이나 단어에 밑줄을 넣는 방법은 글자에 두꺼운 효과를 주는 방법과 별도로 사용할 수 있습니다. 즉 밑줄을 형광펜으로 대체하는 방법입니다. 우선 아래의 코드를 CSS에 삽입합니다.

∎ 티스토리 관리자 → 스킨 편집 → HTML 편집 → CSS로 이동 (아래의 코드는 복사 가능합니다.)

u {
	text-decoration: none;
	display: inline;
	box-shadow: inset 0 -25px 0 #c6f8f0;
	color: #000000;
   }

-25px 0 – 형광펜의 두께 지정, 글자 전체를 덮기 위해서는 '-20px' 이상 필요
#c6f8f0; - 형광펜의 색상을 지정, 마우스를 누르면 색상표가 보임

이렇게 지정하면 밑줄을 활용해서 형광펜 효과를 줄 수 있습니다. 그리고 B태그에서 ‘Ctrl + B’ 단축키를 사용하는 것처럼, 강조하고 싶은 문장이나 단어를 선택하고 ‘Ctrl + U’를 누르면 바로 적용됩니다. 이때 에디터에서는 밑줄만 보이지만 실제로는 형광펜 효과가 출력됩니다.

① 형광펜 효과가 없는 글자

② 밑줄 단축키 ‘Ctrl + U’로 형광펜 효과를 준 글자

③ 밑줄 ‘Ctrl + U’와 볼드 ‘Ctrl + B’ 단축키로 동시에 형광펜 효과를 준 글자

저작자표시 비영리 변경금지

티스토리 본문 형광펜 효과로 가독성을 높이세요