(티스토리) 본문에 형광펜 효과 주는 방법

본문에 형광펜 효과 주기

HTML 태그 중에는 B, I, U, S 태그가 있습니다. 글씨를 굵게 / 기울임꼴 / 밑줄 / 취소선을 표현하는 태그입니다. 티스토리 블로그에서는 이 태그를 활용하여 특정 문구를 강조하는 형광펜 효과를 낼 수 있습니다.

태그명

우선 각자의 태그 명을 알아보도록 하겠습니다.

 

굵게

단축키 : (윈도우) 컨트롤 + B  / (맥) 커멘드 + B

.tt_article_useless_p_margin>p>b

기울임꼴

단축키 : (윈도우) 컨트롤 + i  / (맥) 커멘드 + i

.tt_article_useless_p_margin>p>i

밑줄

단축키 : (윈도우) 컨트롤 + U  / (맥) 커멘드 + U

.tt_article_useless_p_margin>p>u

취소선

단축키 : (윈도우) 컨트롤 + D  / (맥) 커멘드 + D

.tt_article_useless_p_margin>p>s

참고로 취소선 단축키가 컨트롤 D 인데 크롬에서는 이미 단축키가 들어가있어서 사용하지 못합니다.

 

자 각자의 태그명을 알았으니 이제 형광펜 효과를 주기 위한 CSS를 작성해보도록 하겠습니다.

CSS

두꺼운 글씨

/*글씨 두껍게 형광펜*/
.tt_article_useless_p_margin>p>b {
    padding:2px 4px;
    border-radius:4px;
    /*폰트 굵기 해제*/
    font-weight:normal;
    /*폰트 색상*/
    color:rgb(0 0 0 / 80%);
    /*배경 색상*/
    background-color:#CCFDCC !important
}

padding

형광펜 상/하, 좌/우 두께를 지정합니다. px값이 클수록 두께가 커집니다.

 

border-radius

형광펜 모서리의 둥근 정도를 지정합니다. px값이 클수록 모서리가 둥글어집니다.

 

font-weight

normal(기본), bold(굵게)를 지정할 수 있으며, 숫자로는 100부터 900까지 100 단위로 지정할 수 있습니다. (normal은 400, bold는 700 굵기입니다.)

 

color

rgba(0, 0, 0 / 80%);

 

background-color

이제 이 요소마다 색상 값을 지정해주면 됩니다. 보통 rgba는 RGB에 Alpha(투명도)를 추가한 코드입니다. RGB는 0부터 255까지 표현되고, Alpha는 0부터 1까지 표현됩니다. 구글에서 RGB값을 검색하면 색상별 값을 확인할 수 있으니 원하는 값을 찾아 입력하면 되고, Alpha값을 0으로 하면 정말 투명해져서 색상 표시가 되지 않습니다.

 

만약 사용자가 굵은 글씨를 제외한 취소선이나 기울임 꼴을 자주 사용하지 않는다면 각자의 취향에 맞게 설정하는게 좋을거라는 생각이 드네요 :) 그럼 다른것도 알아볼까요?

기울임꼴

기울림꼴(i) 에는 기본적으로 font-style: italic; 가 포함되어있습니다. 그렇기때문에 아래 코드와 같이 스타일을 normal로 바꿔주면 기본 시스템에 있는 스타일은 자동적으로 탈락되고 사용자가 설정한 스타일이 표현되게 됩니다.

.tt_article_useless_p_margin>p>i {
    font-style: normal;
}

밑줄

밑줄(u) 에는 기본적으로 text-decoration: underline; 가 포함 되어있습니다. 텍스트 decoration을 none으로 바꿔주겠습니다.

.tt_article_useless_p_margin>p>u {
   text-decoration: none;
}

취소선

취소선(s) 에는 기본적으로 text-decoration: line-through; 가 포함 되어있습니다. 텍스트 decoration을 마찬가지로 none으로 바꿔주겠습니다.

.tt_article_useless_p_margin>p>s {
   text-decoration: none;
}

요약

/*글씨 두껍게 형광펜 공통 클래스*/
.tt_article_useless_p_margin > p > b,
.tt_article_useless_p_margin>p>i,
.tt_article_useless_p_margin>p>u,
.tt_article_useless_p_margin > p > s {
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: normal;
}
/*굵게*/
.tt_article_useless_p_margin > p > b {
    color: rgb(0 0 0 / 80%);
    background-color: #CCFDCC !important
}
/*기울임꼴*/
.tt_article_useless_p_margin > p > i {
    font-style: normal;
    color: rgb(255 255 255 / 80%);
    background-color: #ff5544 !important
}
/*밑줄*/
.tt_article_useless_p_margin > p > u {
    text-decoration: none;
    color: rgb(0 0 0 / 80%);
    background-color: #97bcea !important
}
/*취소선*/
.tt_article_useless_p_margin > p > s {
    text-decoration: none;
    color: rgb(0 0 0 / 80%);
    background-color: #fff57a !important
}

기본 스타일

현재 블로그에 적용된 스타일

 

굵게  /  기울기  /  밑줄  /  취소선