[CSS] 티스토리 코드블럭 여백, 테두리 없애기 : pre / !important

 

 

 

 

어느 순간부터 다음 사진처럼 코드블럭에 흰색 여백과 함께 테두리가 함께 생겼는데

거슬려하다 오늘에서야 해결방법을 찾아 없앴습니다

 

아래 코드블럭 보이시죠? 테두리를 없앴습니다 제가 해냈습니다

 

 

 

 

1. 해결 과정

바로 해결 방법만 보고 싶은 분들은  2.해결방법 으로 이동하세요

과정은 그저 제 기록용

 

 

1.1 코드블럭 Styles 확인

 

F12 키를 눌러 개발자 모드를 켠 후, 커서 모양을 누르고 코드블럭 근처로 마우스를 가까이 두면

해당 부분에 대한 html 코드가 하이라이팅됩니다

pre 태그가 붙은 부분을 클릭하면 테두리 영역과 관련된 Styles도 확인할 수 있습니다

 

 

 

1.2 테두리 영역에 해당하는 라인 찾기

padding, border를 위주로 체크를 해제해보며, 어떤 부분을 수정해야 코드블럭 테두리를 없앨 수 있을까 찾아보았습니다

padding을 변경하여 여백을 없애고 border(테두리 선)를 없애는 방법을 선택했습니다

padding: 10px;
border: 1px solid #e5e5e5;

 

 

 

 

 

 

---

2. 해결 방법

 

2.1 티스토리 블로그관리 > 스킨편집 > html 편집

CSS 파일을 수정하기 위해 위 메뉴로 이동합니다

스킨편집

 

html 편집

 

 

 

 

2.2 코드 추가

CSS 탭으로 들어가 아무 곳에나 다음 코드를 추가합니다

pre {
  border: 0px!important;
  padding : 0px!important;
}
pre code {
  padding : 20px!important;
}

추가 모습

 

[설명]

- pre {} 내 border는 테두리 제거, padding 부분은 여백을 제거했습니다

- pre code {} 내 여백 추가는 pre 여백을 지우니 코드블럭 여백이 너무 적은 것 같아 코드블럭 내 여백을 추가했습니다

 

 

📌 !important

같은 속성을 여러 번 정의한 경우 나중에 설정한 값이 적용되는데,

!important 속성을 붙여 우선순위를 정할 수 있습니다

 

이번에 padding을 줄이기 위해 css에서 code 태그를 찾아 열심히 수정해도 바뀌지 않았는데,

후에 uikit에서 자동으로 가져와서 처리하는 부분이 있었습니다

해당 부분에서 설정하는 값 대신 제가 설정한 값으로 적용되게 하기 위해 !important 속성을 사용했습니다 :)

 

 

 

 

 

 

cout >> "hello";
int a = 1;
a = a + 1;

🌟 깔끔한 코드블럭 완성  🌟

 

 

 

 

 

 

---

References

🔗 https://www.codingfactory.net/10372