blockquote Style 수정
2005.04.19 ,
오후 01:01 
워드프레스, 웹 디자인 
3 comments »
나는 워드프레스에서 새글을 작성할 때 Blockquote(인용문)이라는 빠른태그를 자주 사용하는 편이다.
웹서핑을 하다보면, blockquote에 스타일쉿을 사용하여 예쁘게 꾸며논 블로그나 게시판을 쉽게 찾을 수 있다. 나 역시 박스 형식의 스타일쉿을 사용하곤 했는데, Dmitri Von Klein의 블로그를 보고 따옴표로 바꿔봤다.
BLOCKQUOTE 요소는 인용한 단락을 표시할 때 사용합니다. BLOCKQUOTE는 Q 요소와는 달리 P나 TABLE과 같은 블록 요소를 포함할 수 있습니다. 하지만 BLOCKQUOTE 요소는 문단이나 인라인 요소 안에 포함될 수 없습니다. 출처 : HTML 사전
문제는 LikeJazz님의 글처럼 p 태그가 2개 이상 사용된 blockquote에서는 제대로 출력되지 않는다. 이는 출처 부분의 p 태그에 클래스를 하나 더 삽입해서 해결해야 한다.
사실, CSS2의 :after, :befere를 사용하면 이런 꽁수들을 모두 해결할 수 있다. 하지만, 인터넷익스플러가 이를 표현하지 못하기 때문에 일이 복잡하게 꼬이는 것이다.
blockquote {
background: URL(/blog/wp-content/themes/Blix/images/spring_flavour/bq-bg-b.gif) no-repeat;
margin: 10px 10px;
padding: 5px 0 0 30px;
}
blockquote p {
background: URL(/blog/wp-content/themes/Blix/images/spring_flavour/bq-bg-a.gif) no-repeat right bottom;
margin: 5px;
padding: 0 30px 5px 0;
}
이 글의 스타일쉿은 여기에서 확인할 수 있다.
Hooney라는 ID로 온라인에서 활동하는 조훈입니다. 
3개의 의견이 있습니다. | 당신의 의견을 바랍니다.
1.
일모리 ｜
2005.04.19 ,
오후 02:02 ·
permallink
^^ 아직 blockquote 까지는 안만졌는데 좋네요
저도 이번 작업만 끝나면 다시 손을 좀 봐야겠습니다
2.
psyche ｜
2005.04.19 ,
오후 04:37 ·
permallink
오~ 이뻐요 ㅎㅎ 저도 바꾸고 싶은 마음이.. ㅎㅎ
3.
hooney ｜
2005.04.19 ,
오후 05:40 ·
permallink
일모리님 / 블로그를 사용하다보니 이런저런 것들이 눈에 들어오기 시작하네요. 많이 배우고 있는 중이랍니다.
psyche님 블로그도 이뻐요~
예전에 구경갔을땐 스타일쉿 수정 중이었는데, 이젠 완성이 된듯 싶네요.
당신의 의견을 기다립니다.
사용할 수 있는 HTML 태그 :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>