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


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



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


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

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


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


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


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


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


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




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


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


  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조회(2647)          


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


    Microsoft 제품군 관련 MIME Type 목
최근 Microsoft 제품군이 새롭게 발표되면서, IIS 6.0과 같이 오래된 웹 서버에는 등록되지 않은 새로운 유형의 MIME Type으로 인해서 호환성에 문제가 발생하는 경우가 자주 있습니다. 특히 IIS 6.0의 경우는 의도된 동작 (By Design)임을 설명하는 기술 문서 (http://support.microsoft.com/kb/326965/k조회(2664)          


  헤더(header) 정리
header("Content-type: 타입내용"); //내용의 타입을 넣는 곳. application/octet-stream, file/unknown header('Content-Type: text/html; charset=utf-8'); header("Content-Length: 수치입력); //이부분이 있으면조회(4043)          


  이미지 태그에서 주소를 php 문으로 나타내기
각각의 파일은 mime 정보를 가지고 있습니다. 이러한 정보가 어떻게 되있냐에 따라서 OS 또는 프로그램은 해당 파일을 인식하게 됩니다. 그러니 PHP 로 이미지를 뿌려준다는것은 PHP 프로그램을 거칠뿐 실제로는 mime 정보에 이미지라는 정보와 함께 바이너리 또는 이미지경로로 해당 파일을 연결해주시면 해당 PHP를 통하여 이미지가 전송될 수 있조회(2572)          


  php mysql 연동 날짜 계산 mktime da
$end = strtotime("2007-10-03 10:11:23"); $now = strtotime("2007-10-01 10:13:23"); $time = $end - $now; $on1 = floor($time / 86400); $rest_hours = $time % 86400; $diff_in_hours = f조회(3645)          


  PHP로 소켓 서버 작성하기
PHP로 소켓 서버 작성하기 작성자 김영진(cogolda@hanmail.net) 대상 독자 요구사항 1 개요 - 소켓 서버란 무엇인가? 1.1 소켓의 형태 2 PHP 소켓 함수 2.1 PHP에서 소켓 만들기 2.2 실용 서버 만들기 2.3 실용적인 예 2.4 보안 가능한 기능 추가와 확장 저자에 관해 알아두기 이 조회(5232)          



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

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


 
최근 글
[손님]
163
291
505
301
313
193
280
3276
870
888
1070
911
4181
3481
3542
 
인기 글
[손님]
3397
3097
3646
3152
3054
10053
5100
3180
6416
3588
3109
7190
4840
  [홈마스타] 한글 유니코드 표
3297
11315