반응형 이미지 동영상 적용하는 방법

demun
퍼블리셔/css
2012. 12. 11. 09:00

반응형으로 이미지와 동영상을 적용하는 방법을 알아보겠습니다.

미디어쿼리를 ie가 지원하지 않기 때문에 자바스크립트등을 적용하는 방법이 아닌 순수 html 과 css 만으로 반응형으로 동작하는 방법을 알아보고, 티스토리 블로그에도 적용이 가능한 방법을 알아봅니다.

ie 에서 미디어쿼리등을 지원하는 방법등은 나중에 다시 쓰겠습니다.

이미지가 반응형으로 자동으로 크기가 줄어들고 커지고 할려면 코드는 간단합니다.

img {
    max-width: 100%;
    height: auto;
}

근데 여기에는 한가지 알아두어야 할 점이 있습니다.

img 의 최대크기를 100%라고 했지만 이것은 어디까지나 부모의 너비가 최대치입니다.

즉 부모가 너비가 width:500px 처럼 한정되어 있으면 최대 500px 까지만 커지는 겁니다.

티스토리는 이미지를 삽입하면 자동으로 너비와 높이를 인라인스타일로 지정을 합니다.

그래서 css 에서 아무리 저렇게 입력을 해도 먹지를 않습니다.

css 에서 코드를 입력하고 적용되게 하려면 !important 를 적용해야 합니다.

되도록이면 스타일코드 맨 앞에 아래의 코드를 적용하는 것이 좋습니다.

즉 티스토리까지 적용이 되는 코드는 아래와 같습니다.

img {
    display: inline-block;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
}

여기에 한가지 더.

ie7과 ie9 는 width: auto; 가 적용이 되는데 ie8만 먹지 않습니다.

그래서 ie8만 적용되게 핵을 씁니다.

img {
    display: inline-block;
    width: auto\9 !important; /* ie8 */
    width: auto !important;
    max-width: 100%;
    height: auto !important;
}

이렇게 하면 이미지의 최대크기는 부모 컨테이너의 크기가 되고 작은 이미지는 자동으로 줄어듭니다.

동영상 반응형으로 적용하기.

이미지는 반응형으로 동작하지만 동영상도 사용함으로 이것도 반응형으로 동작하게 해야 합니다.

만약 html5를 지원하는 브라우져라면 video 클래스만 추가해주면 끝입니다.

즉 html 에서 video 로 마크업하면 자동으로 리사이징 됩니다.

하지만 지원하지 않는 브라우져나, youtube, vimeo 등등의 동영상 코드, 즉 iframe, object, embed 같은 경우는 지원되지 않습니다.

그래서 따로 지정해줘야 합니다.

물론 자바스크립트를 사용하는 방법이 잇지만 이번에는 위에서 말했듯 논외로 칩니다.

마크업을 좀 수정하고 css 로 추가적으로 코딩하면 됩니다.

동영상 코드에 부모 클래스를 하나 만들어서 사용하면 됩니다. 여기서는 예를들어 video-container 클래스를 사용해보겠습니다.

마크업은 아래와 같습니다.

<div class="video-container">
	<iframe width="640" height="480" src="http://www.youtube.com/embed/Ulmu0qSEsHY" frameborder="0" allowfullscreen></iframe>
</div>

그런다음 css 를 추가해줍니다. 위에서 배운대로 티스토리에서도 사용이 가능하게 important 를 넣어서 만들어줍니다.

img,
video {
    display: inline-block;
    width: auto\9 !important; /* ie8 */
    width: auto !important;
    max-width: 100%;
    height: auto !important;
}
.video-container {
    position: relative;
    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.video-container iframe,.video-container object,.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

이러면 이제 끝입니다. 반응형으로 동작합니다.

제가 예제로 똑같이 동영상을 하나 추가해보겠습니다. 작동되는지 보세요.

어떤가요? 너비가 조절되나요?

브라우져를 키웠다 줄였다 해보세요.

현재 코드는 너비가 640px 짜리 입니다. 하지만 위의 코드에서 보시듯 max-width:100% 로 잡아놔서 현재의 부모너비에 꽉차게 됩니다.

고정된 크기로 동영상 반응형으로 적용하기.

만약 위처럼 동영상이 너무 크다거나해서 맘에 들지 않는다면 고정크기로 보여지고 줄이면 줄여지는 형식의 반응형 동영상을 원할수도 있습니다.

즉 맨처음 보여지는 동영상이 항상 600px 로 보여지고 줄이면 줄여지는 동영상을 만들고 싶다면 부모 컨테이너를 하나더 만들면 됩니다.

부모 클래스로 video-wrapper 를 하나더 만들어서 html 마크업을 보여드리겠습니다.

<div class="video-wrapper">
	<div class="video-container">
		<iframe width="640" height="480" src="http://www.youtube.com/embed/Ulmu0qSEsHY" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

이렇듯 하나의 컨테이너만 추가하고 css 코드도 하나만 더 추가하면 됩니다.

추가되는 css 코드는 아래와 같습니다.

.video-wrapper {
    width: 600px;
    max-width: 100%;
}

위에서 추가한 동영상을 똑같이 아래에 추가해 보겠습니다.

이번에는 너비가 600px 으로 고정이 되어 있다는 것이 다른점입니다.

어떤가요?

위와는 다른게 너비가 600px 로 고정이 되어 있죠.

이렇듯 마크업만 약간 추가하면 자바스크립트 없이 동영상까지 반응형으로 만들수 있습니다.

이 코드는 IE까지 모두 정상 작동합니다.

다음에는 코드 수정없이 반응형으로 동작하는 동영상을 만드는 방법을 알아보겠습니다.

개 개

demun(대문블로그)