예제 및 동작 원리

안녕하세요! 오늘은 HTML의 이미지를 추가하고 멀티미디어를 다루는 방법에 대해 배워보겠습니다. HTML은 웹페이지를 구성하는 기본 언어로, 이미지와 동영상을 적절히 활용하면 웹페이지를 더욱 풍부하고 매력적으로 만들 수 있습니다.

웹페이지에 이미지를 추가하는 것은 아주 간단합니다. 'img' 태그를 사용하면 되는데요, 이는 이미지의 경로와 대체 텍스트를 설정할 수 있는 기능을 제공합니다.

위 코드는 'src' 속성에 이미지 파일의 경로를 입력하고, 'alt' 속성에는 이미지가 로드되지 않을 때 어떤 이미지인지 설명을 추가합니다. 예를 들어, 'logo.png'라는 이미지를 추가하고 싶다면 다음과 같이 작성할 수 있습니다.

이제 브라우저에서 페이지를 열어보면 회사 로고 이미지가 보일 것입니다!

HTML에서는 'video' 태그를 사용하여 동영상을 삽입할 수 있습니다. 이 태그는 여러 속성을 통해 사용자에게 편리한 기능을 제공합니다.

위 코드에서 'controls' 속성은 비디오 플레이어의 재생, 일시 정지, 삭제 등의 버튼을 표시하도록 합니다. 사용자가 보다 쉽게 동영상을 조작할 수 있게 돕는 중요한 부분입니다.

오늘 배운 내용을 정리하면,

• 'img' 태그를 사용하여 이미지를 추가할 수 있습니다.
• 대체 텍스트는 이미지 설명에 매우 유용합니다.
• 'video' 태그를 사용해 동영상을 추가하고, 'controls' 속성을 통해 사용자에게 조작 버튼을 제공합니다.

1. 본인의 사진을 웹페이지에 추가해보세요.
2. 흥미로운 동영상을 찾아 웹페이지에 삽입해보세요.

이제 배운 내용을 바탕으로 자기소개 페이지를 만들어보세요. 이름, 사진, 간단한 소개글을 포함시키고, 좋아하는 동영상을 추가해보세요!

이 프로젝트를 통해 여러분은 HTML을 이용해 자신을 표현하고, 더 나아가 웹 페이지의 기본적인 구조를 이해하는 데 도움이 될 것입니다.

끝으로, 웹페이지에 이미지와 동영상을 추가하면 더욱 생동감 있는 콘텐츠를 만들 수 있습니다. 계속해서 다양한 태그와 속성을 배우며 멋진 웹페이지를 만들어가길 바랍니다!