티스토리 블로그를 운영하다 보면 가끔 사이드바가 본문 옆에 얌전히 있지 않고 아래로 툭 떨어지는 현상을 겪게 되는데요. 이게 단순히 보기 싫은 문제를 떠나서 검색 엔진이 봤을 때도 사이트 구조가 엉망이라고 생각할 수 있어서 신경 써줘야 해요. 특히 북클럽 스킨을 쓰시는 분들이 자주 겪는 문제인데, 보통 부모 요소 높이를 제대로 설정 안 했거나, 태그가 꼬였거나, CSS 스타일이 서로 부딪혀서 생기는 경우가 많아요.
이번 글에서는 왜 이런 사이드바 오류가 생기는지 이유를 알아보고, min-height 설정이나 clearfix 같은 방법으로 깔끔하게 해결하는 팁을 알려드릴게요. 생각보다 어렵지 않으니 차근차근 따라 해보세요.
사이드바가 왜 제자리에 안 있고 밀리는 걸까요?
사이드바가 페이지 상단 옆이 아닌 본문 저 아래로 내려가 버리면 방문자들이 메뉴를 못 찾아서 답답해할 뿐만 아니라, 구글 같은 검색 로봇이 “어? 이 페이지 뭔가 구조가 이상한데?”라고 판단해서 좋지 않은 영향을 줄 수 있어요.
| 문제가 생기는 이유 | 어떤 상황인가요? | 어떻게 고치나요? |
|---|---|---|
| div 태그가 꼬였을 때 | 감싸주는 태그가 중간에 닫혀버림 | HTML 태그 확인하기 |
| Float 설정이 풀렸을 때 | 떠 있는 요소가 높이를 잃어버림 | CSS float clear 쓰기 |
| 너비 계산이 안 맞을 때 | 본문이랑 사이드바 합쳐서 100% 넘음 | box-sizing: border-box |
| 반응형 설정 충돌 | 특정 화면 크기에서 레이아웃 깨짐 | 반응형 기준점 체크 |
1. 부모 요소 높이랑 플로트(Float) 문제 살펴보기
사이드바에 float: left나 float: right 같은 속성을 줬을 때, 이걸 감싸고 있는 부모 요소가 자식들의 높이를 제대로 인식하지 못해서 레이아웃이 무너지는 경우가 종종 있어요. 특히 광고를 넣고 나서 갑자기 화면이 깨진다면, 광고 스크립트가 높이 값을 이상하게 만들어서 그럴 확률이 높아요.
이럴 때는 부모 요소에 min-height를 줘서 최소한의 공간을 확보해 주거나, clearfix라는 방법을 써서 둥둥 떠 있는 자식 요소들을 안전하게 감싸주면 해결될 때가 많아요.
2. HTML 태그가 중간에 닫히진 않았나요?
이거 진짜 찾기 까다롭지만 정말 자주 일어나는 실수인데요. 바로 div 태그가 잘못 닫힌 경우예요. 본문이랑 사이드바를 크게 감싸주는 부모 div가 있는데, 글을 쓰거나 코드를 수정하다가 실수로 본문 중간에서 닫아버리면 사이드바가 “어? 나는 이제 갈 곳이 없네?” 하고 밖으로 튕겨 나가서 아래로 떨어지게 돼요.
이 문제를 해결하려면 사이드바 코드 위쪽을 잘 살펴봐서 불필요하게 닫힌 /div 태그가 없는지 확인하고 지워줘야 해요. 정상적인 구조라면 본문이랑 사이드바가 사이좋게 같은 부모 태그 안에 들어있어야 하거든요.
3. CSS 스타일 충돌이나 미디어 쿼리 확인하기
플러그인을 이것저것 쓰거나 스킨을 내 맘대로 꾸미다 보면 position: absolute 같은 속성 때문에 사이드바 위치가 꼬일 수도 있어요. 그리고 모바일이랑 PC 화면을 구분해 주는 미디어 쿼리 설정이 잘 되어 있는지도 한 번 체크해 보면 좋아요. 화면 너비에 따라 보여주는 방식이 달라지니까요.
자주 묻는 질문 정리
질문: 사이드바가 갑자기 아래로 밀렸는데 뭐부터 봐야 하죠?
답변: 방금 글을 수정했거나 광고 코드를 새로 넣은 게 없는지 확인해 보세요. 특히 본문 작성하다가 div 태그가 꼬여서 제대로 안 닫혔을 때 이런 일이 제일 많이 생겨요.
질문: CSS에 clearfix는 어떻게 넣나요?
답변: 부모 요소의 클래스 이름 뒤에 .parent-class::after { content: “”; display: block; clear: both; } 이렇게 코드를 추가해주면 둥둥 떠 있던 요소들이 정리돼요.
질문: 폰으로 볼 때 사이드바가 아래에 있는 건 정상인가요?
답변: 네, 맞아요. 모바일 같은 좁은 화면에서는 글을 먼저 보여주기 위해 사이드바를 아래로 보내는 게 보통이에요. 근데 PC 화면처럼 넓은 데서도 밀려 있다면 설정을 다시 봐야 해요.
질문: 광고 코드 때문에 밀리는 것 같을 땐 어떡하죠?
답변: 광고 크기가 사이드바 폭보다 너무 넓게 잡혀있는지 보세요. 반응형 광고를 쓰거나 CSS에서 max-width: 100%를 설정해 주면 칸을 넘어가지 않아서 좋아요.
티스토리 블로그 사이드바 오류는 단순히 보기에 안 좋은 걸 넘어서 내 블로그가 얼마나 웹 표준을 잘 지키고 있는지 보여주는 척도이기도 해요. 미디어 쿼리랑 position 속성을 잘 조절하고, HTML 태그가 짝이 맞게 잘 닫혀 있는지 가끔씩 확인해 주는 게 좋아요. 작은 태그 실수 하나만 바로잡아도 블로그 지수도 지키고 방문자들도 훨씬 편하게 글을 볼 수 있으니까요.
