게임강의
기타게임 분류

HTML 자동해상도 강의

컨텐츠 정보

  • 121 조회
  • 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>

관련자료

댓글 0
등록된 댓글이 없습니다.
전체 658 / 1 페이지
번호
제목
이름

강의실

🏆 포인트 랭킹 TOP 10
순위 닉네임 포인트
1 no_profile 타키야겐지쪽지보내기 자기소개 아이디로 검색 전체게시물 147,509
2 no_profile 보거스쪽지보내기 자기소개 아이디로 검색 전체게시물 91,378
3 no_profile 검은고양이쪽지보내기 자기소개 아이디로 검색 전체게시물 64,195
4 서번트쪽지보내기 자기소개 아이디로 검색 전체게시물 59,621
5 no_profile 불멸의행복쪽지보내기 자기소개 아이디로 검색 전체게시물 57,281
6 no_profile 동가리쪽지보내기 자기소개 아이디로 검색 전체게시물 54,964
7 no_profile 라프텔쪽지보내기 자기소개 아이디로 검색 전체게시물 52,661
8 no_profile Gatchaman쪽지보내기 자기소개 아이디로 검색 전체게시물 45,503
9 no_profile 닥터스쪽지보내기 자기소개 아이디로 검색 전체게시물 35,020
10 no_profile Revolution쪽지보내기 자기소개 아이디로 검색 전체게시물 29,199
알림 0