들어가기에 앞서, 로더란 로딩 중에 나타나는 이미지를 말합니다. loading.io 등의 사이트에서 받을 수 있는 이미지가 그 예시겠네요. 적재적소에 활용하면 로딩 중이란 걸 가장 직관적으로 나타낼 수 있습니다. 기본적으로 흔히 사용하는 돌아가는 원과 트와이스 로고를 활용해 만들었습니다. 원 하나가 로고를 감싸고 빙빙 도는 방식입니다. 원의 색상은 트와이스 공식 색상 두 가지가 계속 반복되도록 해뒀습니다. 로고를 조금 더 작게 만든 2번째 버전입니다. 로고에 애니메이션을 추가한 3번째 버전입니다.

V 앱(vlive.tv)의 svg 아이콘입니다. 하늘색 배경의 색상 코드는 #54f7ff, 남색 글자의 색상 코드는 #46465a 입니다. svg엔 기본적으로 색상을 넣지 않았으니, 사용하실 때 참고해주세요.

카카오톡 정도면 아이콘 폰트용 svg도 인터넷에 있지 않을까 싶었는데 제 착각이었습니다 ;; 예전엔 귀찮아서 댓글 모양의 아이콘으로 사용하다가, 이번에 새 스킨 작업하며 새 마음 새 뜻으로 작업해봤습니다. 아이콘 폰트용이라 색상이 들어있지 않으니. svg로 사용하실 땐 fill로 색상을 채워주셔야 합니다.

티스토리의 업데이트된 로고입니다. 예전에 작업했던 자료랑 좀 안 맞아서 처음부터 했네요 ㅠㅠ아이콘 폰트용으로 작업해서 색상이 들어있지 않습니다. svg로 사용하시려면 fill을 이용해주세요.

소녀시대 로고 두 개를 svg로 작업해봤습니다.svg 파일의 장점과 특징은 이전 글에 정리를 조금 해놓았습니다. 혹 svg를 모르신다면 먼저 저 글을 보시는 것도 나쁘진 않은 선택지라 생각합니다. 위 svg 파일엔 아무런 색상도 들어있지 않습니다. 아래 이미지처럼 포이게 하시려면, svg에 fill="#f09d9d" 란 옵션을 주셔야 합니다. 정확한 공식 색이 있다면 그거로 작업을 했을 텐데, 공식 색 색상 코드가 찾아봐도 잘 찾아지지 않아서 색이 조금 다를 수 있습니다. Girls Generation.svg의 모습입니다. 소녀시대 Party 로고입니다.포토샵으로 옮겨오면서 i의 점이 좀 이상해졌는데, 원본 파일은 그렇지 않습니다 ㅠㅠ Girls Generation2.svg의 모습입니다. 소녀시대 정규 ..

아이콘 폰트로 적용한 모습 티스토리 로고의 svg 파일입니다. 아직 일러스트레이터 다루는 게 서툴러서 삽질을 좀 했네요 ㅠㅠ위는 아무런 색도 채우지 않은 svg 파일, 아래는 티스토리 색(#eb531f)으로 채운 svg 파일입니다. svg 코드티스토리 로고

svg는 벡터 이미지로, 기존의 이미지 파일들처럼 확대하면 깨지는 현상이 발생하지 않습니다. 외에도, css를 통해 기존의 이미지보다 다양한 효과를 줄 수 있으니 웹에선 기존의 이미지보다 훨씬 자유롭고 다양하게 활용할 수 있습니다. 아래의 이미지가 위 첨부 파일의 모습입니다. 응용하면 이런저런 효과들을 줄 수 있습니다. 이렇게 외곽선을 그리는 애니메이션을 사용할 수 있고 기존의 css 애니메이션들도 물론 자유롭게 이용할 수 있습니다! https://daneden.github.io/animate.css/ css 애니메이션 참고용 사이트