[tistory] 티스토리 코드블럭 회색배경 및 여백

이전에 티스토리 코드블럭 디자인을 수정한 적이 있는데, 회색 배경이 있는 것이 마음에 안 들었지만 나중에 해결하자 하고 내버려뒀었다. 이번에 그게 생각이 나서 회색 배경을 없애주는 작업을 해보았다.

 

<이전 글 참고>

https://coding-ga-ding.tistory.com/9?category=878847 

[tistory - markdown] 티스토리 마크다운을 이용한 코드블럭 디자인

 

이전 글을 참고하면 html 편집에서 css까지는 어렵지 않게 올 수 있다. 코드블럭의 회색 배경을 없애기 위해서는 class명이 'article-view'인 태그 내의 pre 태그의 배경색을 수정해주어야 한다.

여기 보면 background 색상이 지정되어 있는데, 바꾸기 이전에는 rgba(0, 0, 0, 0.5)인가 그렇게 되어있었다. 이걸 해당 이미지처럼 rgba(0, 0, 0, 0)으로 바꿔주면 회색 배경이 사라진다.

 

하지만 이렇게 설정하면 회색 배경이 사라진다는 것보다는 회색 배경이 차지하고 있던 자리가 투명으로 바뀐다라는 의미가 된다. 그래서 회색이 차지하고 있던 공간이 줄어들지 않고 여백으로 자리를 차지하고 있게 된다. 그래서 padding 20px로 되어있던 것을 10px로 줄여보았는데 차이가 안 느껴졌다. 아예 padding-top, padding-bottom은 값을 주지 않고 padding-right, padding-left에 각각 5px을 주는 방식으로 바꿔보았는데, 이 경우에도 위아래 여백은 마음에 안 들만큼 큰 공간을 차지했다.

 

여백 스타일을 지정하기 위해 찾아보니, 코드블럭은 code 태그의 설정을 이용해 변경해야 한다고 나와있었다. pre > code의 css 설정에서 margin값이 10rem으로 설정되어있었다. 이걸 크기로 조정하여 코드블락 외부의 여백을 설정할 수 있다. 숫자를 점점 줄여보다가 나는 0.01rem일 때가 가장 마음에 들어서 0.01로 변경해주었다.

 

 

이제 내가 원하는 형태로 변경이 되었다.

변경한 코드블럭 형태

 

+) 참고

[티스토리 코드블럭 하이라이트 테마 적용 / 둥근 테두리 만들기] - 코드블럭 꾸미기

티스토리 코드블럭 스타일 수정(여백, 줄간격 등)

 

+) 웹 프로그래밍을 하면서 웹을 만들어보니까 코드가 대충 어떤 내용인지 읽혀진다 오...