Speech Balloon Creator - 말풍선 CSS 생성기

CSS로 쉽게 말풍선을 추가하는 방법

CSS를 사용하여 말풍선을 추가하는 방법이 인터넷에 많이 나와 있습니다. bbPress에서 Reply(답변)말풍선으로 대체하려고 여러 가지 코드를 적용했지만 레이아웃이 틀어지는 현상이 나타나네요. 그러다가 말풍선 코드를 쉽게 생성해주는 사이트를 발견했습니다.

http://www.ilikepixels.co.uk/drop/bubbler/라는 사이트입니다.

Speech Balloon Creator - 말풍선 CSS 생성기위의 그림과 같이 아래의 세 개의 박스에서 슬라이드 막대를 적절히 이동시키면 위쪽에 실제 모양이 표시되어 쉽게 원하는 모양의 말풍선 CSS를 만들 수 있습니다. 적절히 옵션을 지정한 후에 사이트의 오른쪽 맨 위에 있는 “CSS” 버튼을 누르면 CSS 코드를 복사하여 실제 작업에 사용할 수 있습니다.

여기에서 핵심은 인용구임을 표시하는 삼각형 모양의 아이콘을 추가하는 것입니다. 그리고 http://www.ilikepixels.co.uk/drop/bubbler/ 사이트에서는 삼각형 아이콘의 위치를 원하는 곳에 배치할 수 있어 매우 유용합니다.

워드프레스 포럼 플러그인 bbPress에 적용해보면:

Speech Balloon in bbPress

위와 같이 말풍선 모양이 만들어졌습니다. 단순히 라운딩 처리(border-radius)하는 것보다 보기가 더 좋아졌네요. 한가할 때 색상도 조정해보아야 하겠습니다.

참고:

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.