삶의 소비 중계석
블로그 배너가 뿌옇게 보이시나요?
티스토리 오디세이 스킨을 사용 중이라면 기본 설정된 "어두운 오버레이(필터)" 때문일 수 있습니다.
저는 HTML, CSS는 전혀 모르는 사람이지만, 그록3의 도움을 받아 이 문제를 해결했어요.
저처럼 블로그 초보이신 분들께도 도움이 되기를 바라며, 이 과정을 정리해 드립니다.
코딩 몰라도 가능한 티스토리 스킨 CSS 편집 : 배너 오버레이 제거 방법
스킨 편집 찾는 방법
블로그 관리 →꾸미기→스킨 편집을 누릅니다.
우측에 스킨 편집 창에 'html 편집'을 클릭합니다.
팝업창이 뜨면 '확인'을 누릅니다.
블로그 배너 CSS 코드 찾고 수정하는 방법
블로그 스핀 편집창으로 이동하면 좌측엔 미리 보기 창이 보이고 우측엔 코드창이 보입니다.
코드창 상단에 세 가지 항목이 보입니다.
html, CSS, 파일 업로드
1. 세 가지 항목 중에 'CSS'를 누릅니다.
2. 마우스를 코드로 이동해서 클릭합니다.
3. Ctrl + F를 누르면 안 보이던 입력창이 보입니다.
입력창에 "background-color"를 입력합니다.
입력창 옆에 해당 코드가 몇 개 인지 그중에 지금 확인하는 것이 몇 번째 것인지 숫자로 확인할 수 있습니다.
숫자 옆에 위, 아래로 향하는 화살표를 누르면 순서를 따라서 해당 단어로 이동합니다.
검색된 CSS 코드 중에서 체크 박스 같은 컬러 박스가 있고 "rgba(58, 58, 58, 0.3);"이라고 입력되어 있는 것을 찾습니다.
컬러 박스에 마우스를 가져가면 색상표가 나타납니다.
rgba 옆에 괄호 안에 있는 숫자 3개는 컬러 번호입니다. 제일 끝에 있는 소수점이 있는 숫자가 색상의 투명도를 의미합니다.
색상표에 있는 동그라미를 마우스로 드레그 해서 원하는 색이 있는 곳으로 이동합니다.
색이 바뀜에 따라 컬러 번호도 해당 색 번호로 바뀝니다.
색상표에서 원하는 컬러를 선택 후 '미리 보기' 버튼을 눌러서 확인해 보세요.
컬러만 변경했을 때는 블로그 배너 이미지가 선명하게 보이지 않습니다.
블로그 배너 이미지가 선명하게 보이게 하기 위해서는 투명도를 '0.0'으로 조절해야 합니다.
💡Tip
Q : 블로그 배너 이미지를 입력했는데 왜 안보이죠?
A : 그럴 때는 화면 비율을 조절해 보세요.
배너 이미지 크기에 따라 다르긴 하지만 보통 화면 비율이 75%~125%일 때 배너 이미지가 보였습니다.
Q : 코드를 입력하다가 잘못 입력했는데 어떻게 하죠?
A : '적용' 버튼을 누른 것이 아니라면 '새로고침' 버튼을 누르면 원래 입력됐던 코드가 적용됩니다.
이전에 바꾼 코드가 많다면 번거로울 수 있으나 잘못 입력한 코드가 적용되어 블로그 디자인이 이상하게 변경되고 다시 그것을 찾고, 변경하는 것보다는 낮습니다.
가장 좋은 방법은 CSS 코드를 변경하기 전에 백업을 해 놓는 것입니다.
CSS 코드 백업 방법은 코드 편집창으로 이동했을 때 보이는 현재 코드 전체를 복사 후 PC에 메모장이나 노션 등 별도의 텍스트 파일에 붙여 넣기 해서 저장하시면 됩니다.
CSS 코드 편집창에서 아무 부분이나 클릭한 후 Crtl + A를 누르고 Crtl + C를 누르면 코드 전체를 복사할 수 있습니다.
📢 주의 사항
코드 변경 시 내가 원하는 대로 바뀌었는지 확인하는 것은 꼭 '미리 보기'로 합니다.
'적용' 버튼은 코드 변경 후 미리 보기로 적용된 것을 확인 후 가장 끝에 누릅니다.
AI 도구를 어떻게 사용하시나요?
저는 코드에 대해서는 지식이 전무합니다.
블로그 캐릭터를 만들어 다양하게 이용하려고 블로그 배너 이미지를 만들었는데 오디세이 스킨을 사용하는 상태에서는 어두운 필터가 적용되어 제가 원하는 느낌이 안나는 겁니다.
며칠을 검색하면서 문제를 해결할 방법을 찾는데 코드에 대해 문외한인 저는 무슨 말인지 모르겠었습니다.
그래서 챗GPT에게 질문을 하고 답해준 것을 적용해보려고 하는데 해당 코드를 찾는 것 자체가 어려웠습니다.
이번 포스팅으로 소개해 드린 오디세이 스킨에 적용되어 있는 어두운 오버레이를 제거하는 방법을 그록3에 질문해서 얻은 답변을 적용해서 성공하게 되어 여러분께 제 경험을 알려드린 겁니다.
AI이지만 코드 변경에 대한 답변은 챗GPT 보다는 그록3가 훨씬 정리가 잘 되어 있어서 적용하기 좋았습니다.
요즘 구글 AI 제미나이가 업그레이드되었다고 하는데 각각의 AI가 특화되어 있는 분야가 있는 것 같습니다.
AI 시대에 필요한 AI를 모두 구독할 수는 없지만 무료로 사용하는 선에서 다양한 AI 툴을 사용해 보세요.
똑같은 질문을 해도 해당 분야에 따라 다른 답변을 얻을 수 있습니다.
그중에 본인에게 필요한 답변을 잘해주고 원하는 기능을 잘 수행해 주는 AI를 선택해서 사용하시면 좋겠습니다.
용기를 내세요!
티스토리 블로그 스킨 편집을 하려고 하면 html 및 CSS 편집으로 인해 발생하는 문제를 해결할 수 없을 것 같아 겁이 나서 시도를 못하고 있었습니다.
하지만 그런 위험을 감수하고서라도 어두운 오버레이를 제거하고 싶은 마음이 컸습니다.
요즘은 AI가 있어서 지식이 없는 분야에 대해 물어볼 곳이 있어서 좋습니다.
제가 이 방법을 시도해서 성공했으니 여러분도 AI 사용도, 블로그 스킨 변경도 할 수 있습니다.
저의 글이 같은 문제로 고민하는 분들께 작은 용기를 드릴 수 있었으면 좋겠습니다.
'블로그 > 블로그 운영 팁' 카테고리의 다른 글
| 초보자도 할 수 있는 티스토리 블로그 프로필 배경 이미지 삽입 방법 (7) | 2025.06.05 |
|---|---|
| tistory 블로그 스킨 편집 기능으로 바꾸기 (4) | 2025.06.03 |
| 5월 통계로 살펴보는 티스토리 블로그 리뷰 (5) | 2025.06.01 |
| 티스토리 블로그 추가로 만들기 (1) | 2025.05.16 |
| 티스토리 블로그 서식 만들기 (4) | 2025.05.13 |