블로그를 운영하다 보면 남들과 똑같은 디자인에서 벗어나 나만의 개성을 담고 싶을 때가 많습니다.
특히 글자 색상이나 특정 요소의 배경색을 바꾸는 컬러링 작업은 블로그의 첫인상을 결정하는 매우 중요한 요소이죠.
이번 포스팅에서는 HTML과 CSS를 전혀 모르는 초보자분들도 아주 쉽게 따라 할 수 있는 스킨 컬러링 변경 방법을 자세히 알려드릴게요.
2026.07.03 - [분류 전체보기] - 2026년 무료 운세 사이트 정리! 회원가입 없이 바로 보는 곳 TOP 5
2026년 무료 운세 사이트 정리! 회원가입 없이 바로 보는 곳 TOP 5
새로운 해를 맞이하면 누구나 한 번쯤 앞으로의 운명이 궁금해지기 마련입니다.요즘은 복잡하게 철학관을 찾아가지 않아도 인터넷으로 높은 퀄리티의 사주를 볼 수 있어요.특히 개인정보 노출
vdt.doumlog.com
2026.07.03 - [분류 전체보기] - 이름 짓기 사이트 추천 및 뜻이 좋은 한자 작명 가이드
이름 짓기 사이트 추천 및 뜻이 좋은 한자 작명 가이드
소중한 아이의 태명이 아닌 평생 불릴 진짜 이름을 고민하는 순간은 부모에게 가장 설레면서도 무거운 책임감이 따르는 시간입니다. 요즘은 철학관에 직접 찾아가지 않더라도 컴퓨터나 스마트
vdt.doumlog.com
1. 티스토리 블로그 컬러링을 변경해야 하는 이유
블로그의 색상 조합은 단순히 보기 좋은 것을 넘어 가독성에 엄청난 영향을 미칩니다.
텍스트와 배경의 대비가 명확하지 않으면 방문자가 글을 읽다가 쉽게 피로함을 느끼고 이탈하게 되죠.
또한, 나만의 시그니처 컬러를 사용하면 블로그의 정체성을 확립하고 전문적인 느낌을 전달할 수 있습니다.
클릭을 유도해야 하는 링크나 중요한 강조 문구의 색상을 최적화하면 체류 시간 상승도 기대할 수 있어요.
2. CSS 편집 창 진입 및 기본 구조 이해하기
컬러링을 바꾸기 위해서는 가장 먼저 티스토리 관리자 페이지에서 CSS 편집 창으로 이동해야 합니다.
블로그 관리 홈에서 [꾸미기] -> [스킨 변경] -> [html 편집] 버튼을 차례대로 클릭해 주세요.
오른쪽 상단에 나오는 메뉴 중 [CSS] 탭을 선택하면 블로그의 스타일을 제어하는 복잡한 코드들이 나타납니다.
여기서 우리가 주목해야 할 것은 색상을 뜻하는 'color' 속성과 배경을 뜻하는 'background-color' 속성입니다.
3. 헥사 코드(Hex Code)를 활용한 색상 값 찾기
웹에서 색상을 표현할 때는 보통 '#' 기호와 6자리의 숫자/문자로 이루어진 헥사 코드를 사용합니다.
예를 들어 완전한 검은색은 #000000이고, 깨끗한 흰색은 #ffffff로 표현하는 방식이죠.
원하는 색상의 코드를 찾으려면 구글에 '색상 선택기'를 검색하거나 디자인 사이트를 활용하시면 편리합니다.
마음에 드는 색상의 6자리 코드를 미리 메모장에 복사해 두면 다음 단계에서 아주 유용하게 쓰입니다.
4. 본문 글자 색상 및 링크 컬러 변경하는 방법
이제 본격적으로 코드를 수정해 볼 텐데, 가장 먼저 기본 본문 글씨 색상을 변경해 보겠습니다.
CSS 창에서 `Ctrl + F`를 누르고 `body` 또는 `article` 혹은 `.entry-content`를 검색해 주세요.
해당 중괄호 내부에서 `color: #333333;`과 같은 부분을 찾아 준비한 헥사 코드로 덮어쓰면 됩니다.
링크 색상을 바꿀 때는 `a { color: #원하는코드; }` 형태의 소스를 찾아 수정하시면 일괄 변경이 가능합니다.
5. 마우스 드래그 블록 배경 색상(Selection) 바꾸기
방문자가 블로그의 글을 마우스로 드래그했을 때 나오는 블록 색상도 센스 있게 바꿀 수 있습니다.
이 기능은 기본 스킨 설정에 없는 경우가 많아서 CSS 맨 아래에 코드를 직접 추가해 주어야 해요.
CSS 편집 창 가장 아래쪽으로 스크롤을 내린 뒤, 아래의 코드를 그대로 복사해서 붙여넣어 보세요.
`::selection { background-color: #b3d4fc; color: #ffffff; }` 형태로 입력하고 적용을 누르면 끝납니다.
6. 주요 블로그 요소별 CSS 속성 요약표
어떤 부분을 수정해야 할지 헷갈리는 분들을 위해 자주 바꾸는 요소들의 CSS 선택자를 정리해 드립니다.
| 변경하고 싶은 요소 | CSS 선택자 (예시) | 적용할 속성명 | 비고 |
|---|---|---|---|
| 블로그 전체 배경 | body | background-color | 전체 톤앤매너 결정 |
| 본문 텍스트 컬러 | .entry-content p | color | 가독성을 위해 어두운 톤 권장 |
| 제목 글씨 (H2) | .entry-content h2 | color, border-left | 포인트 컬러 적용하기 좋음 |
| 텍스트 링크 색상 | .entry-content a | color | 일반 글씨와 확실히 구분되게 설정 |
| 마우스 드래그 색상 | ::selection | background-color | 블로그 시그니처 컬러 추천 |
개인 의견
블로그 스킨의 컬러링을 변경할 때 가장 중요한 점은 과유불급을 실천하는 것이라고 생각합니다.
개성을 표현하고 싶은 마음에 너무 알록달록하게 많은 색상을 쓰면 오히려 조잡해 보이고 글에 집중하기 어려워집니다.
기본 바탕은 깔끔한 화이트나 연한 그레이로 잡고, 포인트 컬러는 최대 2개까지만 지정하여 정돈된 느낌을 주는 것을 강력히 추천해 드립니다.