급하신 분은 맨 아래 부분만 보시면 됩니다.(🏃♂️클릭해서 바로 이동💨)
깃허브에서 티스토리로 옮겨오다 보니 마크다운으로 글을 쓰는 것에 익숙해져 있었는데
깃허브에서는 보이던 스타일에 적응이되어 여기서는 다르게 적용되는 스타일에 불편함을 느꼈다.
여러 요소가 있었지만 그 중 하나가
코드블럭(```내용```)을 씌우면 선이 보이는데 이것이 자꾸 내가 쓴 코드를 가리는 것이었다.
그래서 구글링을 해 보았다.
대부분 pre와 pre code 태그의 스타일을 변경해 주는 방법을 사용하는 것을 알 수 있었다.
그 중에 조금이나마 선이 사라진 코드는 #article-view pre로 시작하는 태그의 padding 속성을 변경하는 방법이었다.
/* 코드 블럭 */
#article-view pre code.hljs {
font-size: 14px;
padding: 0px; /* ← 코드 변경한 곳 */
font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
border:solid 1px #ebebeb;
line-height: 1.71;
overflow: auto;
}하지만 선들이 완전히 없어지지 않았다.
코드를 가리지는 않았지만 어중간하게 선이 있는 것이 보기 좋지 않아
나머지 선들도 없애는 방법을 조금 더 찾아보았다.
#article-view pre로 시작하는 태그의 border 속성을 0px로 변경하면 적용이 되지 않을까? 싶어서 변경해 보았더니
🎉 드디어 코드블럭의 선들이 깔끔하게 사라졌다!🎉
border 속성을 none;으로 하면 안되나 싶어서 none으로 해 보았는데 그것도 됨.
무슨 차이가 있나 싶어서 border: 0px; 과 border: none;의 차이를 검색해 보았다.
border: 0 vs. border: none
결론 border: 0 쓰자! 👻 보더 없앨 때 none 보다 0을 썼었는데 이유는 그게 더 치기 편하니까 🙄 (손꾸락은 소중하자나여) 그러다 어느날 앗 내가 혀를 어디다 두고 있었지! 를 자각하는 것처럼 0과
nykim.work
0px, none, hidden의 방법이 있는데
0px과 none의 차이는
- 0px : border-width도 0이 됨.
- none : border-width가 medium
그래서 none의 경우 테두리가 보이는 경우가 있을 수 있음
none과 hidden은 우선순위에 차이가 있음.
(hidden의 우선순위가 더 높음)
그래서 결론은 0px로 쓰자!
티스토리 코드블럭의 선을 완전히 없애는 방법은 바로 이것 👇
블로그 설정 > 꾸미기 > 스킨 편집 > (오른쪽 상단부의) html편집 클릭> (팝업창) 확인 > Ctrl + F > ariticle-vie pre 입력 > #article-view pre code.hljs 태그를 아래 코드로 수정(padding: 0px; border: 0px;로 변경하면 됨)
#article-view pre code.hljs {
font-size: 14px;
padding: 0px; /* ← 변경할 곳 */
font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
border:0px; /* ← 변경할 곳 */
line-height: 1.71;
overflow: auto;
}
(수정 후,) 적용 클릭 > (팝업창) 확인 클릭 > 끝!
적용이 제대로 되었는지 확인해 보세요✅
