코딩 지식이 없어도 말풍선을 쉽게 적용할 수 있는 말풍선 CSS 코드 생성 사이트입니다.
CSS로 말풍선을 만들때는 가상 요소인 ::before, ::after를 사용합니다. 초보인 제가 직접 코드를 작성하기에는 조금 어려웠는데 만들어 주는 사이트가 있어서 너무 반가웠어요!
CSS 말풍선 생성 사이트
1. Bubbly
말풍선 꼬리의 위치,방향, 크기, 배경 색상을 클릭과 드래그로 조정하면 오른쪽에 CSS 코드를 즉시 만들어 줍니다.
Bubbly
너비와 높이가 설정하려면 width:300px; ‧ height:100px;, 테두리 둥글기의 값을 조정하여 사용하고자 하는 사이트와 어울리게 변경하면 됩니다. 예를 들어 각진 말풍선을 표시하려면 border-radius:0; 으로 수정합니다.
2. Bubbler
Bubbly와 같은 기능이지만, 조금 더 세부적인 CSS 코드를 자동으로 생성할 수 있습니다. 너비와 높이, 안쪽 여백, 테두리의 둥글기, 테두리의 색상과, 굵기를 마우스 드래그로 값을 조정합니다.
Bubbler
설정을 완료하고 난 후 상단의 CSS버튼을 누르면 생성된 CSS 코드를 복사할 수 있습니다.
적용 예시
아래 결과 탭을 눌러 CSS 말풍선을 확인해보세요.
<div class="bubble1">CSS 말풍선</div>
.bubble1 {
position: relative;
background: #00aabb;
border-radius: .4em;
width: 100px;
color: #fff;
padding:10px;
text-align :center;
}
.bubble1:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-left: 0;
margin-left: -10px;
margin-bottom: -10px;
}
CSS 말풍선
말풍선 꼬리의 크기를 줄이려면 ::after의 border의 값을 줄이고 margin-bottom의 값도 변경해야 합니다.
예를 들어border: 5px solid transparent;이렇게 줄였다면 margin-bottom: -5px;로 수정합니다.
아래 방향의 꼬리이기 때문에 margin-bottom값을 변경하는 거예요. 위쪽을 향한 꼬리라면 bottom-top의 값을 수정해야 합니다.
직접 수정해야 하는 부분이 조금 있지만, 기본적인 코드를 만들어 줘서 조금 편하게 사용할 수 있게 되었네요.