카카오톡 아이콘 로고 (Icon Logo) HTML SVG 코드

티스토리의 세번째 반응형 스킨을 준비 중입니다. 최대한 이미지를 사용하지 않고 어떻게든 HTML으로만 구성하려고 애를 쓰는 중입니다. 특히나 아이콘 이미지의 경우에는 사이즈가 작은게 특징인데 이게 특정 디바이스 또는 특정 브라우저에서는 이따금씩 깨져 나오거나, 이미지가 X표시가 되는 문제가 아주 가아끄음 발생하기도 합니다. 그래서 이런 고충을 최대한 해결하기 위해 최근 열심히 각종 플랫폼 로고를 SVG로 변환하고 있습니다. 오늘은 한국인이라면 누구나 다 사용하고 알고 있는 카카오톡 아이콘입니다.

 

미리보기

See the Pen KakaoTalk Icon SVG by rgy0409 (@rgy0409) on CodePen.

 

코드펜에 카카오톡 아이콘을 SVG 코드로 올려두었으니 그대로 HTML 코드를 가져가 사용하시면 되시겠습니다. 참고로 오리지널 카카오톡의 경우에는 기본적으로 모서리에 둥근 라운드 효과가 적용되어 있습니다. 저는 이 라운드 부분을 일부러 없앴습니다. 어차피 웹 아이콘처럼 사용할 것이고 굳이 라운드 효과를 주려면 위의 예제에 있는 CSS 코드처럼 SVG에 직접 border-radius를 사용하면 되기 때문입니다. 크기 조절도 자유롭게 하시면 되시겠습니다. 예제에서는 가로 사이즈를 조절하는 방법을 사용했지만 경우에 따라서 transform: scale(); 을 사용해도 무방합니다.

 

활용하기

사용 방법 또한 매우 간단합니다. 이미지를 넣을 자리에 SVG 관련 코드만 넣으면 됩니다. 간단한 테스트로 ul 안에 두 개의 li를 만들고 위에는 아이콘을, 아래에는 아이콘 텍스트를 넣었습니다. li태그는 기본적으로 블록 요소이니 세로 정렬 상태입니다. 결과물을 살펴볼까요?

 

요런식으로 아이콘이 완성 되었습니다. CSS에서는 svg를 직접 입력해 스타일을 만들수도 있고 여러개의 SVG 태그를 사용한다면 당연히 클래스명을 각자 부여해 따로 제어가 가능합니다. 끝.