티스토리 코드블럭 스타일 수정하기 - 모서리 둥글게, 줄간격, margin

코드블럭 안의 폰트스타일이나 배경색을 바꾸고 싶은 경우는 다음 글에 게시해놓았다.

https://hancoco.tistory.com/55

티스토리 코드블럭 스타일 수정하기 - highlight, 어두운 배경, 원하는 폰트로 바꾸기.

 

 

---

 

코드블럭 폰트랑 배경색을 바꾸고나니 좀더 욕심이 생긴다.

줄간격도 넓히고 삐쭉한 모서리도 좀 둥글둥글하게 바꾸고 싶다!!!!

그러니, 바꿔보자.

 

1) 티스토리 블로그관리 > 스킨편집 > html 편집 > css에 들어가자

 

 

 

 

 

2) css에 해당 코드를 작성한다.

code {
    border-radius: 8px;
    font-family: "Consolas", "Sans Mono", "Courier", monospace;
    font-size: 1.0rem;
    line-height: 130%;
    margin: 2.0rem auto;
}

 

css에 이미 code{} 코드가 있다면 그 안에 수정해서 넣자.

나는 없어서 body 코드 위에 새로 작성했다.

나중에 수정하거나 찾기 쉬우려고 위에 주석도 달아놓음.

 

그러면 완성.

 

 

 

---

 

 

3. 스타일을 세부적으로 바꾸기

code {
    border-radius: 8px;
    font-family: "Consolas", "Sans Mono", "Courier", monospace;
    font-size: 1.0rem;
    line-height: 130%;
}

 

border-radius : 모서리를 얼마나 둥글게 할까?

숫자가 클수록 더 둥글게 된다.

 

font-family : 어떤 폰트를 쓸까?

원하는 폰트를 넣을 수 있다. 구글폰트 사이트에 대체로 디자인도 깔끔하고 무료로 사용할 수 있는 폰트가 많아서 추천한다.

https://fonts.google.com/

Google Fonts

 

font-size : 폰트 크기는 얼마나 크게 할까?

px가 아니라 rem을 사용하는 이유는, rem이 브라우저에 비례해서 상대적인 길이를 갖기때문이다.

즉, html 요소에 font-size를 고정값으로 지정해 두면 그 비율에 따라 크기가 계산된다.

숫자가 커질수록 폰트 크기도 커진다.

 

line-height : 줄 간격은 얼마나 줄까?

%로 주로 표현한다. 숫자가 커질수록 줄 간격도 커진다.

 

margin : 박스 주변에 여백은 얼마나 줄까?

코드블럭 외부의 간격을 조절한다.

margin : 0.5rem auto;의 경우 상하좌우 전부 간격을 준다

만약 왼쪽의 간격만 주고싶은 경우는 auto를 제거하고 그냥 사용하면 된다.

( 내 블로그에는 현재 적용이 되지 않고있다. 혹시나 적용되는 분이 있으실지도 모르니.)

 

(업데이트)

3번에서 작성했던 코드 아래에 다음 코드를 작성하면 된다.

pre > code {
    margin: 2rem auto;
    white-space: pre;
    overflow:auto !important; /* scroll setting */
}