웹모아
웹모아[손님] 검색 로그인   
웹모아
 
일반팁
  


반응형 웹에서 발생할 수 있는 시각적 요소의 크기 조절 문제
  2016-07-12 19:15:33 댓글:(0)   조회:4113



반응형 웹에서 발생할 수 있는 시각적 요소의 크기 조절 문제


<!-- 고정된 크기 (픽셀 단위 사용) //-->
<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



완벽한 반응형 웹을 위한 시각적 요소의 크기 자동 조절 방법

<img src="..." style="max-width:1024px; max-height:800px; width:100%; height:100%;" />



자바스크립트를 이용한 시각적 요소의 크기 자동 조절 방법

$(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%'
        });
    });
});



적용한 실제 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>
    <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="http://www.erzsamatory.net/attach/1/3349047834.jpg" />
        <br /><br />
        <img src="http://www.erzsamatory.net/attach/1/2751001801.jpg" />
    </div>
</body>
</html>



 댓글 (0)


일반팁
 페이지: 1 / 10   

 

  중복 글등록을 방지하는 간단한 팁
등록버튼에 스크립트 태그를 추가하는겁니다 onClick="this.disabled=true" 위 문장의 뜻은 클릭 하면 비활성화 이런 뜻입니다조회(3609)          



  이전 페이지 돌아가기 예제소스 코드보기
조회(1150)          



  현재페이지 파일명 구하기
현재페이지 파일명 구하기<?    //현재파일명    $nowFileName=basename(__FILE__);        // 확장자만 삭제한 파일명    // 4글자를 조회(3946)          



  반응형 웹에서 발생할 수 있는 시각적 요소의 크기
반응형 웹에서 발생할 수 있는 시각적 요소의 크기 조절 문제<!-- 고정된 크기 (픽셀 단위 사용) //--><img src="..." width="500" height="500" /><div style="width:500px; height:500px;"></d조회(4114)          



  php 한글(UTF-8) 자르기
php 한글(UTF-8) 자르기 한글 문자열의 경우 substr함수를 사용하지 않고, mb_substr()함수를 사용한다. 다만, php 설치시 --enable-mbstring 옵션을 주고 설치해야한다. 아래의 함수외에 mb_strimwidth()함수도 있지만 잘 사용하지 않으며, mb_substr()함수를 가장 많이 사용한다. 특히, 데이터베이스가조회(2357)          



  php header를 utf-8 로 바꾸기
처럼 php 소스 코드 상단에 “header("Content-Type: text/html; charset=UTF-8");” 코드를 삽입하여 주면 됩니다. 서버는 euc-kr 서버인데 utf-8기반 웹페이지를 만들다 보니 W3C 유효성 검사에서 오류가 나기도 하고 간혹 코드가 깨지는 경우가 발생하더군요. 그럴 때 header에 charse조회(2218)          





  게시판에 파일 첨부 갯수가 20개로 제한되는 경우
php.ini 설정을 수정합니다. max_file_uploads=20; 업로드 화일수 기본값이 20 이네요 max_file_uploads = 200; 업로드 가능 파일수가 200개로 늘어납니다.조회(2626)          



  영문 대소문자 변환
$str = "Mary Had A Little Lamb and She LOVED It So"; $str = strtolower($str); //모두 소문자로 echo $str.""; echo ucwords($str).""; //단어 첫글자를 대문자로 변환 $str = strtoupper($str); //모두조회(2740)          



  mime_type 알기
function get_mine_type($exp){ $exp = strtolower($exp); static $mime_type; if(!is_array($mime_type)){ $mime_type = array(); $mime_type['dwg']='application/acad'; $mime조회(2677)          



  MIME Type이란
MIME type이란 Multipurpose Internet Mail Extensions의 약어로 메시지 컨텐트 형식을 정의하기 위한 인터넷 표준을 말합니다. MIME 메시지는 텍스트, 이미지, 오디오, 비디오, 및 기타 애플리케이션의 특정 데이터를 포함할 수 있으며 일반적으로 홈페이지 상에 표현되는 멀티미디어 데이타에 대한 형식을 말합니다. 클라이언트의 조회(20676)          



≪ [1]  [2]  [3]  [4]  [5]   ≫

복수단어 검색은 공백(space)로 구분해 주세요.



 
최근 글
[손님]
33
43
210
353
585
337
380
217
331
3609
897
927
1150
941
4236
 
인기 글
[손님]
3107
3640
4111
4292
3175
6227
4005
3666
3268
3262
3673
3442
3718
14785
4311