티스토리 블로그 사이드바 오류 [ 하단으로 내려가는 현상에 대한 해결 방법 ]

티스토리 블로그 사이드바가 하단으로 밀리는 문제 해결을 위한 팁

티스토리 블로그 사이드바 오류 주요 원인과 해결 방법

티스토리 블로그 사이드 오류 문제

티스토리 블로그를 운영하는 과정에서 종종 사이드바가 예상치 않게 하단으로 내려가는 경우가 있습니다. 이 문제는 레이아웃이나 스타일에 관련된 여러 가지 이유로 발생할 수 있습니다. 사이드바가 페이지의 상단에 위치하지 않고, 본문 아래로 밀리게 되면 방문자가 불편을 느낄 수있을 뿐만 아니라 SEO(검색)최적화에 불이익을 받을수 있습니다.

이런 문제를 해결하지 않으면 사용자 경험(UX)과 SEO에 부정적인 영향을 줄 수 있기 때문에, 빠르게 해결하는 것이 중요합니다.

부모 요소의 높이 지정 문제

사이드바가 본문 영역과 같은 부모 요소에 포함되어 있을 때, 부모 요소의 높이가 자동으로 늘어나지 않는 경우 사이드바가 본문 아래로 밀려 내려갈 수 있습니다. 부모 요소에 높이나 최소 높이(min-height)가 지정되지 않으면, 사이드바가 예상보다 낮은 위치로 내려갈 수 있습니다.

플로트(floating) 요소 처리 문제

사이드바에 float: left나 float: right가 적용된 경우, 그 뒤에 나오는 요소들이 사이드바의 영향을 받아 불규칙한 레이아웃을 만들 수 있습니다. 특히 플로팅 요소가 부모 요소 안에서 잘 감싸지지 않으면 사이드바가 다른 콘텐츠 아래로 밀려 내려갈 수 있습니다. 특히 광고를 사이드에 적용시 잘못된 코드로 인해 사이드가 밀리수 있습니다.

스타일시트 충돌

블로그의 CSS 코드가 복잡하거나 여러 플러그인 및 템플릿을 사용하는 경우, 서로 다른 스타일시트가 충돌하여 사이드바가 정상적인 위치에 표시되지 않을 수 있습니다. 예를 들어, 특정 요소에 position: absolute가 적용되면 사이드바가 의도하지 않게 본문 아래로 내려갈 수 있습니다.

미디어 쿼리의 영향

미디어 쿼리가 잘못 설정되면 화면 크기에 따라 사이드바가 제대로 표시되지 않을 수 있습니다. 특히 모바일 버전에서 미디어 쿼리가 제대로 설정되지 않으면 사이드바가 본문 하단으로 밀려 내려가거나, 아예 사이드바가 보이지 않게 되는 경우도 발생할 수 있습니다.

티스토리 사이드 오류 수정방법

잘못 닫힌 코드 예시

HTML코드 수정시 HTML 구조에서 태그가 제대로 닫히지 않거나 잘못 작성된 경우, 페이지 레이아웃에 문제가 생길 수 있습니다. 특히 사이드바가 콘텐츠 영역과 같은 부모 요소에 포함될 때, 잘못 닫힌 태그로 인해 사이드바가 본문 하단으로 내려가거나 예상치 못한 위치로 이동하는 문제가 발생할 수 있습니다.

아래 HTML 구조에서는 콘텐츠와 사이드바를 감싸는 부모 요소가 정상적으로 닫히지 않아 사이드바가 본문 영역 아래로 밀려 내려갑니다. 예를 들어, 아래와 같이 콘텐츠와 사이드바를 감싸는 div 태그가 먼저 닫히면서, 사이드바는 부모 요소를 벗어나고 하단으로 내려가게 됩니다.

html 코드에 잘못 적용된 코드

해결 방법

이 문제를 해결하려면, 사이드바 코드 위에 존재하는 불필요한 태그나 잘못 입력된 태그를 삭제하거나 수정해줘야 합니다. 예를 들어, 부모 요소의 닫는 </div> 태그가 있다면, 해당 태그를 삭제해야 합니다. 이렇게 하면 사이드바가 콘텐츠 옆에 정확히 위치하게 됩니다.

올바른 코드 구조

올바르게 작성된 코드에서는 콘텐츠와 사이드바를 감싸는 부모 요소가 정상적으로 닫혀 있고, 사이드바와 콘텐츠가 좌우로 나란히 배치되도록 레이아웃이 구성됩니다. 또한, 푸터는 페이지 하단 전체를 차지하도록 ::after 가상 요소를 사용하여 구분할 수 있습니다.

올바르게 적용된 html 코드

HTML 기본 구조

HTML 코드에 문제가 발생하면 SEO 점수 하락으로 이어집니다.

SEO점검하기

부모 요소의 높이 설정하기

부모 요소에 높이를 설정하거나 min-height를 사용하여 사이드바가 올바르게 표시되도록 할 수 있습니다. 예를 들어, 사이드바가 포함된 컨테이너 요소에 min-height 속성을 추가해 보세요.

clearfix 기법 사용

플로팅된 요소가 부모 요소를 벗어나지 않도록 하기 위해 clearfix 기법을 사용할 수 있습니다. 이 방법은 부모 요소가 플로팅된 자식 요소들을 감싸도록 만들어 사이드바가 제대로 표시되도록 합니다.

clearfix는 부모 요소에 가상 요소(::after)를 추가하여, 플로팅된 자식 요소들에 의해 부모 요소가 높이를 잃지 않도록 만듭니다. 이 방법은 CSS만으로도 구현할 수 있습니다.

CSS position 속성 수정

position 속성 때문에 사이드바가 하단으로 내려간다면, **position: absolute**나 position: relative 속성을 적절히 수정해야 합니다. 사이드바를 고정 위치에 놓고 싶다면 position: fixed를 사용하여 화면을 스크롤해도 사이드바가 고정되게 만들 수 있습니다.