코딩 및 개발언어(웹, 앱, 블록체인)

티스토리 블로그 오류 해결 가이드

aukibary 2025. 2. 15. 23:02
반응형

티스토리 블로그를 운영하다 보면 HTML 오류, CSS/JS 충돌, 관리자 페이지 접속 문제 등 다양한 오류를 겪을 수 있습니다. 이러한 문제들은 블로그의 가독성을 떨어뜨리고 검색 노출에도 악영향을 미칠 수 있습니다. 이번 포스팅에서는 자주 발생하는 오류와 해결 방법을 단계별로 한 번에 정리해 보겠습니다.

티스토리 블로그 오류 해결 가이드

1. HTML 코드 오류 해결 방법

**HTML(HyperText Markup Language)**는 웹페이지를 구조화하는 언어로, 태그를 이용하여 문서를 작성합니다. 예를 들어 <h1> 태그는 제목을, <p> 태그는 문단을 정의합니다. HTML 코드가 올바르지 않으면 웹페이지가 예상대로 표시되지 않을 수 있습니다.

1-1. W3C Validator를 이용한 코드 검증

웹 표준을 준수하면 블로그의 안정성을 높일 수 있습니다. W3C Validator를 사용하면 HTML 코드에서 발생하는 오류를 쉽게 확인할 수 있습니다.

✅ 검증 방법

  1. W3C Markup Validator에 접속합니다.
  2. 블로그 URL을 입력하거나 HTML 소스를 직접 붙여 넣습니다.
  3. 오류 및 경고 메시지를 확인한 후, 해당 부분을 수정합니다.

✅ 자주 발생하는 오류 예시 및 해결책

오류 유형원인해결 방법

<div> 태그가 닫히지 않음 <div> 태그를 열고 닫지 않음 </div>를 추가하여 태그를 올바르게 닫음
<p> 태그 중첩 문제 <p> 태그 안에 또 다른 <p> 태그 포함 <p> 대신 <span> 또는 <div> 사용
<img> 태그의 alt 속성 누락 이미지 SEO에 영향 alt 속성을 추가하여 이미지 설명 제공

1-2. 닫히지 않은 태그 문제 해결

태그를 열었으면 반드시 닫아야 합니다. HTML 태그가 중첩되어 있거나 닫히지 않았을 때 페이지 레이아웃이 깨질 수 있습니다.

✅ 잘못된 코드 예시

<div>
    <p>이 문장은 문법적으로 올바르지 않습니다.
    <div>새로운 섹션</div>
</div>

✅ 올바른 코드 예시

<div>
    <p>이 문장은 올바른 문법을 따릅니다.</p>
    <div>새로운 섹션</div>
</div>

✅ 중첩 태그 오류 해결

  • <b><i> 텍스트 </b></i>와

2. CSS 및 JavaScript 충돌 문제 해결

**CSS(Cascading Style Sheets)**는 HTML 요소들의 스타일(색상, 크기, 배치 등)을 정의하는 언어입니다. 잘못된 CSS 설정은 블로그의 디자인을 깨뜨릴 수 있습니다.

**JavaScript(JS)**는 웹페이지에서 동적인 기능(버튼 클릭, 애니메이션 등)을 구현하는 언어입니다. JS 오류가 발생하면 특정 기능이 작동하지 않을 수 있습니다.

2-1. CSS 충돌 문제 해결

스킨을 변경하거나 새로운 스타일을 추가했을 때 기존 스타일과 충돌이 발생할 수 있습니다.

✅ 해결 방법

  1. CSS 우선순위 확인 → 같은 요소에 여러 스타일이 적용되었을 경우, 어떤 스타일이 우선 적용되는지 확인합니다.
  2. CSS 파일 정리 → 필요 없는 CSS 파일을 정리하고, 스타일을 명확하게 지정합니다.
  3. 개별 스타일 적용 → →. post-content table {... }처럼 특정 범위를 지정하여 전역 스타일과 충돌을 방지합니다.

✅ CSS 충돌 예시 및 해결

