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

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

CSS로 쉽게 말풍선을 추가하는 방법 - 말풍선 자동 생성 사이트

CSS로 말풍선을 만들고 싶은 경우 말풍선 자동 생성 사이트를 이용해볼 수 있습니다. 제가 발견한 사이트는 https://www.ilikepixels.co.uk/bubbler/ 입니다.

Speech Balloon Creator - 말풍선 CSS 생성기

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

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

예시:

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

Speech Balloon in bbPress

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

참고로 플러그인, javascript/jQuery 템플릿, PHP 스크립트 등 각종 코드를 판매하는 Codecanyon에서 메뉴 스타일, 테이블 등 다양한 효과를 구현하는 CSS 코드나 자바스크립트/jQuery 템플릿을 구입할 수 있습니다.

Codecanyon에서 판매되는 CSS 코드
Codecanyon에서 판매되는 베스트셀링 CSS 코드

※ 이 글에서 소개한 사이트의 링크를 클릭하면 없는 페이지라고 표시되네요. 대신 이 사이트를 이용해보세요. 위에서 소개한 사이트의 도구보다 더 기능이 좋은 것 같습니다.

말풍선 자동 생성 사이트

워드프레스 말풍선 플러그인

워드프레스에서 쉽게 말풍선을 넣고 싶은 경우 말풍선 플러그인을 설치하여 사용할 수 있습니다.

워드프레스에서 컬러 텍스트 상자 만들기

워드프레스에서는 문단 블록에 배경색을 지정하는 옵션을 사용하여 컬러 텍스트 상자를 만들 수 있습니다.

커스텀 스타일을 지정하고 싶은 경우 CSS 클래스를 지정하고 CSS로 스타일을 정의할 수 있습니다.

자바스크립트를 활용하면 아래와 같이 조금 더 화려한(?) 텍스트 박스를 만들 수 있습니다.

워드프레스를 안전하게 운영하기 위해 항상 최신 버전으로 업데이트하고 오랫동안 업데이트가 안 되고 방치되는 플러그인을 삭제하시기 바랍니다. 또한, 정기적으로 백업하여 PC나 클라우드 저장소에 보관하시기 바랍니다.

참고:


8개 댓글

  1. 안녕하세요, 글을 적다가 본문중에 위의 말풍선형태로 (마치 인용처럼) 넣으려고 하면 위의 css를 어떻게 적용해야 할까요? 블록-고급-css 에 넣어봤는데 반응이 없고, 테마의 사용자 정의 css에 넣으면 speech-bubble을 따로 불러올 수 있는 명령어 등이 있는걸까요?

      1. 감사합니다, 일단 비슷한 형태의 플러그인 speech balloon을 사용하고 있어서요...

        막 시도해보다가 인용문의 스타일을 변경하는 방법은 알겠는데요, 스타일을 추가해서 실제 글을 쓸때 인용 디자인을 골라가며 사용할 수 있는 방법은 없을까요?

        예를 들면 기존 괄호형 인용문과, 추가해서 말풍선형 인용문을 함께 하나의 글에 사용하는 방법같은것 말이죠

댓글 남기기

* 이메일 주소는 공개되지 않습니다.