티스토리 링크버튼 PC에만 보이고 모바일엔 안 보일 때, 문제 해결법

티스토리 블로그를 운영하다 보면 ‘바로 신청하기’, ‘대상자 조회하기’ 같은 티스토리 링크버튼을 넣게 되요.

인터넷 블로그나 유튜브를 조금만 찾아보면 방법을 쉽게 설명해 주고 있고, 챗GPT를 활용해서 HTML/CSS로 직접 만드는 경우도 있을거에요.

그런데 컴퓨터(PC)에서는 버튼이 예쁘게 보이는데, 모바일에서는 그냥 텍스트 링크처럼 보이는 문제... 혹시 겪어보셨나요?

저는 블로그 왕초보라 저는 어제 버튼 적용하는 것을 배웠는데, 제가 바로 그렇더라고요.

왜 그럴까? 이 글에서는 제 경험을 바탕으로, 누구나 쉽게 따라 할 수 있는 해결 방법을 정리해 드릴게요.

먼저, 문제가 꼭 CSS 문법 오류나 선택자 우선순위 때문만은 아닙니다.

제가 겪은 핵심 원인은 생각보다 허무했는데요.

[티스토리 앱]의 제한된 렌더링 엔진
모바일 브라우저(크롬, 사파리 등)에서는 버튼이 잘 보였지만, 티스토리 앱 내에서는 버튼 스타일이 거의 무시됐어요.
즉, 앱에서는 display: flex, box-shadow, border-radius 같은 CSS 속성이 일부 제한되거나 무시되더라고요.

쉽게 말해서 [티스토리 앱] 에서는 내가 링크버튼을 넣은 글을 아무리 열어보고 새로고침을 해봐도, 버튼은 구현되지 않고 그냥 파란 글씨의 링크만 보인다는 것이에요.

실제로 제가 이 경우였고, 모바일 - 다음 웹 - 에서 제가 쓴 글 제목을 검색해서 들어가보니 티스토리 링크버튼이 스타일대로 잘 구현되는 걸 볼 수 있었습니다.

이 경우라면 별다른 수정 없이 그냥 만들었던 링크버튼 HTML코드를 계속 사용하시면 됩니다.

첫번째 외에 또다른 주 원인은 아래와 같습니다.

CSS가 PC 중심 미디어쿼리 안에 있어서
버튼 스타일이 @media (min-width: 1024px) 같은 PC 위주 조건 안에 들어 있으면, 화면이 좁은 모바일에서는 아예 적용이 안 돼요.

이 두 가지의 경우 “컴퓨터에서는 버튼 → 모바일에서는 일반 링크처럼 보이는” 현상이 나타납니다.

따라서, 먼저 티스토리 앱에서 문제를 발견했다면 '다음'에서 내 글을 검색해 링크버튼이 잘 나오는지 먼저 체크하고, 그다음 CSS 보완을 하면 돼요.

결론: [티스토리앱]에서 링크버튼이 보이지 않아도 브라우저에선 정상적으로 보인다면, 그냥 사용하셔도 됩니다. 어차피 모바일 브라우저에서 검색을 통해 제 글을 보는 분들에게는 버튼링크가 정상적으로 보일테니까요.

이때 주의하실 점은 다음 등 웹 브라우저가 로그아웃 상태인지 확인하는 것입니다.

티스토리에 사용하고 있는 아이디와 같은 아이디로 로그인 되어있는 경우 - 똑같이 링크버튼이 구현되지 않는다는 사람들도 있어서, 꼭 로그아웃 상태로 검색 후 확인해보시길 추천드립니다.

검색엔진에서 내 글을 검색해 확인해봐도 여전히 제대로 구현되어있지 않다면, 아래 방법들을 순서대로 적용하면서 매번 확인해보면 좋아요.

[A. CSS를 모든 화면에 적용되도록 (미디어쿼리 밖으로 이동)]

버튼 CSS가 @media (min-width: ...) 같은 조건 안에 있다면, 조건 밖(공통 영역)으로 옮기세요.

간단히 말하면 컴퓨터에서 [블로그 관리] - [꾸미기] - [스킨 편집] - [html 편집] - [ccs] 에 들어가서, 링크버튼을 만들기 위해 삽입했던 CCS를 제일 아래쪽으로 옮겨주시면 됩니다.

처음부터 제일 아래에 삽입하셨다면 이상이 없는거에요!

이 아래부터는 챗GPT에서 알려준 수정 방법이에요.

솔직히 저는 전문가가 아니라서, 봐도 무슨말인지 모르겠더라구요..

대부분의 원인이 위의 두가지 케이스기 때문에, 티스토리 링크버튼이 잘 나오는지 다시 확인 해보시고 아직도 안된다면 아래로 넘어가보시는게 좋을 것 같습니다.

[B. 더 구체적인 선택자로 덮어쓰기]

티스토리 기본 스킨 내에 a { text-decoration: underline; background: none; } 같은 스타일이 있을 수 있어요.
그걸 덮기 위해 아래처럼 쓰면 좋아요:

body[id^="tt-"] .article_view a._my-button { /* 버튼 스타일 전체 복붙 */ }

body[id^="tt-"] .article_view a._my-button 이렇게 쓰면 우선순위 높아져서 기본 링크 스타일을 덮을 가능성이 커요.

[C. 모바일 터치 반응 스타일 추가]

모바일은 :hover보다 :active가 중요해요. 터치할 때 시각적 반응 없으면 그냥 링크처럼 느껴지니까요.

body[id^="tt-"] a._my-button:active { transform: scale(0.98); }

D. 좁은 화면 대응

화면이 작을 땐 버튼이 너무 커지면 보기 안 좋을 수 있으니, 이런 규칙을 추가해 주세요:

@media (max-width: 768px) { body[id^="tt-"] a._my-button { width: 100% !important; padding: 14px 18px !important; font-size: 16px !important; } }

[E. 캐시 & CSS 위치 확인]

점검 항목확인 방법

모바일 브라우저에서 버튼 보이는가?	스마트폰 크롬/사파리로 글 열기
티스토리 앱에서 버튼 보이는가?	티스토리 앱으로 글 열어보기
CSS 수정 후에도 모바일에서 여전히 링크처럼 보이나?	CSS가 마지막에 있는지 / 선택자가 덮어쓰기 잘 되었는지 확인
:active 스타일이 있는가?	터치했을 때 약간 크기가 줄거나 색 변화가 있는지 확인
화면 폭 작을 때 버튼 깨지지 않는가?	모바일에서 버튼이 화면 폭 가득으로 적절히 나오면 OK