티스토리 블로그 본문 글에 형광펜 효과 내기

HTML태그 중에 B태그가 있습니다. 글씨를 굵게 표현하는 태그로 한글문서에서는 Ctrl + B 로 효과는 냅니다. 티스토리 불로그는 이 B태그를 활용하여 특정 문구를 강조하는 형광펜 효과를 낼 수 있습니다.

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, 228, 0, 0.7);
    }

 

 

.tt_article_useless_p_margin > p > b

글을 작성하면 티스토리 치환자가 .tt_article_useless_p_margin클래스를 생성하여 본문을 감싸게 됩니다. 그래서 .tt_article_useless_p_margin > p > b 스타일을 지정하여, 본문 안에 > P태그 안에 > B태그에만 형광펜 스타일이 적용되도록 만들 수 있습니다.  

저는 처음에 B태그 자체에 스타일을 주었는데, 이러면 화면 전체의 B태그에 적용이 된다고 합니다. 다행히도 현재 사용중인 고래스킨에는 다른 곳에 B태그가 적용되어 있지 않아 크게 문제되지 않았습니다.

 

padding: 1px 3px; 

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

 

border-radius: 5px; 

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

 

font-weight: bold;

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

 

color: rgba(0, 0, 0, 0.8);

background-color: rgba(255, 228, 0, 0.7);

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