HTML + CSS 카카오톡 채팅창 화면 만들기 3장 - 대화 티키타카 마무리

지난시간까지해서 프로필 아이콘 만들기와 말풍선 만들기까지 완료했습니다. 이제는 상대방과 자신과의 대화 티키타가가 오고가는 스타일을 만들어 보도록 합니다. 혹시 본 페이지를 검색으로 처음 방문하셨다면 아래 두 개의 내용을 먼저 읽어보시기 바랍니다. 그래야 본문이 이해됩니다. 내용이 이어지기 때문이지요.

 

HTML + CSS 카카오톡 채팅창 화면 만들기 1장 - 프로필 아이콘 표현하기

HTML + CSS 카카오톡 채팅창 화면 만들기 2장 - 대화창 (말풍선)

 

미리보기

최종적으로 이렇게 완성이 될 것입니다.

 

See the Pen 카카오톡 채팅창 만들기 by rgy0409 (@rgy0409) on CodePen.

 

지난시간까지는 상대방의 말풍선을 완성했으니 이번에는 자신이 답변을 할 때의 말풍선입니다. 카톡에서 상대방은 왼쪽, 자신은 오른쪽이니까 말풍선 > 말풍선꼬리 > 프로필아이콘 순으로 배치하면 될 것 같습니다. 따라서 2장에서 완성시켰던 말풍선 그룹을 역순으로 배치시키면 됩니다. 따라서 CSS에서는 아래와 같이 마크업했습니다.

 

CSS

.wrap .ch2 {
    flex-direction: row-reverse;
}

.wrap .ch2 .textbox {
    margin-right: 20px;
    background-color: #F9EB54;
}

.wrap .ch2 .textbox::before {
    right: -15px;
    content: "▶";
    color: #F9EB54;
}

ch2 클래스명과 ch1 클래스명 두 개가 있습니다. ch1은 상대방의 말풍선에 대한 스타일을 담고 있으며 ch2가 나 자신의 말풍선 스타일을 담당합니다. ch1은 좌측정렬이 기본이죠? 따라서 ch1와 ch2의 공통 클래스명인 chat에는 justify-content: flex-start가 기본 옵션으로 적용이 되어 있는 상태입니다. display: flex를 사용하면 기본값으로 적용됩니다.

 

그런데 ch2에는 이것의 반대 개념인 justify-content: flex-end 를 사용하면 될 것 같습니다만 이렇게 적용시켜버리면 단지 좌측배치가 우측으로 정렬되는 것일 뿐! 말풍선 / 말풍선 꼬리 / 프로필아이콘의 순서는 변하지 않습니다. 따라서 이것을 반전시켜줘야 합니다. 그렇기에 .wrap .ch2 선택자에는 flex-direction: row-reverse; 라는 스타일이 적용되었습니다. 이렇게하면 row (열) 에 대한 reverse (반전) 효과가 발생합니다.

 

따라서 파란색 영역의 ch1를 완벽히 반전시켜 초록색 영역인 ch2처럼 배치가 이루어집니다.

 

그리고 카카오톡 대화창 디자인을 보면 상대방의 말풍선은 밝은 회색 계열이고 자신의 말풍선 색상은 노란색 계열입니다. 그러므로 ch2 클래스명에도 색상을 별도로 지정했습니다. 또한 가상요소의 콘텐츠(content)는 ch1과 반대 디자인의 특수문자가 들어있습니다. 그래야 말풍선 방향이 바뀌니까요. 그밖에 ch1에 적용되어있던 margin-left는 ch2에서 margin-right로 변경해주고 ch1 가상요소에 적용되어있던 위치값인 left는 ch2에서는 반대가 되어야하니 right로 적용시켜 주었습니다. 이렇게해서 완벽하게 스타일을 반전시킬 수 있습니다. 그러면 한번 직접 적용시켜 보시기 바랍니다. 이제 백그라운드만 푸르스름하게 적용시켜버리면 끝납니다.

 

전체 백그라운드 적용

이제 푸르스름한 백그라운드 영역만 남았습니다. 이건 간단하지요?

 

.wrap {
    padding: 40px 0;
    background-color: #A8C0D6;
}

최상위 루트에 위치한 부모 요소인 .wrap 클래스명의 div에 적절히 패딩값을 주고 백그라운드 색상을 넣어주면 끝입니다. 패딩값은 원하는 값을 입력하시면 될 것 같습니다. 이렇게해서 HTML과 CSS로 카카오톡 대화창 만들기의 모든 과정이 끝났습니다. 모두 고생하셨습니다. 끝.