친효애드온 : 본문 글씨 두껍게 만드는 b태그 스타일을 형광펜처럼 변경
이번 친효애드온은 본문에 종종 사용하는 b태그 입니다. 이 태그는 bold의 줄임말로 말 그대로 "굵게" 라는 뜻을 가지고 있습니다. 지금 이 문장에도 세개의 b태그가 사용되었음을 육안으로 식별할 수 있습니다. 현재 b태그와 bold, 그리고 굵게 라고 하는 키워드에만 백그라운드 색상이 조금 다릅니다. 이것을 애드온으로 만들었습니다.
사용방법
티스토리 글쓰기 모드에서 위의 스크린샷 이미지에 표시된 저 아이콘을 사용해서 진행할 수 있습니다. 형광펜처럼 표현하고자 하는 키워드를 마우스로 드래그하여 블록을 잡고 그냥 저 아이콘만 한번 눌러주시면 됩니다. 그러면 HTML상에서 어떻게 표현이 될까요? 본문의 가장 첫번째 문장을 예시로 살펴보겠습니다.
<p>이번 친효애드온은 본문에 종종 사용하는 <b>b태그</b> 입니다. 이 태그는 <b>bold</b>의 줄임말로 말 그대로 <b>"굵게"</b> 라는 뜻을 가지고 있습니다. 지금 이 문장에도 세개의 b태그가 사용되었음을 육안으로 식별할 수 있습니다. 현재 b태그와 bold, 그리고 굵게 라고 하는 키워드에만 백그라운드 색상이 조금 다릅니다. 이것을 애드온으로 만들었습니다.</p>
HTML 상에서 살펴보면 이렇게 적용된 부분 키워드만 b태그로 감싸여 있는 모습입니다. 즉 이번 애드온은 본문에서 사용되는 b태그에 모두 적용이 되는 스타일 태그 요소로 구성되어 있습니다.
단, 적용되는 대상은 본문 내의 p태그로 이루어진 첫번째 자식 요소 부분입니다. 무슨 뜻이냐면 지금처럼 이렇게 본문에서 아무런 스타일이 적용되지 않은 글씨 부분에만 적용이 된다는 뜻 입니다. 예를 들어 이미지의 캡션 설명 부분이나 글박스 내의 텍스트, 혹은 인용구 부분에서는 적용이 되지 않는다는 뜻 입니다. 본문 내에서 존재하는 모든 b태그 부분에 적용하는 방법은 물론 있습니다만, 그렇게 되면 글이 지저분해 보일 수 있어서 일부러 해당 부분은 적용시키지 않았습니다.
CSS 세팅
이번 애드온은 HTML에서 세팅할 건 없습니다. 스타일 요소이므로 티스토리의 CSS에만 적용하시면 됩니다. 먼저 아래의 첨부파일을 다운로드 받아주시기 바랍니다. 참고로 친효스킨 1.14 이상 버전에는 본문의 애드온이 기본적으로 적용되어 있습니다.
친효애드온 - 본문 글씨 형광펜 스타일 CSS.txt다운로드 받으시고 열어보시면 아래의 내용이 담겨 있음을 확인하실 수 있습니다.
.tt_article_useless_p_margin > p > b {
padding: 2px 5px;
border-radius: 3px;
font-weight: normal; /*폰트 굵기 해제*/
color: rgba(0, 0, 0, 0.8); /*폰트 색상*/
background-color: rgba(255, 0, 118, 0.3); /*형광팬 - 백그라운드 색상*/
}
여기에서 쉽게 조작할 수 있는 부분은 주석으로 설명하고 있는 부분입니다. 자세한 설명은 다음과 같습니다.
font-weight: normal; ▶ 원래 b태그 스타일의 기본은 폰트가 두껍게 처리가 되는 것 입니다. 근데 왠지 두껍게 표현하니까 조금 보기가 싫더라구요. 그래서 기본 폰트 스타일처럼 나오도록 두께를 없앴습니다. 만약 여러분들은 두껍게 표현하고 싶으시다면 이 스타일을 삭제하시면 됩니다.
color: rgba(0, 0, 0, 0.8); ▶ 폰트 색상 부분입니다. 현재 기본 폰트 색상은 검정색에 80% 투명도가 들어가 있는 상태 입니다. rgb 색상코드에 대한 부분은 여기를 누르시면 원하시는 색상으로 쉽게 변경 가능합니다.
background-color: rgba(255, 0, 118, 0.3); ▶ 형광펜처럼 표현되는 백그라운드 색상 부분입니다. 현재 기본 형광펜 색상은 연분홍색에 투명도 30%가 적용된 상태 입니다.
rgba란? r은 Red, g는 Green, b는 Blue, a는 Alpha의 약자 입니다. 각각 빨강, 녹색, 파랑, 투명도에 대한 부분으로 빛의 3원색을 뜻합니다. RGB는 숫자 0부터 255까지 표현이 가능하며, a는 0부터 1까지 표현이 가능합니다. 0,0,0 은 RGB에 대한 아무런 효과가 없기 때문에 검정색으로 표현이 됩니다. 만약 여기에 알파값인 a가 0이 되면 이것은 투명도가 0%라는 의미가 되어 아무 색도 표현되지 않고 그냥 투명하게 처리가 됩니다. 0,0,0,1은 알파값이 1 이므로 투명도 100%가 되어 검정색 배경이 완성 됩니다. 255,255,255,0 또한 RGB가 다 만땅이어서 최종적으로 흰색으로 표현이 되지만, 투명도 0% 이기 때문에 색이 보이지 않고 투명하게 처리 됩니다. 255,255,255,1의 경우는 완전 흰색 배경이 완성이 됩니다.
이제 첨부파일을 자신의 스킨 편집 부분으로 들어가서 CSS 항목에 적당히 빈 공간을 확보하시고 그대로 붙여넣기 하시면 됩니다. 그리고 오른쪽 상단의 적용 버튼을 눌러 테스트해 보시기 바랍니다. 이제 여러분들도 원하는 색상대로 원하는 키워드 부분을 이쁘고 멋지게 강조하실 수 있습니다. 끝.
"친절한효자손 취미생활" 을 검색!
