티스토리블로그

위 사진처럼 이미지에 자막을 넣을 수는 없을까 고민하던 중 한 블로그에서 해법을 찾았습니다. 역시 세상에는 고마운 사람들이 참 많네요.^^ /* Image cap1 */ .cap1 { margin:-10px 0 17px 0; padding-top:5px; font-size:14px; color: #999; text-align: center; border-bottom:1px solid #fafafa; border-radius:17px; -webkit-box-shadow:0 10px 7px -7px #f7f7f7; -moz-box-shadow:0 10px 7px -7px #f7f7f7; box-shadow:0 10px 7px -7px #f7f7f7; background-color:#fff; backgroun..

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:..