심플한 인용구(Blockquote) 레이아웃(CSS)

최근 워드프레스 테마를 변경하고 나니 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)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.