Friday, August 27, 2010

막대줄이 있는 인용문 꾸미기


블로그 템플릿을 수정하다 보니 배경에 색이 있는 블로그에 큰 따옴표가 있는 Block Quote를 쓰면 큰 따옴표가 블로그 배경 색과 달라서 보기가 좋지 않다. 이를 수정하고자 큰 따옴표 이미지의 배경을 손질하는 것도 뻘질이다 싶어, 인용문을 꾸미는 더 좋은 다른 방법이 있는지 찾다가 'Six Ways to Style Blockquotes'에 있는 'Color and Borders' 코드를 참고하여 왼쪽에 막대줄이 있는 Block Quote를 수정 중인 블로그 템플릿에 넣었다.

수정한 코드는 다음과 같다.

blockquote {
margin: 1em 3em;
/* color: #999; */
border-left: 5px solid #999;
padding-left: 1em; }

위에 코멘트 처리한 /* color: #999; */는 인용한 문장의 글자 색을 변경하는 것으로 HTML 색깔 값에 따라서 여러가지 글자 색으로 효과를 줄 수 있다. 현재는 글자 색을 주지 않도록 코멘트 처리를 한 것이다.


'Six Ways to Style Blockquotes'에는 인용문을 꾸미는 여러가지 방법이 잘 정리되어 있다. 나중에라도 참고 할만한 글이다.

No comments:

Post a Comment