[CSS] 구글블로거 본문글의 pre 태그에 블럭효과 주기

요즘 Test-Driven Development with Python 이란 책 - (한국어판은 "클린 코드를 위한 테스트 주도 개발")을 보면서 Django 공부를 다시 하고 있는데, 영문판 버전의 경우 웹사이트에서 무료로도 볼수가 있다.

웹사이트의 포스팅 중간에 나오는 블럭이 마음에 들어서 CSS로 따라 만들어보고자 한다.

대략 아래와 같은 느낌의 블럭이다.

pre 태그에 블럭효과 주기

CSS 편집

아래 CSS 를 구글블로거의 디자인 > 템플릿디자이너 > 고급 > 맞춤 CSS 추가 부분에 입력하면 된다.

pre.screen { padding: 16px; color: #f8f8f8; font-family: Consolas, Monaco, "Lucida console", Courier, monospace; font-size: 0.9em; background-color: #333; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-bottom: 20px; }

사용법

본문글을 쓸때 HTML 을 선택하고 사용하고 싶은 부분에 pre 태그로 감싸면 된다. 이때 pre 태그의 class="screen" 값을 넣어주면 된다.(class 명은 변경가능)

<pre class="screen">pre 태그에 블럭효과 주기</pre>