참고: 인기 워드프레스 테마인 아바다X 테마, BE 테마가 39달러, Jupiter가 35달러로 할인 중입니다.

최근 워드프레스 테마를 변경하고 나니 blockquote 태그가 제대로 적용되지 않고 보통 텍스트 형식으로 나오네요. 그래서 단순한 blockquote 서식을 검색하여 적용해보았습니다.

blockquote {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
// Source: css-tricks.com

그러면 다음과 같이 인용구가 심플한 형식으로 표시됩니다.

Simple Blockquote - 심플한 인용구

원하는 경우 왼쪽에 있는 세로 막대의 레이아웃을 조정하여 단순함을 없애는 것도 가능하겠죠? 예를 들어, 왼쪽 테두리를 다음과 같이 바꾸면:

border-left: 6px solid #c76c0c;

인용구 모양이 아래 그림과 같이 바뀝니다.

Simple Blockquote- variable

 

box-shadow 효과를 두면 조금 더 모양이 개선됩니다.

border-left: 6px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;

그러면 모양이 다음과 같이 그림자 효과가 추가됩니다.

Simple Blockquote- variable 2원하는 경우 색상을 파란색 계열로 바꾸어도 괜찮을 것 같습니다. (해당 사이트의 색상과 조화를 이루는 색상을 선택하시면 좋을 듯 합니다.)

참고:

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.