티스토리 블로그 글자에 형광펜 색연필 긋는 방법 (본문 글에 색 입히기)

 오늘 내용은 티스토리 블로그를 운영하는 블로거분에게 유익한 유틸리티 팁의 내용입니다. 본문으로 작성되는 글씨에 형광펜으로 그은 듯한 사각형 강조 표시, 밑줄 쫙 느낌 만들기입니다.

 

두 가지 방법이 있으니, 취향대로 선택하면 됩니다. 매우 간단한 방법이니 바로 시작하겠습니다.

 

🥕광고 차단 프로그램을 OFF 하여 주시면 좋은 콘텐츠를 제작하는 데 있어 많은 힘이 됩니다.

 

안녕하세요, 마숲의 블로그 마숲입니다 ~ ^ ^

 

A. 블로그 글에 형광펜 긋는 방법 (bold 활용)

1. 티스토리 관리페이지에서 꾸미기 → 스킨 편집을 클릭합니다. 

 

2. 우측 상단쯤에 있는 html 편집 버튼을 클릭합니다.

 

3. 편집 창이 열리고, 상단 메뉴 탭에서 CSS를 선택합니다.

CSS로 진입한다.

 

반응형

 

4. 나중에 형광펜 기능이 지겨워져서 삭제할 수도 있으니, 기억하기 편하도록 편집 창의 제일 하단으로 내려간 다음 아래의 코드를 복사하여 붙여 넣습니다.

 

⚠️ 주의: 혹시 모르니 html 편집을 건드리기 전에 CSS 안의 내용을 메모장 같은 곳에 복사하여 백업해 두시기 바랍니다. 백업은 권장이 아니라, 블로거에겐 필수 안전 사항입니다!

 

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

 

형광펜 긋기 코드를 CSS 편집으로 붙여 넣은 모습

 

5. 우측 상단에 있는 적용 버튼을 눌러 적용을 시킵니다. 이것으로 모든 형광펜 긋기 준비가 끝이 납니다.

 

A. 형광펜 효과 코드 사용 방법은?

 

 CSS 코드를 적용했다면 이 전에 작성했던 글들도 모두 적용이 된 상태로 바뀝니다. 무슨 말이냐고요?

 

이 형광펜 긋기 코드는 글쓰기 할 때 Bold(볼드) 기능을 형광펜 기능으로 대체하는 방법입니다. 그러니 기존에 굵게 볼드 처리한 글자들은 형광펜으로 바뀌게 됩니다. 아래의 캡처 이미지를 보면 이해가 빠를 것입니다.

 

볼드 처리된 글자에 형광펜이 입혀 졌다.

 원래의 글은 글자에 힘을 주기 위해 굵게 표시했던 부분인데, 형광펜 코드를 적용시킨 이후 위와 같이 형광펜이 입혀졌습니다.

 

 좋은 점은 제목1, 제목2, 제목3(H1, H2, H3, H4)에 해당하는 폰트에 볼드 처리가 되어 있다고 하여도, 본문이 아니면 적용이 안 된다는 것입니다. 즉, 본문에만 형광펜이 그어집니다!

 

 앞으로 글을 포스팅할 때 볼드 처리를 해놓으면 형광펜이 입히게 됩니다.

 

A. 형광펜 굵기, 모양, 색상 바꾸기

  적용하는 방법은 매우 쉬웠고, 이젠 더 쉬운 형광펜 컬러와 모양을 내 마음대로 바꾸기입니다.

 

 

다시 코드로 들어가서 코드 안의 숫자나 값을 아래의 설명을 참고하여 원하는 대로 편집하면 됩니다. 형광펜 코드 넣는 것보다 더 쉽죠?

 

.tt_article_useless_p_margin > p > b {  
    padding: 1px 3px;  ◀ 형광펜 상하 크기 조정 / 좌우 크기 조정
    border-radius: 5px; ◀ 사각형 모서리의 둥근 정도 조정
    font-weight: bold;  ◀ normal(기본 400), bold(굵게 700) 지정이 가능하며, 숫자 지정은 100~900까지 가능 
    color: rgba(0, 0, 0, 0.8); ◀ 글자 색 조정(안 만지는 것을 추천)
    background-color: rgba(255, 180, 241, 0.7); ◀ 배경색 조정
    }

 

📌  background-color: rgba(255, 180, 241, 0.7); 컬러 변화를 주고 싶어서 숫자를 입력하지 말고, CSS에 사각형 컬러 표시가 있습니다.

 

컬러 사각형 위에 마우스를 가져가면 색상 픽 창이 나타나서 편하게 원하는 색상을 선택할 수 있습니다. 그러니 힘들게 RGB 색상 값 찾는다고 고생하지 마세요.

색상을 고를 수 있는 창이 나타난다.

 위 이미지의 rgba 숫자는 위에 있는 이미지에 나온 보라색 형광펜값입니다. 괜찮은 색상 같아 카피하고 싶다면 같은 수치를 넣으시면 됩니다.

 

📌 color: rgba(0, 0, 0, 0.8); 이 코드는 투명도와 관련 있는 부분이니 건드리지 않는 것이 좋습니다. 

 

B. 블로그 글에 형광펜 긋는 방법 (밑줄 활용)

 

1. A 방법과 마찬가지로 CSS 편집 창까지 진입합니다.

 

2. 기억하기 편하도록 편집 창의 제일 하단으로 내려간 다음 아래의 코드를 복사하여 붙여 넣습니다.  

 

u {text-decoration: none; display: inline; 
box-shadow: inset 0 -23px 0 hsla(53, 90%, 
83%, 0.93);}

 

3. 우측 상단에 있는 적용 버튼을 눌러 적용을 시킵니다. 

 

B. 밑줄 형광펜 코드 활용 방법

 볼드를 활용한 코드와 마찬가지입니다. 기존에 작성된 글 중에서 밑줄 표시된 글자에는 형광펜이 그어지게 됩니다. A 방법인 볼드는 글자에 볼드 적용 시 형광펜으로 나타납니다. B 방법은 글자에 밑줄 적용 시 형광펜 효과가 생성됩니다.

 

형광펜의 크기와 색상 변경 또한 쉽습니다.

 

u {text-decoration: none; display: inline; 
box-shadow: inset 0 -23px 0 hsla(53, 90%, ◀ -23px 숫자로 형광펜 상하 크기 조정
83%, 0.93);}

 

👉 색상 조정은 볼드 활용 코드와 같습니다. 마우스 커서를 사각형 컬러 위에 올려놓으면 미니 컬러 창이 나타나고, 그중에서 선택하면 됩니다.

 

마치며

 마숲은 두 가지 모두 사용하여 보니 볼드 보다는 B 방법인 밑줄 표시를 형광펜 기능으로 사용하는 것이 더 좋았습니다.

 

 

평상 시 글을 작성할 때 볼드 표시는 자주 사용하는 반면, 밑줄 표시 기능은 거의 사용하지 않기 때문입니다.

 

 오늘 내용은 블로그 운영에 도움이 되셨나요? 함께 하나씩 하나씩 알아가면서 소중한 블로그 취미생활을 이어나가도록 합시다. 그럼 오늘도 행복 가득한 날 보내시기를 바랍니다.

 

📌 애드센스 블로그, 운영 TIP 모음 -2-

📌 애드센스 블로그, 운영 TIP 모음 -2-

 

SNS, 카카오톡, 페이스북, 트위터 공유 버튼 달기

SNS, 카카오톡, 페이스북, 트위터 공유 버튼 달기