[css] 반응형 이미지 및 비디오 스타일링

22 Dec 2023

이번 포스트에서는 웹사이트에서 반응형 이미지와 비디오를 스타일링하는 방법에 대해 알아보겠습니다.

반응형 이미지 스타일링

반응형 웹디자인에서 이미지는 화면의 크기에 따라 유동적으로 변해야 합니다. CSS를 사용하여 이미지를 반응형으로 만들기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

img {
  max-width: 100%;
  height: auto;
  display: block; /* 이미지 간격과 세로 정렬을 위해 필요 */
}

위 코드는 이미지가 부모 요소의 너비에 맞춰지도록하며, display: block;는 이미지 간격과 세로 정렬을 조정하기 위해 필요합니다.

반응형 비디오 스타일링

비디오를 반응형으로 스타일링하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 비율에 맞게 조정 */
  padding-top: 30px; /* 비디오 위 여백 조정 */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

위 코드는 비디오 컨테이너를 생성하여 비디오를 반응형으로 만들기 위해 사용됩니다. padding-bottom 값은 16:9 비율에 맞게 조정됩니다.

이제 반응형 이미지와 비디오를 스타일링하는 방법에 대해 알아보았습니다. 웹페이지의 사용자 경험 향상을 위해 위의 방법들을 활용해 보시기 바랍니다.