최근 svg가 많이 이용됩니다. 화려한 애니메이션도 가능하고 무엇보다 일반 그래픽보다 많이 가볍습니다.

애니메이션 구현을 위해 복잡한 path를 일반적으로 사용하는데 쉽게 구현하는 방법도 있습니다.

일종의 변칙같기도...

 

<svg viewBox="0 0 200 20" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="dotum,sans-serif" fill="#dc3545" x="0" y="15">웹학교</text>
    <rect fill="white" x="0" y="0" width="0" height="20">
      <animate attributeName="x" values="0 ; 50 ; 50 ; 0" dur="3s" repeatCount="indefinite" />
      <animate attributeName="width" values="50; 0; 0; 50" dur="3s" repeatCount="indefinite" />
    </rect>
    <rect fill="black" x="0" y="4" width="1" height="12">
      <animate attributeName="x" values="0 ; 50 ; 50 ; 0" dur="3s" repeatCount="indefinite" />
      <animate attributeName="width" calcMode="discrete" values="1; 0" dur="1s" repeatCount="indefinite" />
    </rect>
  </g>
</svg>

 

외부 css를 사용하지 않기 때문에 이미지 태그를 이용하여 처리하기도 편합니다.

위 파일을 demo.svg로 저장하고

<img src="demo.svg" alt="logo"> 이렇게 반영하면 됩니다.

웹학교를 방문하여 로고를 확인해 보세요. 다양하게 응용이 가능할 것 같습니다.

 

그누보드강좌/영카트강좌 - 기초부터 적용까지 체계적인 영상강좌

프로그래밍 실력 확인하기
PHP한글설명서

By 웹학교