티스토리 북클럽을 사용하고 있는데 본문과 사이드바의 폭을 조정해서 그런지 모바일 화면에서 사이드바의 카테고리와 광고가 잘려서 나와 사이드바가 보이지 않도록 수정을 했습니다. 추가로 본문과 사이드바 사이의 구분선을 없애는 방법도 아래 설명 드리겠습니다.
모바일화면 사이드바 숨기기
티스토리 사이드바의 경우 모바일 화면에서 보면 댓글의 아래쪽으로 나오게 됩니다. 카테고리 글목록이 나오고 이어서 설정된 광고가 나오는데 개인적으로 너무 복잡해 보이기도 하고 수익에 크게 영향이 없을 것으로 판단되어 모바일 화면에서 보이지 않도록 숨기기로 했습니다.
저의 경우 본문과 사이드바 폭 조절이 잘못돼서 인지 광고도 잘려서 나왔는데 사이드바 영역이 나오지 않게 하실 분들은 아래글을 참고해 주시기 바랍니다.
CSS편집에서 미디어쿼리 명령으로 모바일에서 사이드바를 안 보이게 처리했는데 아래는 미디어 쿼리에 대한 간략한 설명입니다.
※미디어쿼리 는 웹 개발에서 사용되는 CSS기술로써 반응형 웹 디자인의 핵심 요소입니다. 미디어 쿼리는 미디어 유형(PC, 태블릿, 모바일)과 특성(너비, 방향, 픽셀 밀도등)을 기반으로 동작하며 CSS의 @media 규칙을 사용하여 정의됩니다.
일반적으로 PC의 화면 넓이는 1024px 이상이고 모바일의 경우 max 768px로 모바일에서만 안 보이게 하기 위해서 max-width를 1023px로 설정했습니다.
처음에 768px로 설정을 했는데 태블릿에서 잘린 사이드바가 나와서 다시 수정을 했습니다.
/* 모바일 사이드바 숨기기 */
@media (max-width: 1023px) {
.sidebar {
display: none;
}
}
CSS편집에서 제일 아래쪽에 직접 입력하시거나 아래 첨부 파일을 다운로드하여서 붙여 넣기 하셔도 됩니다.
사이드바 구분선 없애기
티스토리 북클럽의 경우 본문과 사이드바를 구분하는 선이 있는데 고정으로 되어 있어 겹쳐 보이는 경우도 있고 폭을 조정하고 나서 위치가 맞지 않는 경우가 생겨 없애기로 했습니다.
CSS편집에서 간단하게 숨기는 방법에 대해 알려 드리겠습니다.
#container .content-wrap를 검색하면 저의 경우 320번대에 위치해 있습니다. 바로 삭제를 해도 되는데 일단은 나중에 다시 사용할 때를 대비해서 주석 처리를 하도로 하겠습니다.
이렇게 주석처리를 하면 화면에서 사이드바 구분선이 보이지 않게 되는데 크게 어색하거나 불편하지는 않은데 혹시 구분선이 겹치시는 분들은 시도해 보셔도 좋을 거 같습니다.