친절한효자손 취미생활

이번 친효애드온은 본문에 종종 사용하는 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%가 적용된 상태 입니다.


TIP

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 항목에 적당히 빈 공간을 확보하시고 그대로 붙여넣기 하시면 됩니다. 그리고 오른쪽 상단의 적용 버튼을 눌러 테스트해 보시기 바랍니다. 이제 여러분들도 원하는 색상대로 원하는 키워드 부분을 이쁘고 멋지게 강조하실 수 있습니다. 끝.





당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. 언제나 소중한 글 감사드립니다.
    현재 1.1버전이라.. 1.4버전 기다리고 있는데
    1.4 올린 후 바로 적용해보아야겠습니다!
    2019.08.31 13:59 신고
    • 안녕하세요, 오늘 자정에 1.14 버전으로 업로드 하겠습니다. 감사합니다.
      2019.08.31 17:39 신고
  2. 효자손님 안녕하세요, 굵게 bold 가 어떤 느낌인지 우선 한번 보려고 언급하신 대로
    font-weight: normal; 해당 줄을 지워보았는데 형광펜 효과는 적용이 되지만 bold체가 적용이 안됩니다

    normal 대신에 bold로 입력을 해 보았는데도 bold 적용이 안됩니다.. 제가 뭔가 놓치고 있는게 있을까요?

    2020.02.25 18:41 신고
  3. 효자손님, 몇번을 지우고 다시해봐도.. bold를 입력해도, 통째로 font-wieght: normal; 줄을 삭제해도 두껍게(bold) 적용이 되지 않습니다.. 다른 이유가 있을까요ㅜㅜ 이거만 계속 해결이 안되네요..
    2020.02.25 20:44 신고
  4. 효자손님, 친효애드온 들이 html/css 적용을 하면 워드프레스 에도 적용이 될까요..?
    2020.02.26 21:00 신고
  5. 워드프레스에는 제가 할줄 몰라서 그런지.. 적용이 어렵네요ㅜㅜ

    효자손님 혹시 굵게(bold)를 눌렀을 때 형광펜이 적용되는 것과 별도로

    글쓰는 중에 특정 버튼을 눌러서 다른 색의 형광펜 효과를 적용할 수는 없을까요?

    배경색을 단순히 눌러서 하는 건 radius도 없고 투명도 조절이 안 되는 직사각형의 배경색만 입혀지는데..

    다른 방법이 있을까요? 매번 감사합니다!
    2020.02.29 13:02 신고
    • 티스토리에서 제공하는 기본 클래스명에 대해 별도로 css 매소드를 만들어 적용하면 될거라고 생각합니다.
      2020.02.29 13:54 신고
  6. 안녕하세요.

    스킨 변경했더니, 전체적으로는 좋은데, 세세한 것이 기존 것하고 조금씩 달라서 문의 드립니다.

    한글은 그러지 않은 데, 영어 문장은 한 단어인데 잘라서 밑으로 내려오네요.

    기존에는 그래서 모든 글은 왼쪽 정렬로 사용해서 글을 썼는데요.
    글을 왼쪽 글로 하려면 어떤 코드를 손봐야 할까요? 영어 글씨가 잘려서 아직 모바일 버전에는 바뀐 스킨을 적용을 일단 해제했는데, pc에서도 많이 잘려 나오네요..

    시간되실 때, 알려주시면 고맙겠습니다.

    참고는 저는 모든 글을 "구에디터"로 작성했습니다.
    2020.03.22 19:41 신고
    • 안녕하세요, 영어가 한 단어로 잘려서 내려온다는 개념이 혹시 이건가요? 예를들어 apple 사과를 입력하면 이게 일부 잘려서 내려오는건가요? ap 하고 다음줄부터 ple 로 나오는건가요? 만약 그렇다면 친효스킨 구조상 그렇게 설계가 되어 있습니다. 이걸 변경하고 싶으시다면 포스팅을 해 두도록 하겠습니다만 예약포스팅이기에 업로드는 시간이 오래 걸릴 것 입니다.
      2020.03.22 19:52 신고
    • 네.. 잘 알겠습니다.
      일단 다음 포스팅까지 기다려야겠네요.
      감사합니다.
      2020.03.22 19:56 신고
    • 예시로 말씀드린 증상 맞긴 맞나요?
      2020.03.22 19:57 신고
  7. 네 맞습니다. 잘린 포스팅이 많아서 엔터 쳐서 내리고 있습니다. 감사합니다.
    2020.03.22 20:01 신고
  8. 안녕하세요.

    정보를 찾아서 pc에서는 일단 코드를 수정해서 영단어 좌측 정렬이 되게 했습니다. 모바일 엡연결을 설정을 해지 하면 일부 문서가 화면이 불완전하여 자동 연결로 다시 바꾸었는데 추후 보완할 예정입니다.

    저는 블로그 생태계가 어떠하고 무엇인지 잘 모르지만 효자손님과 같은 분이 계셔서 참 다행스럽고 고맙게 생각합니다.
    좋은 하루 마무리 하세요.
    감사합니다.
    2020.03.25 21:03 신고
  9. 전 지금 dakpo 스킨을 사용하고 있습니다. 다른 스킨에서도 사용할 수 있지요?

    다음과 같이 css에 넣었는데 전 안되네요.

    /* 친효애드온: 본문 글씨 두껍게 스타일 시작 */

    .tt_article_useless_p_margin > p > b {
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: normal; /*폰트 굵기 해제*/
    color: rgba(30,116,229,0.2); /*폰트 색상*/
    background-color: rgba(255, 0, 118, 0.3); /*형광팬 - 백그라운드 색상*/
    }
    /* 본문 글씨 두껍게 스타일 끝 */
    2020.04.25 10:48 신고
    • 해당 스킨을 살펴보니 클래스명이 다르네요. .tt_article_useless_p_margin 이것을 지우시고 .content-article 로 변경하면 될 겁니다.
      2020.04.25 17:20 신고
  10. 그대로 붙여 넣기를 했는데 형광팬 적용이 안됩니다..
    저만 그런건가요?
    2020.05.14 19:34 신고
    • 안녕하세요, CSS 세팅 후 단독으로는 안 되고, 볼드(B) 처리를 해야 합니다.
      2020.05.14 22:12 신고