[블로그] 티스토리 Odyssey 스킨 - 사이드바 고정하기

오늘은 티스토리 Odyssey 스킨에서 사이드바를 스크롤해도 고정되게 만드는 방법을 알려드릴게요. 기본 Odyssey 스킨에는 이 기능이 없지만, 아주 간단한 CSS 수정만으로 멋지게 고정할 수 있답니다! 💪

복잡하지 않아요!
관리자 페이지 → 스킨 편집  →  CSS 파일 수정 ( 코드를 맨 아래 추가)  →저장 버튼 클릭 → 블로그 새로고침(F5)

• 스킨을 수정하기 전에 백업은 필수예요. 혹시 모르니 안전하게 대비해주세요!
• 기존 CSS와 충돌하지 않도록 블로그를 충분히 확인해보세요.

---

 

1.  티스토리 관리자 페이지 접속하기 > 스킨 편집 열기

티스토리 관리자 페이지 접속하기 > 스킨 편집 열기

왼쪽 메뉴에서 스킨 편집을 클릭해주세요.
Odyssey 스킨이 적용되어 있는지 확인해주세요. (다른 스킨이라면 이 방법이 조금 다를 수 있어요!)

우측 상단의 스킨 편집에서 html 편집 클릭✓

스킨 편집 화면에서 상단의 CSS 탭을 클릭하면 준비 완료! 🎉

---

2. CSS 코드 추가하기 

CSS탭을 클릭하고
아래 코드를 복사해서 CSS 파일 맨 아래에 추가해주세요:

/* 사이드바 고정 */
@media screen and (min-width: 1061px) {
  .wrap-right .area-aside {
    align-self: flex-start; /* 사이드바 시작 위치 */
    position: sticky;      /* 스크롤에도 고정되게 만듦 */
    top: 32px;             /* 화면 위에서 32px 떨어진 위치 */
    height: 100%;          /* 사이드바 높이 설정 */
  }

  #wrap {
    overflow: auto;        /* 세로 스크롤 가능 */
    overflow-x: hidden;    /* 가로 스크롤 방지 */
    height: 100%;          /* 콘텐츠 높이 조정 */
  }
}
/* 사이드바 고정 끝 */

 

<코드 설명>
1) .wrap-right .area-aside

• position: sticky: 사이드바가 스크롤 시 고정됩니다.
• top: 32px: 화면 상단에서 32px만큼 떨어진 위치를 기준으로 고정됩니다.
• align-self: flex-start: 사이드바가 Flexbox 안에서 시작 위치에 정렬됩니다.

2) #wrap

• overflow: auto: 콘텐츠가 길어질 경우 세로 스크롤을 활성화합니다.
• overflow-x: hidden: 가로 스크롤은 방지합니다.
• height: 100%: 부모 요소 높이를 화면에 맞게 설정합니다.

코드를 추가했다면, 저장 버튼을 클릭하세요.

---

3. 적용 확인하고 스킨 보관하기

블로그로 돌아가 새로고침(F5)을 눌러주세요.
스크롤을 내려봐도 사이드바가 고정된 상태라면 성공이에요! 🎉

티스토리 특성상 다른 스킨을 적용하는 순간 편집했던 기록이 사라집니다. 
저도 처음에 이것저거 누르다가 아주 오래전에 만들어 백업파일이 없던 로고가 사라졌어요 🥹

스킨변경에서 편집했던 스킨에서 보관을 클릭해 원하는 버전의 이름으로 저장하시면 됩니다

그럼 스킨보관함에서 저장한 스킨을 확인하실 수 있습니다.

---

이렇게 사이드바를 고정하면 사용자 편의성도 높아지고, 디자인도 훨씬 깔끔해지죠. 특히 반응형 디자인 덕분에 모바일에서도 문제가 없으니 안심하고 적용하셔도 됩니다! 😊