티스토리 블로그_글 제목 배경 어둡게 수정하기_CSS

티스토리 글 제목 배경 수정하기

저는 북클럽 스킨을 사용하고 있습니다. 북클럽 스킨은 글 제목 배경에 대표 이미지가 들어가는 게 기본 값입니다. 글 제목은 하얀색이죠. 그렇다 보니 글 제목 글자가 잘 보이지 않는 것이 대부분입니다. 글 제목 배경을 어둡게 수정해 주어 글 제목 글자가 잘 보이도록 해보겠습니다.

목차

---

이 방법은 티스토리에서 기본으로 제공하는 Book Club 스킨을 기준으로 합니다.

티스토리 블로그 Book Club 스킨 (티스토리(tistory) 화면 캡처)

---

1. 글 제목 배경 코드 위치 찾기

"스킨 편집" - "html 편집" - "CSS" 편집 창에 들어갑니다. "커맨드 + F"를 눌러 검색창을 띄웁니다. (윈도우의 경우 "컨트롤 + F" 키입니다.) ".post-cover:before"를 입력하여 찾습니다.

.post-cover:before

↘여기서 복사 가능합니다.

티스토리 블로그 글 제목 배경 코드 위치 (티스토리 화면 캡처)

".post-cover:before" 코드 안에 보시면 "background-color: rgba(0,0,0,0.25);"가 있습니다.

---

1-1. RGBA란?

RGBA는 Red Green Blue Alpha의 약자로, 디지털 디자인과 컴퓨터 그래픽에서 사용하는 색상 모델입니다. RGBA 값은 색상의 빨강, 초록, 파랑의 양과 함께 투명도를 나타내는 알파 값으로 구성됩니다. 알파 값은 0(완전히 투명)에서 1(완전히 불투명)까지의 범위를 가지며, 이 색상 모델을 통해 다양한 수준의 투명도를 가진 다양한 색상을 만들 수 있습니다.

---

1-1-1. "rgba()"란?

"rgba()"는 CSS에서 사용되는 색상 표현 방식 중 하나입니다. 괄호 안에는 4개의 숫자값이 들어가며, 각각은 다음의 의미를 가지고 있습니다:

• 첫 번째 값은 빨간색(Red)의 강도를 나타냅니다. 이 값은 0부터 255 사이의 정수로 표현됩니다.
• 두 번째 값은 초록색(Green)의 강도를 나타냅니다. 마찬가지로 0부터 255 사이의 정수로 표현됩니다.
• 세 번째 값은 파란색(Blue)의 강도를 나타냅니다. 역시 0부터 255 사이의 정수로 표현됩니다.
• 네 번째 값은 투명도(Alpha)를 나타냅니다. 이 값은 0부터 1 사이의 실수로 표현됩니다. 0은 완전히 투명한 상태를 의미하고, 1은 완전히 불투명한 상태를 의미합니다.

"rgba()" 함수를 사용하여 색상을 정의할 때, 이 4개의 값으로 원하는 색과 투명도를 정확하게 조절할 수 있습니다.

---

2. 코드 수정하기

앞선 "rgba()" 함수에 대한 설명을 보건대, "rgba(0,0,0,0.25)"는 '빨간색 0, 초록색 0, 파란색 0, 투명도 0.25'라는 의미로 색상값은 없고, 1/4 정도의 투명도를 가지고 있다고 보시면 됩니다. 이 값을 원하는 대로 수정하시면 됩니다.

.post-cover:before { /* 글 제목 배경 */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.80); /* 배경색 */
}

저는 다른 건 손대지 않고 투명도만 0.8로 수정해 주었습니다.

티스토리 블로그 글 제목 배경 수정하기 (티스토리 화면 캡처)

값 수정 후 "새로고침"을 해보면 배경 이미지가 어두워져 글 제목이 더 잘 보이는 것을 확인할 수 있습니다. 모든 편집이 끝나고 나면 오른쪽 상단의 "적용" 버튼을 누르는 것을 잊지 마세요.

---

※ 검색 엔진 최적화(SEO) 수익형 블로그 만들기

이외에도 검색 엔진 최적화에 도움이 되는 다른 방법들은 아래 글에 정리해 두었습니다.

티스토리 블로그_수익형 블로그 검색 엔진 최적화(SEO) 설정

티스토리 블로그_배경색, 헤더 색깔, 블로그 이름 글자색 커스터마이징_CSS

티스토리 블로그_소제목(h2, h3, h4) 꾸미기_CSS

---