반응형 웹사이트 만들기 (기본 구성 요소 3 - 가변 이미지와 가변 동영상)

가변 이미지란?

가변 이미지란 화면 너비에 따라 이미지의 너비와 높이가 바뀌는 이미지를 말합니다.

이미지 같은 멀티미디어 요소들은 웹 문서에 삽입할 때 너비와 높이 값을 지정하게 되어 있고, 값을 지정하지 않을 경우 원래 크기대로 삽입됩니다. 이때 화면 너빗값에 따라 이미지의 너비가 조절되도록 하기 위해 CSS를 이용해 이미지 너빗값을 100%로 지정하는데, 원래 크기 이상으로 늘리게 되면 화질이 깨집니다. 따라서 max-width 속성을 사용해 최대 너빗값 이상으로는 확대되지 않도록 하는것이 가장 기본적인 가변 이미지 지정 방법입니다.

img {   max-width: 100%; }

다음 소스는 너비가 400px인 이미지를 웹 문서에 삽입한 예제입니다. .pic1 스타일에는 width:100%; 규칙을 지정하고 .pic2 스타일에는 max-width:300px; 규칙을 지정했습니다.

<style>   .pic1 { width:100%; }   .pic2 { max-width: 300px; } </style> <p><img src="images/photo1.jpg" class="pic1"></p> <p><img src="images/photo1.jpg" class="pic2"></p>

.pic1 스타일이 적용된 첫 번째 이미지는 브라우저 창이 확대될 때마다 이미지도 함께 확대됩니다. 그래서 원래 이미지 크기보다 더 크게 확대되면 이미지가 깨져 보이게 되죠. 반면에 max-width:300px;이 사용된 .pic2 스타일을 적용한 이미지는 브라우저 화면이 커지더라도 이미지의 너비를 최대 300px 까지만 확대하도록 제한했기 때문에, 정해진 크기 이상으로는 확대되지 않습니다. min-width 속성을 사용해서 축소되는 너빗값을 제한할 수도 있습니다.

가변 이미지 문제점

그런데 이렇게 처리했을 때 몇 가지 문데들이 있습니다. 가장 큰 문제는 레티나처럼 높은 해상도를 가진 이미지의 처리 문제입니다. 사이트 로고나 작은 아이콘 같은 이미지는 큰 문제가 없지만 레티나급의 이미지를 크기만 줄여서 모바일 기기에 표시한다고 생각해보면 화면에 보여지는 모습은 작어져도 이미지 파일을 다운로드하는데 꽤 오랜 시간이 걸립니다.

또 다른 문제는 모바일 기기를 가로로 보거나 세로로 볼 때 이미지가 다르게 보이는 것입니다. 데스크톱에서는 화면이 넓어서 제대로 보이는 이미지도 모바일 기기에서는 크기가 줄어들면서 알아보기 힘든 경우가 많습니다. 방향을 가로로 돌려서 보면 그나마 조금 낫지만 기본 방향인 세로로 넣고 보면 이미지 안의 내용들이 너무 작게 보이기 때문입니다. 이럴 경우 단순히 width 값을 %로 조절해 보여주는 가변 이미지보다는 이미지 일부만 잘라서 세로 방향의 이미지를 따로 준비하는 게 나을 것입니다.

<img>태그의 srcset 속성

이런 문제점들을 해결하기 위한 첫 번째 방법은 <img> 태그의 srcset 속성입니다. 이 속성은 기본으로 하나의 이미지 파일 경로를 지정합니다. 또한 px 너비를 나타내는 값이나 px 밀도를 나타내는 값과 함께 여러 개의 이미지를 지정할 수도 있습니다.

<img src="기본 이미지" srcset="파일1[. 파일2, 파일3. ...]">

화면 너비에 따라 이미지 파일을 다르게 지정하려고 할 때 '파일명, 너비w'와 같은 형식으로 사용합니다.

<img src="sky.png" srcset="sky-large.png 1024w, sky-medium.png 640w, sky-small.png 320w">

화면에 표시되는 객체의 크기는 px 밀도가 증가할수록 더 작아집니다. 그래서 기본 px 밀도의 이미지를 1x로 한다면 px 밀도 2x일 때는 이미지를 2배 크게 만든다든지 해서 px 밀도에 따라 이미지를 따로 지정할 수 있습니다.

<img src="sky.png" srcset="sky-large.png 3x, sky-medium.png 2x, sky-small.png">

가변 동영상

가변 동영상이란 가변 이미지와 마찬가지로, 화면의 너비가 달라질 때마다 그에 비례해서 너비가 줄어나거나 줄어드는 동영상을 말합니다.

<video> 태그

HTML5에서 동영상을 삽입할 때는 기본으로 <video> 태그를 사용합니다. <video> 태그는 <img> 태그와 마찬가지로 max-width와 width 속성을 100%로 지정하면 웹 문서 안에서 신축적으로 크기가 조절됩니다.

<style>   .myvideo {     width: 100%;     max-width: 100%;     height: auto;   } </style>  <video class="myvideo" width="1000" height="500" controls preload>   <source src="video.mp4" type="video/mp4">   <source src="video.webm" type="video/webm">   <source src="video.ogv" type="video/ogv"> </video>

<object>나 <iframe> 태그

아직까지는 동영상을 삽입할 때 <video> 태그보다 <object>태그나 <iframe> 태그를 많이 사용합니다. 이 경우 반응형 웹 사이트에 맞게 크기가 조절되도록 하려면 동영상을 감싸는 <div>를 둘러줍니다.

<div class="vidwoContainer">    <object> ... </object>  </div>  <div class="videoContainer">    <iframe> ... </iframe>  </div>

그리고 .videoContainer의 스타일을 다음과 같이 설정합니다.

.videoContainer {   position: relative;   padding-bottom: 56.25%;   height: 0; }

1. <div> 안에 넣을 동영상은 position:absolute로 지정할 것이기 때문에 부모 요소인 .videoContainer는 position을 relative로 선언해야합니다.

2. height를 0으로 지정해야 인터넷 익스플로러 5와 인터넷 익스폴로러 6에서, videoContainer의 내부 콘텐츠를 이용해 .videoContainer의 width와 height 크기를 결정해서 채웁니다.