친절한효자손 취미생활

안녕하세요. 오늘은 스타벅스 로고를 SVG 파일로 변환 후 HTML 코드로 표현해 보았습니다. 코드는 늘 그렇듯 코드팬에 올려두었습니다. 두 가지 버전이 있습니다. 글씨까지 들어있는 풀 버전이 있고 다른 하나는 사이렌 로고만 있는 심플 버전입니다. 하나씩 살펴보시기 바랍니다. Full Version See the Pen Starbucks_LOGO_FULL by rgy0409 ( @rgy0409 ) on CodePen . HTML 코드를 전체 복사 후 사용하시면 됩니다. Simple Version See the Pen Starbucks_LOGO_Simple by rgy0409 ( @rgy0409 ) on CodePen . 이것도 마찬가지로 코드 전체를 복사 후 사용하시면 됩니다. SVG 파일 만들기 스타벅스 로고는 아무래도 복잡합니다. 그래서 코드도 많아요. 따라서 이 코드를 다 쓰는것보다는 SVG 파일로 제작 후 해당 파일을 img 처럼 사용하는것이 효율적일지도 모릅니다. SVG 파일로 만드는건 간단합니다. 1. HTML 모든 코드를 전체 복사 함 2. 메모장에 붙여넣기 함 3. 저장 시 파일 확장자를 SVG로 저장함 이게 답니다. 간단하죠? 응용하기 이제 SVG 파일로 저장했으므로 해당 파일은 img 태그를 사용해서 편리하게 활용하시면 됩니다. 그냥 이미지 파일이라고 생각하고 사용하면 됩니다. 이런식으로 가로 크기만 지정해주면 원하는 크기대로 변경 가능합니다. SVG 이미지는 백터 방식이기에 크기를 확대해도 절대 이미지가 픽셀처럼 깨지지 않는 장점이 있습니다. 따라서 웹 기반에서 사용하기에 매우 안성맞춤인 이미지 포맷입니다. 오늘 내용 끝!

이번에는 아디다스 로고입니다. 어도비 일러스트레이터로 편집 후 HTML 코드로 변환하였습니다. 코드는 오리지널 로고와 신형 두 가지 모두 적용시켰습니다. 말이 필요없죠? 바로 미리보기로 살펴보시겠습니다. 미리보기 로고는 이렇게 두 가지를 준비했습니다. 보시면 아시겠죠? 구버전과 신버전의 아디다스 로고입니다. 구버전(Origin) See the Pen adidas_New_LOGO by rgy0409 ( @rgy0409 ) on CodePen . 신버전(New) See the Pen adidas_New_LOGO by rgy0409 ( @rgy0409 ) on CodePen . 사용 방법 적용시키고자 하는 웹문서에 HTML 코드를 몽땅 복사 후 그대로 붙여넣기 하시면 됩니다. 색상 변경은 fill 부분의 16진수 코드를 변경하시면 됩니다. 기타 궁금 사항은 댓글로 질문 주시면 확인하는대로 답변 드리겠습니다. 오늘 내용 끝!

나이키 로고를 일러스트레이터로 제작 후 이것을 다시 HTML 코드로 변경했습니다. SVG 벡터 아이콘 코드이며 본문에 소개한 HTML코드를 모두 한번에 사용하시면 됩니다. 먼저 예제 소스 미리보기입니다. 미리보기 See the Pen NIKE_Logo_HTML(SVG) by rgy0409 ( @rgy0409 ) on CodePen . 사용된 코드는 HTML 뿐입니다. CSS나 JS는 전혀 없습니다. 코드 다운로드 위의 코드펜에 마크업 되어있는 HTML코드를 몽땅 긁어가셔도 됩니다. 코드펜 오류로 인해 보이지 않는 경우에는 아래의 텍스트 문서를 다운로드 받으시어 사용하시면 됩니다. 코드 다운로드 나이키 로고 (HTML) 사용 방법 별거없죠? 그냥 통째로 복사 후 원하는 위치에 그대로 HTML 코드를 붙여넣기해서 사용하면 됩니다. 크기를 변경하는 방법은 간단하게 transform: scale(1); CSS 속성을 path의 클래스명에 사용하면 됩니다. 원래 크기가 1이므로 크기를 줄이려고 한다면 1보다 낮은 소수값을 사용하면 됩니다. 소수점 두번째 자리까지도 인식합니다. 위의 미리보기에 있는 CSS 탭의 코드를 살펴보시기 바랍니다. 변수를 변경해서 적용시켜 보세요. 실시간으로 나이키 로고의 크기가 변경됩니다. 오늘 내용 끝!