위플랩에서 적용 가능한 채팅창 CSS스타일 생성기 입니다

1. 기본 레이아웃 설정

• 채팅 간격 : 각 채팅 말풍선 사이의 위아래 간격을 조절합니다.
• 리스트 상하 여백 & 리스트 좌우 여백 : 채팅창 전체 영역의 상하 및 좌우 테두리 안쪽 여백을 조절합니다.

2. 말풍선 배경 설정

• 배경 색상 & 투명도 : 말풍선 배경색과 불투명도(Alpha)를 투명한 느낌부터 불투명까지 조절합니다.
• 배경 둥글기 : 말풍선 모서리의 곡률을 조절합니다 (0px ~ 100px).
• 테두리 굵기 & 색상 & 투명도 : 말풍선 테두리의 굵기와 색상, 테두리의 투명도를 조절합니다.
• 상·하·좌·우 안쪽 패딩 : 말풍선 내부의 상하좌우 여백을 개별적으로 슬라이더로 조절합니다.
• 그림자 설정 : 말풍선 뒤에 깔리는 그림자의 색상, 투명도, X/Y 거리, 흐림 정도(blur)를 슬라이더로 정교하게 조절합니다.

3. 글자 스타일 설정

• 채팅 글자 색상 : 말풍선 안의 채팅 텍스트 본문 색상을 설정합니다.
• 글자 테두리 색상 : 글자의 가독성을 높이기 위해 주변에 그려지는 텍스트 외곽선 색상을 조절합니다.

4. 장식 이미지 설정

• 이미지 첨부 및 주소 : svg, png, gif 등 로컬 파일을 업로드하면 자동으로 Base64 데이터 주소로 변환되어 CSS에 영구 삽입됩니다. 일반 이미지 URL을 직접 입력할 수도 있습니다.
• 이미지 정렬 위치 : 이미지를 말풍선 기준 좌상단 또는 우상단 중 어디에 얹을지 선택합니다.
• 이미지 Top 위치값 : 장식 이미지의 세로 방향 위치를 조절합니다 (보통 음수값으로 주어 말풍선 위로 얹어 사용합니다).
• 이미지 Side 위치값 : 이미지 정렬 위치 기준에서 좌/우로 삐져나갈 오프셋 거리를 조절합니다.
• 이미지 가로 & 세로 크기 : 장식 이미지의 크기를 픽셀 단위로 개별 조절합니다.
• 이미지 회전 각도 : 장식 이미지를 회전시킬 수 있습니다.