본문으로 바로가기
  1. Home
  2. IT & 기타/티스토리
  3. 티스토리 북클럽 Book Club 스킨에서 사이드바 고정하는 간단한 방법

티스토리 북클럽 Book Club 스킨에서 사이드바 고정하는 간단한 방법

· 댓글 20

이 티스토리 블로그에는 현재 Book Club (북클럽)이라는 가장 최근에 공개된 스킨이 사용되고 있습니다. 현재 사이드바의 크기를 조금 조정했고, IE를 제외하고는 사이드바가 마우스를 스크롤할 때 함께 따라 내려가도록 설정되었습니다. 티스토리 북클럽 스킨에 사이드바를 고정하고 싶은 경우 아래의 방법을 시도해볼 수 있습니다.

목차

    티스토리 북클럽 (Book Club) 스킨에서 사이드바 고정하는 심플한 방법

    저는 사이드바를 고정하기 위해 다음과 같은 CSS 코드를 추가했습니다.

    /* 사이드바 너비 지정 및 고정 */

    @media screen and (min-width:1081px) {
    #aside {
        width: 26%;
        padding: 75px 0 32px;
        box-sizing: border-box;
      position: sticky;
      position: -webkit-sticky;
      top: 0; /* required */
    }
    #container .content-wrap:before {
            margin-left: 215px;
    }

    /* 본문 사이드바 마진 */
    #content, #aside { padding-top: 45px;}
    }

    }

    위의 코드는 사이드바 너비 비율도 조정합니다. 만약 사이드바 폭을 현재 상태로 두고 사이드바만 고정하고 싶은 경우에는 다음 코드를 사용합니다.

    @media screen and (min-width:1081px) {

    #aside {

    box-sizing: border-box;

    position: sticky;

    position: -webkit-sticky;

    top: 0; /* required */

    }

    }

    위의 코드에서 position: sticky;가 사이드바를 고정하는 기능을 하는데요. Can I Use에 의하면 sticky는 IE의 모든 버전과 Edge 브라우저 버전 15 이하에서는 지원되지 않습니다.

    CSS sticky 요소

    이 사이트처럼 중요하지 않는 개인 블로그의 경우 position: sticky;를 사용하면 간편하게 사이드바를 고정시킬 수 있습니다.ㅎ (※업데이트: 윈도우 7 지원 종료 후에 IE 점유율이 급격히 하락하고 있습니다. IE 대응이 필수적이지 않은 경우에는 IE에서 레이아웃만 대략적으로 표시되면 무시해도 될 것입니다.)

    위의 코드는 다른 티스토리 스킨이나 워드프레스 테마 등에서도 응용이 가능합니다. 다만 실제 클래스명은 조금씩 다를 수 있습니다.

    참고:


    SNS 공유하기
    💬 댓글 20
    logo

    제 문의를 바로 포스팅으로 올려주시다니 감사합니다 ㅠㅠ

    logo

    sticky에 대한 글을 하나 작성하려고 생각하고 있었습니다.ㅎ

    오늘부터는 날씨가 조금 풀리는 것 같습니다. 쌀쌀한 날씨에 감기 조심하세요.

    logo

    아 잘 봤어요. 오늘도 좋은일로 가득찬 하루가 되시길요.

    logo

    혹시 북클립스킨 사이드바를 양쪽 2개로 나누는 방법은 없을까요? ㅠㅠ

    logo

    감사합니다. 잘 따라했습니다. 궁금한게 있는데요.
    이 css를 추가를 했더니 본문이 오른쪽으로 붙어버리는데요. 원래 떨어져있던 간격을 넓힐려면 뭘 수정을 해야하나요?

    logo

    다음 코드만 적용해보시겠어요>

    @media screen and (min-width:1081px) {
    #aside {
    box-sizing: border-box;
    position: sticky;
    position: -webkit-sticky;
    top: 0; /* required */
    }
    }

    logo

    오오오오!! 감사합니다.
    잘 적용했습니다 감사합니다~~^^

    logo
    익명

    비밀댓글입니다

    logo

    티스토리 스킨을 다른 스킨으로 변경했다가 다시 북클럽 (Book Club) 스킨으로 변경하면 수정 사항이 모두 초기화됩니다.

    스킨 변경 시 주의할 사항을 다음 글을 참고해시고, 스킨을 변경하여 수정 사항을 초기화해보시기 바랍니다.

    https://avada.tistory.com/1850

    logo

    답변감사합니다!
    한번 해볼게요 :)

    logo

    정말 큰 도움이 되었습니다

    logo

    블로그를 방문해주셔서 감사합니다~ 즐거운 주말 보내세요.

    logo
    익명

    비밀댓글입니다

    logo

    안녕하세요? CSS로 고정이 되면 간단하지만, 그렇지 않으면 javascript를 사용해야 할 것입니다. 이 블로그는 현재 css를 사용하여 사이드바를 고정하고 있습니다. 오딧세이 스킨은 테스트해보니 CSS로 고정이 안 되네요. 그러면 번거롭더라도 javascript를 사용해야 할 것입니다.

    logo

    비밀댓글입니다

    logo

    1. CSS는 CSS 탭의 맨 아래에 추가합니다.
    2. javascript는

    <script>
    해당 코드
    </script>

    위의 형식으로 </html> 바로 위에 추가합니다.

    위의 같이 추가하여 한 번 테스트해보시겠어요?

    logo

    아. /body 위에 해서 작동이 안 되었나 봅니다. 다시 해보겠습니다. 고맙습니다. ^^

    logo

    javascript 코드를 </body> 바로 위에 위치시켜보시고, 작동을 안 하시면 <head>...</head> 사이트에 추가해서도 테스트해보시겠어요?

    logo

    말씀하신 대로 </html>위에 넣었습니다.
    잘 작동됩니다. 덕분에 잘 해결되었습니다.
    고맙습니다. 평안한 밤 보내세요. ^^

    이름을 저장합니다.

    가성비가 뛰어난 웹호스팅

    저렴하고 가성비 좋은 웹호스팅

    최근 댓글

    가성비적인 측면에서 괜찮은⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 요가하구 비보북 너무 괜찮은⋯ 💬Hman 윈도우 11은 아직 사용해 보⋯ 💬空空(공공) 감사합니다. 다시 한번 차근⋯ 💬viator_min 사이트 속도가 느리면 SEO(검⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

    워드프레스 시작 가이드

    워드프레스 시작하기