[블로그] 티스토리 사이드바 광고 고정방법 - 오딧세이 스킨

오디세이 스킨 사용시 사이드바 고정방법입니다. 티스토리 관리 홈 -> 스킨편집 -> html편집 -> css 항목부분에 아래와 같이 입력 후 테스트 해보면 광고가 고정되는 부분을 확인 할 수 있습니다. 

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

    .wrap-right .area-aside {

        align-self: flex-start;

        position: sticky;

        top: 32px;

        height: 100%;

    }

}

#wrap {

    overflow: auto;

    overflow-x: hidden;

    height: 100%;

} 

1. @media screen and (min-width: 700px)

이 구문은 미디어 쿼리입니다. 화면의 너비가 700픽셀 이상일 때만 적용되는 스타일을 지정합니다. 즉, 화면이 700px 이상이면 아래의 스타일이 적용됩니다.

.wrap-right .area-aside { align-self: flex-start; position: sticky; top: 32px; height: 100%; }

• .wrap-right .area-aside:
  • .wrap-right 클래스 안에 있는 .area-aside 요소에 적용됩니다.
• align-self: flex-start;:
  • 이 요소가 flexbox 컨테이너의 첫 번째 위치에 정렬되도록 합니다.
• position: sticky;:
  • 요소가 페이지를 스크롤할 때 일정 위치에서 고정되도록 합니다. top: 32px;로 설정된 만큼 스크롤 시 상단에서 32픽셀 떨어진 위치에 고정됩니다.
• top: 32px;:
  • 고정된 요소가 스크롤 시 화면 상단에서 32픽셀 아래에 위치하도록 설정합니다.
• height: 100%;:
  • 이 요소의 높이를 부모 요소의 **100%**로 설정합니다.

2. #wrap

이 구문은 #wrap ID를 가진 요소에 대한 스타일을 정의합니다.

#wrap { overflow: auto; overflow-x: hidden; height: 100%; }

• overflow: auto;:
  • 콘텐츠가 부모 요소의 크기를 초과할 경우 스크롤바를 자동으로 표시합니다.
• overflow-x: hidden;:
  • 수평 스크롤을 숨깁니다. 즉, 콘텐츠가 가로로 넘쳐도 가로 스크롤은 표시되지 않습니다.
• height: 100%;:
  • #wrap 요소의 높이를 부모 요소의 **100%**로 설정합니다.

요약

• 화면 너비가 700px 이상일 때 .wrap-right .area-aside 요소는 스크롤을 따라 상단에서 32px 아래에 고정되며, flex-start로 정렬됩니다.
• #wrap 요소는 세로로 스크롤이 가능하며, 가로 스크롤은 숨기고, 부모 요소의 높이에 맞게 100% 크기를 차지합니다.

동작확인(동영상)

• 아래 동영상을 보면 사이드바 화면이 고정되어 동작되는 부분을 확인 할 수 있습니다.