반응형 웹 기초: 가변이미지 / 가변동영상

이미지 요소에도 상대단위 em, vm, % 등을 사용할 수 있다.
이때 주의할 점은 브라우저나 대개 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점이다.

max-width

img {
	max-width: 200px;
    }

max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않게 한다. max-height도 마찬가지이다.

max-width : 100%로 설정한다면, 부모 요소보다 더 커지는 것을 막을 수 있다.

picture

HTML의 picture 요소를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러 올 수 있다.

<picture>
	<source srcset="desktop.png" media="(min-width: 1200px)">
    <source srcset="tablet.png" media="(min-width: 800px)">
    <img src="mobile.png">
</picture>

기본으로 보여줄 이미지 : img tag
반응형 이미지 : source 태그 + media 조건 사용

가변 동영상

이미지를 가변 이미지로 처리해주었던 것과 동일하게 동영상에로 똑같이 처리할 수 있다. 하지만 동영상 서비스에 따라 성질이 조금씩 다를 수 있기 때문에 주의하여야 한다. (유튜브 공유 콘텐츠 / mp4 동영상 파일 등등)

일반적으로 동영상을 보여주는 방법

=> html의 video tag 사용

<video src="./videos/my-cat.mp4" contorls></video>

동영상 서비스로부터 동영상 공유

=> iframe tag를 사용한다.

<iframe width="560" height="315" src="https://www.youtube.com/.... ... >

-> 정확한 비율을 유지하는 여백을 만들어 그 안에서만 동영상이 보여지게 만드는 기법을 사용한다. 자세한 방법은 서치 필요