기타게임 HTML 자동해상도 강의
컨텐츠 정보
- 18 조회
- 0 추천
- 0 비추천
- 목록
본문
작성자: 작성자 없음
HTML에서는 시각적 요소의 크기를 다음과 같은 방법으로 정의할 수 있습니다.
티스토리나 텍스트큐브와 같은 블로그 관리 프로그램에서는 <img> 태그에
자동으로 적당한 width 속성과 height 속성이 입력됩니다.
블로거가 직접 사이즈를 정하지 않는 경우에도 입력되는데, 바로 이것이 반응형 웹으로 전환할 때 가장 큰 문제점이 됩니다.
<!-- 고정된 크기 (픽셀 단위 사용) //-->
<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>
자바스크립트를 이용한 시각적 요소의 크기 자동 조절 방법
$(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="http://code.jquery.com/jquery-1.7.0.min.js"></script>
요 위에 부분이 Jquery를 사용하겠다라는 선언을 해주는 겁니다.
이것이 없이 안되요 라는 분이 없기를 바랍니다... :D
<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="naver.jpg" />
<br /><br />
<img src="naver.jpg" />
</div>
</body>
</html>
-
등록일 00:20
-
등록일 08.20
-
등록일 08.10VMware 네트워크 IP 설정댓글 2
-
등록일 08.08
