블록인용구를 말풍선 스타일로

요즘은 왠지 글 자체보다 스킨 바꾸는 게 더 재밌어서 스킨을 이것 저것 만져보고 있음.

기존엔 인용구 왼쪽을 두꺼운 은색 테두리로 장식하고, 기울임체로 포인트를 줬었음. 꽤 마음에 드는 스타일 이었는데 요즘 대세인 말풍선으로 갈아치움. 기울임체가 비클리어타입 글꼴에서 눈 아프다는 의견도 받아들여 다시 일반 글꼴로 표시함. 결국 예전처럼 블로그에 설정된 기본 글꼴을 없에버림.

이미지를 되도록 사용하지 않으려는 내 소신에 따라 이미지 없는 말풍선 스타일을 만들기 위해 두가지 기법을 사용했음. 하나는 CSS의 border 속성으로 화살표 부분 생성. 또 하나는 만들어진 화살표를 jquery로 게시물 영역의 모든 blockquote 요소마다 출력.

CSS로 화살표 만드는 방법은 다음과 같음.

arrow_outter { border-color: transparent silver transparent transparent; width: 0; height: 0; position: absolute; border-width: 1ex 1.7ex 1ex; border-style: solid; margin: 10px 0 0 -35px;" }

border 속성을 사용한 요소의 테두리의 상하좌우 경계면이 대각선으로 생성되는 것을 이용해, 한군데만 남기고 투명한 테두리를 만들면 삼각형처럼 보임. 실제로 보이는 부분은 테두리 부분이니까 테두리의 테두리 역할을 할 삼각형 하나를 더 만들어서 뒤에 깔아주면 화살표처럼 보임.

blockquote 요소마다 화살표를 뿌리는 jquery구문은 prepend를 사용했음.

$('blockquote').prepend('<div class="arrow_outter"></div><div class="arrow_inner"></div>);

prepend, apend, apendTo가 다 비슷비슷한 기능.

그래서 완성된 블록인용구 스타일...

...은(는) 이런 느낌.

블록인용구 요소 너비가 브라우저 마다 조금씩 달라서 크롬만 맞춰놨음. 나머지는 안 함.

끝.