[TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정

#관련 글

[TISTORY/Code Block] 티스토리 코드블럭 하이라이트(highlight.js) 테마 설정

[TISTORY/Code Block] 티스토리 코드블럭 라인넘버(line number) 설정

[TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정

 

#스크롤(Scroll)

코드 블럭에 하이라이트를 설정하면 데모 사이트에서 본 디자인과 다를 수 있습니다.

티스토리의 css코드에 기본적인 스타일이 설정되어 있기 때문입니다.

 

가독성을 높이고 마음에 드는 스타일 설정을 위해 몇 가지 수정을 할건데 이번 글에서는 스크롤 설정을 하겠습니다.

블로그 관리 페이지 → [스킨 편집] → [CSS] 탭으로 이동해서 아래와 같은 코드를 적용합니다.

 

code {
    white-space: pre;
    max-width: 850px; 
    max-height: 600px; 
    overflow: auto !important;
}

 

#라인2

white-space는 '여백'으로써 요소안에 공백을 처리할 때 사용합니다.

속성 값이 여러개 있는데 그중에 pre 는 공백을 그대로 표시한다는 뜻입니다.

 

#라인3 ~ 라인4

max-width와 max-height는 가로, 세로길이의 최대값을 정할 수 있습니다.

여기서는 가로 850px, 세로 500px이 넘어가면 스크롤을 만들기 위해서 작성했습니다.

 

#라인5

코드가 앞에서 지정한 픽셀(px)보다 크면(overflw) 스크롤이 생기게 하는 코드입니다.

!important를 선언하면 css속성 순서 중에서 가장 높은 우선순위를 가집니다. 

 

 

 

#적용 전/후

스크롤 적용 전

스크롤 적용 후

 

스크롤이 정상적으로 적용된 것을 확인 할 수 있습니다.