티스토리 스킨 적용

작성일: 2026-04-17

티스토리에 스킨 적용 가이드

 

개요

티스토리에서 스킨 적용을 위한 가이드를 작성합니다. 우선 해당 브로그에서는 깔끔하고 IT 관련 기술 블로그에 가장 많이 사용하는 스킨인 hELLO 스킨을 적용하는 예시를 사용합니다.

이번에 오랜만에 다시 제대로 블로그 운영하려고 기존에 있던 스킨에서 새롭게 스킨을 바꾸면서 약간의 커스텀한 부분도 추가해두었습니다.

 

hELLO 스킨

https://pronist.tistory.com/5

참고 URL에 적용 관련해서 자세한 가이드가 나와 있는데 주의해야할 점이나 실제 적용하면서 문제가 있을만한 부분을 추가로 정리하려고 합니다.

 

버전 확인

작성일 기준 현재 최신 버전은 v4.10.6 왠만하면 현재 최신버전을 사용하면 좋습니다. 기존에 버그들을 수정한 버전이기때문에 최신버전을 사용해야 이러한 버그들이 고쳐진 더 안정적인 환경을 세팅할 수 있습니다.

뭐가 최신인지 확인하기 위해서는 릴리즈 노트를 확인해서 최신 hEllo-dist.zip 파일을 다운 받습니다.

아래 진행 내용은 v4.10.6버전으로 작업된 내용입니다.

 

스킨 등록

티스토리 설정 페이지 > 꾸미기 > 스킨 변경 > 스킨 등록

여기서 아까 받은 zip파일 압축 해제한 이후에 모든 파일들을 업로드합니다. 이때 images폴더가 존재할텐데, 여기 하위의 모든 파일도 등록해 주셔야합니다.

 

⭐️ 기본적인 설정

여기부터는 개인취향... ㅎㅎ

사이드바 상시 펼치기

다른 티스토리 보다 보니까 사이드바가 상시 펼쳐진 블로그들이 있어서 나도 기본적으로 상시 설정하는게 있나해서 봤는데 따로 티스토리에 제공하는 설정으로 나오는건 없어 보였다.

상시라는건 위처럼 왼쪽에 사이드바가 계속 보이게 원래는 접혀져서 따로 클릭해야 오픈된다. 보니까 Hello 스킨에서는 기본적으로 1400px 이상일때 아래 사이드바 펼치기/접기 토글을 on하면 펼치기가 된다.

근데 필자는 1400px로 보려니까 생각보다 꽤 더 화면이 커져야 사이드바가 나오는 느낌이라 이걸 1000px로 줄이고 싶었음. 그런데 그냥 기존에 CSS에서 사이드바 노출 기준을 변경하게되면 조금 문제가 있었음...

1. 사이드바 노출 기준 변경

  /* CUSTOM: 사이드바 노출 기준을 1400px → 1000px로 변경 */               
  @media (min-width: 1000px) {                                              

    .xl\:invisible {                                                        
      visibility: hidden;                                                   
    }

    .xl\:left-0 {                                                         
      left: 0px;
    }                                                                       

    .xl\:w-c {                                                              
      width: var(--h-c);                                                  
    }

    .xl\:pl-s {
      padding-left: var(--h-s);                                             
    }
  }

그러면 이렇게 짤리는 경우가 생김.

그래서 이걸 해결할 추가적인 방법을 공유합니다. 이후 위에 설정하는 부분인 1000px로 바꾼 부분을 본인이 원하는대로 수정해서 이제 짤리는 경우가 안생길겁니다. 우선 1번 내용을 적용해 줍니다.

2. .index-container 본문 잘림 방지

  @media (min-width: 1100px) {                                            

    .index-container {
      margin-left: auto;
      margin-right: auto;                                                   
      width: var(--h-idx);
      /* CUSTOM: 사이드바 노출 시 본문이 부모 영역을 넘지 않도록 제한 */    
      max-width: calc(100% - 2rem);                                         
      padding-left: 0px;                                                    
      padding-right: 0px;                                                   
    }                                                                       
  }

3. .permalink-container 본문 잘림 방지

  @media (min-width: 1100px) {                                            

    .permalink-container {
      margin-left: auto;
      margin-right: auto;                                                   
      width: var(--h-pem);
      /* CUSTOM: 기존 max-width 1100px 유지 + 부모 영역 초과 방지 */        
      max-width: min(1100px, calc(100% - 2rem));                            
      padding-left: 0px;                                                    
      padding-right: 0px;                                                   
    }                                                                       
  }

.permalink-container는 원래 max-width: 1100px 이 걸려 있어서 min() 으로 기존 상한도 같이 지켜줍니다.

4. [data-list-style=empty] 본문 잘림 방지

@media (min-width: 1100px) {                                            
  [data-list-style=empty] {
    margin-left: auto;
    margin-right: auto;
    width: var(--h-idx);
    /* CUSTOM: 사이드바 노출 시 본문 잘림 방지 */                         
    max-width: calc(100% - 2rem);
    padding-left: 0px;                                                    
    padding-right: 0px                                                    
  }
}

5. 포스트 리스트 컨테이너 본문 잘림 방지

  @media (min-width: 1100px) {                                            

    #global-header~.post,
    [data-list-style=list] .post,                                           
    [data-list-style=grid],
    [data-list-style=Z],                                                    
    [data-list-style=gallery] {                                           

      margin-left: auto;                                                  
      margin-right: auto;                                                   
      width: var(--h-idx);
      /* CUSTOM: 사이드바 노출 시 본문 잘림 방지 */                         
      max-width: calc(100% - 2rem);                                       
      padding-left: 0px;                                                    
      padding-right: 0px
    }                                                                       
  }

본문 컨테이너 4곳에 max-width: calc(100% - 2rem) 추가 (permalink는
min(1100px, calc(100% - 2rem)))

2~4번 적용하면 아래와 같이 짤리는거 없이 깔끔하게 적용 됩니다.

'티스토리' 카테고리의 다른 글

Markdown 서식확인 샘플  (1) 2026.04.20
티스토리 스킨에 Mermaid 다이어그램 적용하기  (0) 2026.04.17
mermaid 코드  (0) 2026.04.17

티스토리툴바