![[자바스크립트] 이미지와 동영상에 반응형 속성 적용하는 방법](https://i0.wp.com/www.walterz.net/wp-content/uploads/2017/11/34247407196_5719055b40_z.jpg?resize=640%2C359&ssl=1)
최근들어 반응형 웹이 새로운 트렌드로 떠오르고 있습니다. 스마트폰의 보급으로 모바일 인터넷 접속이 급증했기 때문입니다. 이 글은 웹브라우저 해상도에 따라 이미지 또는 동영상의 사이즈를 조절하는 반응형 스크립트를 설명합니다. 반응형 웹에서는 해상도에 따른 시각적 객체의 사이즈 조절이 중요합니다. 그런데 이 기능은 생각보다 까다로운 작업을 필요로 합니다. 필자는 이 글에서 반응형 시각적 객체 사이즈를 자동 조절 하는 기본 개념을 제시하고자 합니다.
반응형 웹이란?
반응형 웹은 말 그대로 환경에 따라 반응하는 웹을 말합니다. 여기에서 환경은 기기에 따라 다른 해상도를 의미합니다. 기존 웹은 해상도 변화에 능동적으로 대처하지 못 합니다. 이 문제점이 이슈가 된 발화점은 스마트폰의 대중화입니다. 스마트폰이 널리 보급되면서 모바일 환경이 일반화되었습니다. 이에 따라 웹 개발자는 데스크탑 컴퓨터와 모바일 양쪽에서 정상적으로 사이트가 나타나도록 새로운 개념을 도입하였습니다. 이것이 반응형 웹입니다.
웹에서 사용하는 시각적 객체는 이미지, 동영상 등이 있습니다. 이들은 최근까지도 비율이 아닌 고정된 크기로 사용되는 경우가 많았습니다. 때문에 해상도 변화에 능동적으로 반응하기가 어려웠습니다. 반응형 웹을 개발하려면 모든 시각적 객체에 새로운 기술을 적용해야하는 이유입니다.
이 글에서는 간편한 방법을 사용하여 모든 시각적 객체에 반응형 기술을 적용하는 방법을 알아보겠습니다.
반응형 웹에서 발생할 수 있는 시각적 객체의 크기 조절 문제
HTML은 다음과 같은 방법으로 시각적 객체 크기를 지정합니다. 시각적 객체 태그에 width 및 height 속성을 적용하는 것이 일반적이지만 이 방법은 HTML5 표준 규격에 어긋나는 방법입니다. 따라서 웹 표준을 준수하는 웹페이지는 style 속성에 in-line으로 크기 조절 속성을 입력하는 방법 또는 스타일시트를 사용하는 방법을 사용합니다. 여기에서 각각의 사이즈는 픽셀 단위의 고정된 수치가 될 수도 있고 백분율의 비율이 될 수도 있습니다.
<!-- 고정된 크기 (픽셀 단위 사용) //--> <img src="..." width="500" height="500" /> <div style="width:500px; height:500px;"></div> <iframe src="..." width="500" height="500"></iframe> <!-- 상대적인 크기 (백분율 단위 사용) //--> <img src="..." width="100%" /> <div style="width:50%;"></div>
반응형 웹에서는 비율을 나타내는 백분율을 시각적 객체 크기를 지정할 때 사용합니다. 그 이유는 해상도에 따라 객체의 크기가 자동 변경되어야 하는 필요가 있기 때문입니다. 반응형 웹에서 페이지의 모든 시각적 객체는 모바일이나 데스크탑 컴퓨터에서 클라이언트의 웹브라우저 화면에 맞게 크기가 조절되어야 합니다.
그런데 모든 객체에 백분율을 사용할 수 있는 것은 아닙니다. 왜냐하면 이미지와 동영상은 최대로 늘릴 수 있는 크기가 정해져 있기 때문입니다. 이 크기를 초과하여 늘리면 이미지와 동영상이 깨져 잘 보이지 않을 것입니다. 이 글에서 이 문제를 설명하려고 합니다. 아래 내용을 숙지한다면 해결 방법을 찾을 수 있을 것입니다.
객체 크기 자동 조절 방법
이미지와 동영상은 최대 해상도가 정해져 있습니다. 따라서 반응형 웹에서 시각자료를 다룰 때에는 최대 해상도를 미리 설정한 후 정해진 수치 이상으로 해상도가 벗어나는 일이 없도록 해야 합니다. 이 문제는 스타일시트를 사용하여 해결할 수 있습니다.
스타일시트의 max-width, max-height 속성은 객체의 최대 너비와 최대 높이를 정의합니다. 이 속성을 사용하면 이미지 및 동영상의 최대 해상도를 미리 설정할 수 있습니다. 이 속성이 지정된 객체 width, height 속성 모두 100%로 정의하면 해상도에 따라 자동으로 크기가 조절되는 시각적 객체가 만들어집니다. 다음은 예제입니다.
<img src="..." style="max-width:1024px; max-height:800px; width:100%; height:100%;" />
그러나 HTML 태그에 in-line 스타일을 지정하면 소스코드가 지저분해집니다. 그래서 필자는 다음과 같은 방법을 고안하였습니다.
자바스크립트를 이용한 객체 크기 자동 조절 방법
jQuery를 이용하여 시각적 객체의 크기를 해상도에 따라 조절하는 방법을 알아보겠습니다. jQuery는 웹 개발자를 위한 자바스크립트 프레임워크입니다. 복잡한 자바스크립트를 간단하게 구현해줍니다. 현재 자신이 운영하고 있는 사이트에서 jQuery를 사용할 수 없다면 다음 글을 참고하시기 바랍니다. 이 글은 사이트에서 jQuery를 이용하는 방법을 자세하게 설명하고 있습니다. → 2017/11/08 [자바스크립트] CDN을 활용하여 jQuery 사용하는 방법 by Walter. Erzsamatory
문서에 포함되어 있는 모든 객체에 in-line 스타일을 지정하는 것은 번거로우면서도 스크립트 용량이 커지기 때문에 비효율적입니다. 따라서 이 글에서는 자바스크립트를 활용하여 모든 객체에 일괄적으로 스타일을 적용하는 방법을 소개하겠습니다. 아래 스크립트는 예제입니다.
$(function() {
$("#post_content img, .resizablebox").each(function() {
var oImgWidth = $(this).width();
var oImgHeight = $(this).height();
$(this).css({
'max-width':oImgWidth+'px',
'max-height':oImgHeight+'px',
'width':'100%',
'height':'100%'
});
});
});
예제 소스코드는 본문(#post_content)에 포함되어 있는 모든 이미지 그리고 resizable 클래스가 적용되어 있는 모든 객체에 최대 해상도를 설정하고 기본 해상도를 100% x 100%로 지정하는 역할을 합니다. 스크립트 작동 원리를 보면, 이미지의 본래 크기를 계산한 후 이 수치를 최대 확대 가능한 해상도로 정의하고, 반응형 웹에서는 해상도에 따라 크기가 변동되어야 하므로 기본 해상도를 100% x 100%로 정의합니다. 이렇게 함으로써 웹 페이지에 삽입되어 있는 모든 이미지와 시각적 객체의 크기를 반응형으로 변경할 수 있습니다.
지금까지 설명했던 내용을 완성된 HTML로 작성하면 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>Responsive Web</title>
<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<style>
body {
padding:0px;
margin:0px;
}
</style>
<script>
$(function() {
$("#post_content img, .resizablebox").each(function() {
var oImgWidth = $(this).width();
var oImgHeight = $(this).height();
$(this).css({
'max-width':oImgWidth+'px',
'max-height':oImgHeight+'px',
'width':'100%',
'height':'100%'
});
});
});
</script>
</head>
<body>
<div id="post_content">
<img src="https://www.erzsamatory.net/attach/1/3349047834.jpg" />
<br /><br />
<img src="https://www.erzsamatory.net/attach/1/2751001801.jpg" />
</div>
</body>
</html>
예제 소스코드를 HTML 파일로 생성한 후 웹브라우저에서 실행하면 반응형 웹을 체험할 수 있습니다. 해상도에 따라 이미지 크기가 자동으로 변경되면서도 이미지 본래의 크기보다 해상도가 커지는 경우 이미지 크기가 고정되는 것을 확인할 수 있습니다. 이것이 반응형 웹에서 이미지 크기를 조절하는 방법입니다. 이미지 크기를 해상도에 맞게 조절하는 것이야말로 완벽한 반응형 웹을 만들기 위한 필수적인 요소입니다.
마무리
예제문서 바로가기
http://www.erzsamatory.net/dev/9/responsiveWeb.html
※ 예제문서는 이 글에서 설명한 HTML이 적용되어 직접 체험해볼 수 있습니다.
지금까지 객체 크기를 해상도에 따라 어떻게 조절하는지 알아보았습니다. 이것은 반응형 웹을 만들기 위한 필수 요소입니다. 스마트폰이 활발하게 보급되면서 모바일 환경에서 인터넷 서핑하는 사람들이 급속도로 늘고 있습니다. 따라서 모바일 환경을 고려하지 않을 수 없습니다. 이 글에서 설명한 기본 기능을 활용하여 반응형 웹을 만들어보시기 바랍니다.
타이틀 이미지: Christiaan Colen, JavaScript source code ransomware, Flickr. CC BY-SA 2.0.
![[대외활동] 2023년 제12기 국방정보공개 국민참여단](https://i0.wp.com/www.walterz.net/wp-content/uploads/2023/04/5880.png?resize=418%2C315&ssl=1)
안녕하세요. 저도 티스토리에서 이미지를 링크할 때 ‘반응형’ 속성을 부여하는 방법을 찾고 있었는데, walter님의 이 포스트에서큰 도움을 얻고 문제를 해결하여 감사 말씀 드리려고 글을 남깁니다. 저는 제가 부여한 width, height에 맞추어 image를 resizing 하는 방법은
해당 포스트에서는 width, height 크기에 맞게 사진을 resizing 하는 html 태그를 안내해주고 계신데요. 혹시 resizing이 아니라 해당 div 크기에 맞게 crop해주고 center로 위치를 맞추어 주는 html 태그도 안내해주실 수 있을까요? https://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/
이 해당 블로그 포스트에서 java script 및 Jquery를 이용해서 해주는 방법을 소개해주고 있기는 한데, 이를 어떻게 html 로 바꾸어야 할지 몰라서 여쭈어 봅니다. 부디 답장 주시면 감사하겠습니다.
확인해보았는데 이미지와 DIV 크기에 따라 margin에 마이너스(-) 값을 주어야하기 때문에 자바스크립트를 이용하여 이미지 넓이를 구하는 과정이 반드시 필요합니다. HTML만으로는 어려울 것 같습니다.. ㅠ
답장 감사합니다! 그렇다면 티스토리에서 포스트를 작성할 때 Java script를 사용하려면 어떡해야 할까요?
http://www.erzsamatory.net/86 에 댓글을 남기고 facebook.com에서 메시지를 보내드렸습니다. 이 워드프레스에서는 댓글이 써지지 않아서 여러 방법으로 글쓴이님을 컨택했었습니다. 부디 제 글이 글쓴이님께 닿았으면 좋겠네요. 감사합니다. (지금 이 댓글도 써지는 건지 모르겠습니다. ㅠㅠ )
스팸 댓글 때문에 관리자가 승인해야 댓글이 등록되도록 하였습니다. 최근 스팸 댓글이 등록된 적은 없으니 승인 절차를 생략해보도록 하겠습니다 ^^ ;;
티스토리를 예전에 활용하셨던 것 같으셔서 그런데, 계속 여쭈어봐도 될까요? 티스토리 manage 페이지에서
https://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/
여기에 나온 부분을 js 파일로 만들어 업로드하고
이런 스타일대로 해보았는데요. 제대로 작동을 하지 않더라구요.
java script에 써놓은 코딩대로 계산을 하는 것이 아니라 ‘제일 왼쪽’, ‘제일 위’ 부분의 이미지를 그대로 보여줍니다. ㅠㅠ
혹시 이 ‘이미지와 동영상에 반응형 속성’ 포스팅처럼 이 주제에 관해 써주실 계획이 있으신지 정중히 여쭈어봅니다.
아 html 코딩을 그대로 치니 댓글에서 보여지지가 않는군요
(div 뒤에 . 은 제거하고 보시면 됩니다.)
이렇게 js 파일을 업로드한 상태에서 티스토리포스트에 html 코딩을 쓰면 원 출처 워드프레스에서 소개한대로 crop¢er 를 하지 않네요..염치없지만 고견 부탁드려봅니다
계속 html 코딩은 보이지가 않네요…음…저 영문포스팅에 한대로 따라해보았는데도 안되었다고 이해해주시면 감사하겠습니다 ㅠㅠ
외부파일로 업로드한 후 자바스크립트 로드를 하셨는지요? 파일을 업로드하지 않고 스킨
와 사이에 스크립트를 넣어서 다시 시도해보시면 어떻습니까?[div style=”width: 150px; height: 150px; border: thick solid #666666; overflow: hidden; position: relative;”]
[/div]
아 이렇게 입력했었습니다! 꺽쇠를 [] 이렇게 바꾸니 잘 되네요!
[div style=”width: 150px; height: 150px; border: thick solid #666666; overflow: hidden; position: relative;”]
[img src=”tanahlog.jpg” style=”position: absolute;” onload=”OnImageLoad(event);”/]
[/div]
수정이 되면 고칠텐데 수정이 안되어서 이렇게 댓글을 많이 쓰게 되네요 ㅠㅠ 죄송합니다.
작동이 안 되는 것은 자바스크립트상 문제인 것 같습니다. 구글 크롬을 사용하신다면 개발자도구[F12]를 사용하여 오류 메시지를 확인할 수 있을 것입니다.