캐릭터 말풍선 구현하기 for obsidian & website

들어가며

안녕하세요. 심심해서 포니가 대화하는 말풍선을 만들어 보았습니다.

 

자세한 코드는 제 깃허브에 올려두겠습니다. 

GitHub - star-swizzle-maker/character_speech_bubble: Pony speech bubble code for Obsidian Notes and web pages.

 

이미지 주소와 캐릭터 이름만 변경하면 원하시는 캐릭터가 대화하는 모습을 글로 작성할 수 있습니다.

수정사항

[2025-04-14] 대사 말풍선과 프로필 사진 아래에 옅은 그림자 효과를 추가했습니다.

 

사용법

1. web_speech_bubble.css안의 코드를 웹페이지 css 설정 아래에 붙여 넣는다.
2. web_speech_bubble.html 안의 

<div class="chat-container">
<div class="chat-header">
<img class="character-avatar" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fblfn5u%2FbtsMLxjGKNN%2F9Iab123BsKKKqjrSHxCNT1%2Fimg.jpg" alt="트와일라잇" />   <!-- input image addres -->
<span class="character-name">트와일라잇</span>  <!-- input character's name -->
</div>
<div class="speech-bubble">  <!-- input character's speech -->
참 간단하죠?
</div>
</div>

이 부분을 글 작성시 html 편집기에 붙여넣여 넣는다.

3. `src=""` 여기 큰따옴표 안에 이미지 주소를 넣는다.
4. `<span class="character-name">트와일라잇</span>` tag 사이에 캐릭터 이름을 기입한다.
5. `<div class="speech-bubble">참 간단하죠?</div>` tag 사이에 대사를 기입한다.
6. 끝

 

트와일라잇

참 간단하죠?

포니 캐릭터 프로필 사진

 

 

예시

 

트와일라잇

안녕 나는 트와일라잇이야!

트와일라잇

안녕 나는 트와일라잇이야!

모드 파이

안녕 나는 모드 파이야.

모드 파이

안녕 나는 모드 파이야.

핑키 파이

안녕 나는 핑키 파이야! 만나서 반가워!!!

핑키 파이

안녕 나는 핑키 파이야! 만나서 반가워!!!

문댄서

안녕 나는 문댄서야.

문댄서

안녕 나는 문댄서야.

라임스톤 파이

안녕 멍청아, 나는 라임스톤 파이야.

라임스톤 파이

안녕 멍청아, 나는 라임스톤 파이야.