[HTML/CSS] 웹 페이지에서 이미지와 비디오 사용하기

컴퓨터 화면에서 보여지는 웹 페이지는 이미지와 비디오를 포함한 다양한 미디어 요소들을 활용하여 사용자에게 보다 풍부한 시각적 효과를 제공합니다.

이번 블로그 포스트에서는 HTML/CSS를 사용하여 웹 페이지에서 이미지와 비디오를 사용하는 방법에 대해 알아보고, 간단한 예제도 함께 보겠습니다.

이미지 사용하기

이미지 파일 포맷

웹 페이지에서 사용하는 이미지는 다양한 파일 포맷으로 제공됩니다. 그 중에서도 주로 사용되는 파일 포맷은 다음과 같습니다.

• JPEG(Joint Photographic Experts Group): 사진 등의 복잡한 이미지를 저장할 때 사용되며, 용량이 큰 편입니다.
• PNG(Portable Network Graphics): 그래픽 등의 간단한 이미지를 저장할 때 사용되며, 용량이 작은 편입니다.
• GIF(Graphics Interchange Format): 간단한 애니메이션 효과를 나타낼 때 사용되며, 용량이 작은 편입니다.
• SVG(Scalable Vector Graphics): 벡터 이미지를 저장할 때 사용되며, 해상도에 관계 없이 깨지지 않는 장점이 있습니다.

HTML에서 이미지 삽입하기

HTML에서 이미지를 삽입하는 방법은 다음과 같습니다.

<img src="이미지 파일 경로" alt="대체 텍스트">

• src: 이미지 파일의 경로를 지정합니다.
• alt: 이미지가 로드되지 못했을 때 대체 텍스트를 표시합니다.

<img src="image.jpg" alt="숲의 풍경">

위와 같이 사용할 수 있습니다.

CSS를 사용한 이미지 스타일링

CSS를 사용하여 이미지를 스타일링할 수 있습니다. 예를 들어, 이미지의 크기를 조정하거나, 이미지를 회전시키거나, 이미지의 위치를 조정할 수 있습니다.

img {
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  position: relative;
  top: 10px;
  left: 20px;
}

• width, height: 이미지의 크기를 조정합니다.
• transform: 이미지를 회전시킵니다.
• position: 이미지의 위치를 지정합니다.
• top, left: 이미지의 위치를 상대적으로 조정합니다.

비디오 사용하기

비디오 파일 포맷

웹 페이지에서 사용하는 비디오는 다양한 파일 포맷으로 제공됩니다. 그 중에서도 주로 사용되는 파일 포맷은 다음과 같습니다.

• MP4(MPEG-4 Part 14): 대부분의 브라우저에서 지원되며, 용량이 작은 편입니다.
• WebM: 오픈소스 비디오 코덱으로, Chrome, Firefox 등에서 지원됩니다.
• Ogg: 오픈소스 비디오 코덱으로, Firefox, Chrome 등에서 지원됩니다.

HTML에서 비디오 삽입하기

HTML에서 비디오를 삽입하는 방법은 다음과 같습니다.

<video src="비디오 파일 경로" controls></video>

• src: 비디오 파일의 경로를 지정합니다.
• controls: 비디오를 재생할 수 있는 컨트롤러를 표시합니다.

<video src="video.mp4" controls></video>

위와 같이 사용할 수 있습니다.

CSS를 사용한 비디오 스타일링

CSS를 사용하여 비디오를 스타일링할 수 있습니다. 예를 들어, 비디오의 크기를 조정하거나, 비디오를 회전시키거나, 비디오의 위치를 조정할 수 있습니다.

video {
  width: 300px;
  height: 200px;
  transform: rotate(90deg);
  position: relative;
  top: 10px;
  left: 20px;
}

• width, height: 비디오의 크기를 조정합니다.
• transform: 비디오를 회전시킵니다.
• position: 비디오의 위치를 지정합니다.
• top, left: 비디오의 위치를 상대적으로 조정합니다.