Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 페이지에 애니메이션 이미지(GIF)를 넣는 방법

HTML에서 애니메이션 이미지란 웹 페이지 위에서 실제로 움직이는 이미지를 의미합니다. 주로 GIF(Graphics Interchange Format, 그래픽 교환 형식) 파일 형식으로 제작되며, 여러 장의 프레임이 연속再生되어 자연스러운 움직임을 표현합니다.

애니메이션 이미지 추가하기

HTML에 애니메이션 이미지를 추가하는 방법은 매우 간단합니다. 일반 이미지와 동일하게 <img> 태그를 사용하며, src 속성에 이미지 파일의 URL 경로를 지정하면 됩니다.

추가로 height 속성과 width 속성을 함께 사용하면 이미지의 세로·가로 크기를 원하는 대로 조절할 수 있습니다.

  • src: 표시할 이미지 파일의 URL 또는 경로를 지정합니다.
  • height: 이미지의 높이를 픽셀 단위 등으로 설정합니다.
  • width: 이미지의 너비를 픽셀 단위 등으로 설정합니다.

예제 코드

아래 예제를 실행하면 HTML 페이지에서 애니메이션 이미지가 정상적으로 재생되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>Animated Image</title>
   </head>
   <body>
      <h1>Animated Image</h1>
      <img src="https://media.giphy.com/media/3o6UBpHgaXFDNAuttm/giphy.gif">
   </body>
</html>

위 코드에서 <img> 태그의 src 속성에 GIF 파일의 URL을 넣기만 하면, 별도의 JavaScript나 CSS 없이도 브라우저가 자동으로 애니메이션을 재생합니다. 필요에 따라 alt 속성을 추가해 이미지가 로드되지 않을 때 대체 텍스트를 제공하는 것도 좋은 습관입니다.