문제 원인 해결 방법
본문 글꼴이 스킨 기본값으로 되돌아감 외부 폰트가 적용되지 않음 !important를 추가하여 스타일 우선 적용
특정 버튼이 사라짐 display: none; 속성이 적용됨 display: block;으로 변경

2-2. JavaScript 오류 해결

✅ 자주 발생하는 오류 및 해결 방법

오류 메시지 원인 해결 방법
Cannot read properties of null (reading 'click') 특정 요소가 존재하지 않음 if (element) { element.click(); }로 예외 처리
Uncaught ReferenceError: X is not defined X 변수가 정의되지 않음 변수 선언 추가 (var X = ...; 또는 let X = ...;)
initTracker is not a function initTracker 함수가 정의되지 않음 typeof X !== 'undefined' && X.initTracker 조건 추가

✅ JavaScript 코드 예제 (이벤트 오류 해결)

// 요소가 존재할 때만 클릭 이벤트 추가
if (document.querySelector('.admin-button')) {
    document.querySelector('.admin-button').addEventListener('click', function() {
        alert('관리자 레이어가 활성화되었습니다!');
    });
}

3. 관리자 페이지 오류 해결

**쿠키(Cookie)**는 웹사이트가 사용자 정보를 저장하는 작은 데이터 파일입니다. 쿠키가 잘못 저장되면 로그인 오류나 관리자 페이지 접근 문제가 발생할 수 있습니다.

3-1. HTTP 400 오류 해결 (로그인 및 관리자 페이지 접속 문제)

✅ 증상: 로그인 시 "HTTP ERROR 400" 메시지가 표시되며 관리자 페이지 접속 불가

✅ 해결 방법

  1. 브라우저 쿠키 삭제 방법
  2. 크롬 브라우저에서 주소창에 chrome://settings/siteData 입력 후 Enter 키를 누릅니다.
  3. 검색창에 tistory.com을 입력하여 해당 쿠키를 찾습니다.
  4. tistory.com 쿠키를 선택한 후 삭제 버튼을 클릭합니다.
  5. 브라우저를 닫고 다시 열어 티스토리에 로그인합니다.

VPN 사용 여부 확인 방법

  1. 현재 VPN이 활성화되어 있는지 확인하려면 시스템 트레이(Windows) 또는 메뉴 바(macOS)에서 VPN 아이콘을 확인합니다.
  2. 활성화된 경우 VPN을 끄고 다시 로그인해 봅니다.
  3. 인터넷 속도 테스트를 진행하여 VPN이 연결 속도에 영향을 주는지 확인할 수도 있습니다.
  4. 여전히 문제가 발생한다면 VPN을 완전히 제거한 후 다시 시도해 봅니다.
  5. 다른 브라우저에서 접속 테스트 → 크롬에서 오류가 발생하면 Edge 또는 Firefox에서 접속 시도
  6. VPN 사용 여부 확인 → 특정 IP 차단이 원인일 수 있음. VPN을 끄고 시도

3-2. 관리자 메뉴 클릭 오류 해결

✅ 증상: 관리자 페이지에서 버튼 클릭이 되지 않거나 설정 창이 열리지 않음

✅ 해결 방법

  • 브라우저 캐시 삭제 (Ctrl + Shift + Del → 캐시 및 쿠키 삭제 후 새로고침)
  • 광고 차단 프로그램(AdBlock 등) 비활성화 후 다시 시도

✅ F12(개발자 도구)로 광고 차단 감지 및 비활성화 방법

  1. 크롬 브라우저에서 F12 키를 눌러 개발자 도구를 엽니다.
  2. Console(콘솔) 탭을 클릭하고, 오류 메시지를 확인합니다.
  3. AdBlock, uBlock Origin 등의 광고 차단 확장 프로그램이 스크립트를 차단하고 있는지 확인합니다.
  4. 광고 차단 프로그램 아이콘을 클릭한 후, 이 사이트에서 비활성화 또는 일시 정지 옵션을 선택합니다.
  5. 페이지를 새로고침하고 관리자 기능이 정상적으로 작동하는지 확인합니다.
  • JavaScript 오류 확인 (F12 → Console 탭에서 에러 메시지 확인)

 

반응형
저작자표시 비영리