마크다운

SyntaxHighlighter를 사용한 미려한 소스코드를 구현하는 법은 타 블로그에도 많이 나와있지만 개별적인 코드 블락에 대해서는 찾아보기가 힘듭니다. 저도 헤매고 있다가 우연히 한 마크다운 css에서 적용법을 알게 되어 공유하고자 합니다. 앞서 설명드리자면 본문에서의 코드박스란 위 사진의 '방문기록 및 웹 사이트 데이터 지우기'라고 써있는 부분의 테두리 박스를 말합니다. #. CSS 수정 .md-fences, code, tt { border: 1px solid #ddd; background-color: #f8f8f8; border-radius: 3px; padding: 0; font-family: Consolas, "Liberation Mono", Courier, monospace; padding:..

단어 단위로 줄바꿈을 하게 되면 PC에서는 그럭저럭 볼만하지만 모바일에서는 보기가 그다지 좋지 않습니다. 이러한 문제를 겪고 CSS 수정을 통해 문제해결을 하려 시도해봤지만, CSS에 대한 이해도가 부족한 탓인지 쉽지가 않았네요. 결국 한 블로그에서 해결방안을 찾아 여러분과 공유해보려고 합니다. 위의 사진은 결국 성공한 스샷입니다. 위처럼 수정을 해주면 됩니다. break-all이 글자단위로 줄바꿈을 하는 것을 말한다고 하니 핵심 구절이 되겠네요. 참고로 word-break가 아닌 word-wrap은 CJK(Chinese, Japan, Korea)와 같은 아시아계 언어는 해당되지 않는다고 합니다. 또, break-all는 normal과 같은 기능을 한다고 하고, break-word는 단어 단위로 끊어준다..