티스토리 뷰

애드센스 운영 TIP/티스토리&애드센스

티스토리 텍스트 배경색 글자색 자동으로 바꾸기

데브업 2024. 5. 13. 02:29

안녕하세요. 오렌지셔츠 입니다.

이번에는 저만의 글쓰기 노하우를 공유하고자 글을 작성합니다. 글을 발행할 때마다 매번 귀찮은 부분이 바로 텍스트 색상 변경이랑 배경색 변경하는 것이었는데요. 현재는 글을 쓸 때 색상을 변경하지 않고 키보드의 단축키만을 이용하여 텍스트 색상에 강조를 주고 있습니다.

왜 이렇게 제가 사용했는지에 대해 먼저 가볍게 알아보고 공유 해드리겠습니다.

텍스트 색상 변경 귀찮음

첫 번째로 귀찮음 이었습니다. 이게 가장 큽니다. 이거 말고 이유 없습니다. 편하기 글쓰기 에디터를 제공해 주었음에도 저는 매번 글을 작성할 때마다 매번 색상을 변경해 주는 작업이 귀찮았습니다. 이렇게 말이죠.

원하는 글자를 마우스로 드래그 한다음에 글자 색상도 바꿔야 하고 글자 배경색도 바꿔야 했습니다. 정말정말정말 귀찮습니다.

그나마 구에디터에서는 색상값이 브라우저 쿠키에 저장되어 있어서 구에디터를 실행할 때마다 값을 불러와 해당 색상코드를 입력해주었기 때문에 편했습니다. 하지만 제가 개발자라 그런지 이것조차 귀찮았습니다.

신에디터 에서는 이러한 기능조차(?) 없어서 매번 텍스트의 값을 변경해야하는 수고스러움이 있었습니다. 화면 처럼 말이죠. 어느 텍스트 들이던 간에 기본값은 검정색으로 되어 있어서 매번 클릭 클릭 해야했습니다.

텍스트 배경색 변경(기존)

기존에는 텍스트 배경색이랑 글자색 계속 위의 첫 번째 이미지 처럼 글자를 작성하고 드래그 한 다음에 색상을 바꿔 주었습니다.

위의 문장은 제가 수동으로 바꾸어서 적용 하였습니다. 배경색 바꾸는데 마우스 드래그 1번, 배경색 메뉴 클릭 1번, 배경색상 클릭 1번 총 3번의 작업이 들어갔고 글자색 또한 마찬가지로 총 3번의 작업이 들어갔습니다. 누가보면 정말 게으른 사람인줄 알겠네요...

텍스트 배경색 변경(현재)

제가 그나마 프론트엔드 개발자(html, css, javascript)라서 다행인 것과 티스토리 자체에서 CSS를 편집할 수 있게 해준 것에 대해 감사하고 있습니다.

저는 중요 문장이나 단어를 강조하고 싶을때에는 Ctrl + B를 하여 굵게 표시를 하곤 합니다. 아래의 이미지에도 나와있는 것처럼 말이죠.

내가 원하는 배경색과 글자색을 미리 세팅해 둔다면? 유레카!!

어라? 그러면 분명 글자 색상을 강조하는 곳에 내가 원하는 배경색과 글자색을 미리 세팅해 둔다면? 어떨까 생각해 보았습니다.

물론 지금은 이렇게 클릭하지 않고 글자만 키보드로 드래그 해서 굵게 표시만 해주면 되게끔 해두었습니다.

우선적으로 폰트의 굵게 하는 태그는 <b>태그 입니다. 이 부분을 소스 보기해서 찾아보기로 하였습니다. 아래처럼 역시나 <b>태그로 감싸져 있는 것을 볼 수 있습니다.

그러면 여기에다가 CSS 색상을 입혀주면 되는 것이지요. 대부분은 여기까지 생각하시는 분들도 계셨겠지만 CSS를 모르시면 어떻게 적용하는지도 모르고 이에 관련된 적용법 또한 찾기 힘드니 아래 내용을 보고 따라해보세요

스킨편집 - CSS

티스토리 관리자 메뉴에 가서 스킨편집을 해줍니다. [꾸미기 - 스킨편집] 클릭

HTML 편집을 눌러줍니다

CSS를 클릭해줍니다

CSS 적용

아래는 제가 적용한 소스 코드입니다.

.article 은 문서를 의미합니다. 우리가 작성하는 글은 <div> 혹은 <p> 태그 안에 전부 작성이 되서 저는 이렇게 2개씩 수정하였습니다. 또한 <a> 태그는 링크를 나타내기 때문에 링크에다가도 강조를 하고 싶어서 아래와 같이 변경을 하였습니다.

CSS 편집 내용

.article div b, .article p b { // 폰트 굵게 한 부분
background-color: rgb(98, 206, 91); // 배경색상
color: rgb(255, 255, 255); // 글자색상
}
.article div b a, .article p b a { // 폰트 굵게 링크 한 부분
color: white; // 글자색상
background: #f39c12; // 배경색상
}

실제 소스코드 적용 모습