web standard/script2022. 8. 25. 09:39

잡설 : 한동안 실무를 놨더니 기본개념부터 가물가물하다. 나 스스로를 위해 기초부터 다시 되짚어보고자 한다..

 

var는 es6 이전 변수를 정의할때 사용하는 구문

자비로운 javascript 덕분에 var는 오류가 날것 같은 상황에서도 에러를 내뱉지 않음

 

예를 들어.. 첫번째 케이스를 보자.

console.log(a);
var a = 0;
console.log(a);

// 결과
undefined
0

해당 코드는 일반인이 봤을땐 코드 순서대로 실행할것 같다고 판단하겠지?? java나 C++에서도 그렇게 판단할것 같다.

근데 javascript는 최초 브라우져 엔진이 코드에 접근했을때 변수나 함수 선언된 놈들을 끄집어내 메모리에 저장한다.

최상단 전역으로 올리는 행위 즉 호이스팅 한다고 표현한다.

 

그렇다보니 console을 실행하기 전에 변수 a를 선언한걸 먼저 호이스팅 하기 때문에 undefined가 출력된다.

이루 a를 0으로 할당하고 두번째 console을 실행할때 0의 값이 출력되는것

 

또는 이런 경우도 있다... 두번째 케이스.

for (var i=0; i < 5; i++) {
    console.log(i)
}
console.log(i)

// 결과
0
1
2
3
4
5

저기서 변수 i는 지역변수다. 전역에서 접근되면 안되는..

근데 보는바와 같이 접근이 가능해서 5가 출력된다.

var로 선언된 지역변수는 function에서만 보장된다는 블라블라....

 

이걸 보완하고자 나온게 let

 

첫번째 케이스를 let으로 바꿔보자

console.log(a);
let a = 0;
console.log(a);

// 결과
Uncaught ReferenceError: a is not defined at <anonymous>

에러가 난다. a는 아직 정의되지 않았다고..

var와 마찬가지로로 호이스팅은 한다. 대신 접근할 수 없는 TDZ라는 곳에 임시저장된 뒤 선언할때 접근 가능한 저장소로 옮겨진다고 한다.

 

for (let j=0; j < 5; j++) {
    console.log(j)
}
console.log(j)

// 결과
0
1
2
3
4
Uncaught ReferenceError: j is not defined at <anonymous>

위와 마찬가지 에러가 난다.

 

이걸 통해 var와 let의 차이.. 그리고 호이스팅이 뭔지 개념에 대해 이해해보자.

Posted by 수라
web standard/css2016. 10. 6. 17:45

[출처]http://naiyumie.inour.net/archives/2471


Internet Explorer -인터넷 익스플로러

Selector Hacks

/* IE 6 and below */
* html .selector  {}
.suckyie6.selector {} /* .suckyie6 can be any unused class */


/* IE 7 and below */
.selector, {}


/* IE 7 */
*:first-child+html .selector {}
.selector, x:-IE7 {}
*+html .selector {}


/* Everything but IE 6 */
html > body .selector {}


/* Everything but IE 6/7 */
html > /**/ body .selector {}
head ~ /* */ body .selector {}


/* Everything but IE 6/7/8 */
:root *> .selector {}
body:last-child .selector {}
body:nth-of-type(1) .selector {}
body:first-of-type .selector {}
Property ⁄ Value Hacks


/* IE 6 */
.selector { _color: blue; }
.selector { -color: blue; }


/* IE 6/7 – any combination of these characters:
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
.selector { !color: blue; }
.selector { $color: blue; }
.selector { &color: blue; }
.selector { *color: blue; }
/* … */


/* IE 6/7 – acts as an !important */
.selector { color: blue !ie; }
/* string after ! can be anything */


/* IE 8/9 */
.selector { color: blue\0/; }
/* must go at the END of all rules */


/* IE 9/10 */
.selector:nth-of-type(1n) { color: blue\9; }


/* IE 6/7/8/9/10 */
.selector { color: blue\9; }
.selector { color/*\**/: blue\9; }


/* Everything but IE 6 */
.selector { color/**/: blue; }


 Media Query Hacks


/* IE 6/7 */
@media screen\9 {}


/* IE 6/7/8 */
@media \0screen\,screen\9 {}


/* IE 8 */
@media \0screen {}


/* IE 8/9/10 & Opera */
@media screen\0 {}


/* IE 9/10, Firefox 3.5+, Opera */
@media screen and (min-resolution: +72dpi) {}


/* IE 9/10 */
@media screen and (min-width:0\0) {}


/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}


/* Everything but IE 6/7/8 */
@media screen and (min-width: 400px) {}

  

 

 JavaScript Hacks


/* IE <= 8 */
var isIE = ‘\v’==’v’;


/* IE 6 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 6]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;


/* IE 7 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 7]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;
navigator.appVersion.indexOf(“MSIE 7.”)!=-1


/* IE 8 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 8]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;


/* IE 9 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 9]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;


/* IE 10 */
var isIE = eval(“/*@cc_on!@*/false”) && document.documentMode === 10;


/* IE 10 */
var isIE = document.body.style.msTouchAction != undefined;

 


  

Firefox -파이어폭스

Selector Hacks


/* Firefox 1.5 */
body:empty .selector {}


/* Firefox 2+ */
.selector, x:-moz-any-link {}


/* Firefox 3+ */
.selector, x:-moz-any-link; x:default {}


/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) .selector {}


Media Query Hacks


/* Firefox 3.5+, IE 9/10, Opera */
@media screen and (min-resolution: +72dpi) {}


/* Firefox 3.6+ */
@media screen and (-moz-images-in-menus:0) {}


/* Firefox 4+ */
@media screen and (min–moz-device-pixel-ratio:0) {}


 JavaScript Hacks


/* Firefox */
var isFF = !!navigator.userAgent.match(/firefox/i);


/* Firefox 2 – 13 */
var isFF = !!window.globalStorage;


/* Firefox 2/3 */
var isFF = /a/[-1]==’a’;


/* Firefox 3 */
var isFF = (function x(){})[-5]==’x’;
Miscellaneous


/* Firefox 3+ */
@-moz-document url-prefix() {}

 



 

Chrome -크롬

 Selector Hacks
/* Chrome 24- and Safari 5- */
::made-up-pseudo-element, .selector {}


 Media Query Hacks
/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {}


 JavaScript Hacks
/* Chrome */
var isChrome = !!window.chrome;

 

 


 

Safari -사파리

Selector Hacks


/* Safari 2/3 */
html[xmlns*=””] body:last-child .selector {}
html[xmlns*=””]:root .selector  {}


/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=””] .selector {}


/* Safari 5- and Chrome 24- */
::made-up-pseudo-element, .selector {}


 Media Query Hacks
/* Safari 3+, Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {}


 JavaScript Hacks
/* Safari */
var isSafari = /a/.__proto__==’//’;



Opera -오페라

 Selector Hacks


/* Opera 9.25, Safari 2/3.1 */
*|html[xmlns*=””] .selector {}


/* Opera 9.27 and below, Safari 2 */
html:first-child .selector {}


/* Opera 9.5+ */
noindex:-o-prefocus, .selector {}

 Media Query Hacks

/* Opera 7 */
@media all and (min-width: 0px){}

/* Opera 12- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}


/* Opera, Firefox 3.5+, IE 9/10 */
@media screen and (min-resolution: +72dpi) {}


/* Opera, IE 8/9/10 */
@media screen {}


 JavaScript Hacks
/* Opera 9.64- */
var isOpera = /^function \(/.test([].sort);


/* Opera 12- */
var isOpera = !!window.opera;

'web standard > css' 카테고리의 다른 글

줄바꿈 완련 style  (0) 2012.08.23
파폭용핵  (0) 2010.11.17
CSS 이야기: overflow 속성의 float 해제 효과  (0) 2010.03.05
css 핵  (0) 2008.07.29
css제대로 사용하기  (0) 2008.07.29
Posted by 수라
web standard/jquery2016. 10. 5. 10:31

출처: http://recoveryman.tistory.com/120




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style></style>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $("html, body").on('mousewheel DOMMouseScroll'function(e) {
                var E = e.originalEvent;
                delta = 0;
                console.log(E);
                if (E.detail) {
                    delta = E.detail * -40;
                    $('body').text(delta);
                }else{
                    delta = E.wheelDelta;
                    $('body').text(delta);
                };
            });
        });
   </script>
</head>
<body>
    
</body>
</html>
 
cs


'web standard > jquery' 카테고리의 다른 글

이벤트 설정 시에 jQuery의 .on()을 사용하자.  (0) 2014.10.13
[jquery] ajax 방법  (0) 2014.04.11
jQuery Slider plugin  (0) 2014.01.09
width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
좌우(상하) 슬라이드  (0) 2012.02.29
Posted by 수라
web standard/script2015. 4. 24. 15:34

/* OS & 버젼 체크 */

function getOSVer() {
    var mobileOS;    // will either be iOS, Android or unknown
    var mobileOSver; // this is a string, use Number(mobileOSver) to convert
    var uaindex;
    // determine OS
    if ( agentString.match(/iPad/i) || agentString.match(/iPhone/i) ) {
        mobileOS = 'iOS';
        uaindex  = agentString.indexOf( 'OS ' );
    } else if ( agentString.match(/Android/i) ) {
        mobileOS = 'Android';
        uaindex  = agentString.indexOf( 'Android ' );
    } else {
        mobileOS = 'unknown';
    }
    // determine version
    if ( mobileOS === 'iOS'  &&  uaindex > -1 ) {
        mobileOSver = agentString.substr( uaindex + 3, 1 ).replace( '_', '.' );
    } else if ( mobileOS === 'Android'  &&  uaindex > -1 ) {
        mobileOSver = agentString.substr( uaindex + 8, 1 );
    } else {
        mobileOSver = 'unknown';
    }
    if (mobileOS === 'iOS') {
        $("body").addClass(mobileOS+mobileOSver);
    } else if (mobileOS === 'Android') {
        $("body").addClass(mobileOS+mobileOSver);
    }
}

Posted by 수라
web standard/jquery2014. 10. 13. 17:09

출처 : http://www.mimul.com/pebble/default/2013/03/06/1362559765579.html


jQuery 1.7에서 .bind(), .live(), .delegate()가 .on()으로 통합되었다길래 좀 살펴보았다.

개요

.bind(), .live(), .delegate(), .on()은 이벤트에 관련된 기능으로, 먼저 각각의 기능들을 살펴보는 것이 순서인것 같아 먼저 기능들을 살펴본다.

.bind()는 가장 많이 쓰는 이벤트 설정 함수이다. DOM이 로드된 후 추가된 element들에 대해서 event handler를 처리할 수 없고, .live(), .delegate()는 나중에 추가된 element들의 이벤트들을 처리할 수 있다.

foo에 이벤트를 설정하고 싶다면 아래와 같이 사용된다.
$(".foo").bind("click", handler);
$(".foo").on("click", handler);

.delegate()는 이벤트 설정을 부모에 대해 한다. 이런 방식을 이벤트 대리자라고 명명한다.

.foo에 이벤트를 설정하면 다음과 같이 사용된다.
$("#container").delegate(".foo", "click", handler);
$("#container").on("click", ".foo", handler);

.live()는 이벤트의 설정 대상이 document가 된다.

foo에 이벤트를 설정하고 싶다면 아래와 같이 사용된다.
$(".foo").live("click", handler);
$(document).on("click", ".foo", handler);

.on()을 사용해야 하는 이유

1. .on()으로 통합 될 예정

.live()와 .die()는 jQuery 1.9에서 빠졌고(1.7 Deprecations), .delegate()도 향후 없어질 예정이어서 .on을 사용하는 습관을 가지자.

2. .on()으로 여러 종류의 이벤트 설정이 가능

- 첫번째 인자에 공백로 구분자로 해 여러 이벤트에 대응이 가능하다.
$(".foo").on("change blur", handler);

- 각 이벤트에 여러 처리자를 둘 수 있다.
. 하나의 elements에 여러 이벤트 설정
$(".foo").on({ 
  "change" : function(){...},
  "blur" : function(){...} 
});

. 이벤트 대리자에서의 여러 이벤트 설정
$("#container") on ( { 
  "change" : function(){...},
  "blur" : function(){...} 
}, ".foo");


'web standard > jquery' 카테고리의 다른 글

마우스 휠 이벤트 체크  (0) 2016.10.05
[jquery] ajax 방법  (0) 2014.04.11
jQuery Slider plugin  (0) 2014.01.09
width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
좌우(상하) 슬라이드  (0) 2012.02.29
Posted by 수라
web standard/jquery2014. 4. 11. 16:09

출처 : http://rocabilly.tistory.com/27


[jQuery] Ajax 방법

 

- 각 Ajax 방식을 호출하는 방법

  1. // 버튼 클릭시 ajax 실행  
  2.     var url="test.aspx";  
  3.     var params="param1="+param1+"¶m2="+param1;  
  4.   
  5. $("#btnOK").click(function(){  
  6.       
  7.     $.ajax({      
  8.         type:"POST",  
  9.         url:url,      
  10.         data:params,      
  11.         success:function(args){   
  12.             $("#result").html(args);      
  13.         },   
  14.         beforeSend:showRequest,  
  15.         error:function(e){  
  16.             alert(e.responseText);  
  17.         }  
  18.     });  
  19.       
  20. });  

 

 

1. $.post() 방식

 

- 서버에 데이터를 HTTP POST 방식으로 전송한 후 서버측 응답 받을 때 사용

 

[형식]

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

 

 

[$.ajax 로 표현]

  1. $.ajax({  
  2.   type: 'POST',  
  3.   url: url,  
  4.   data: data,  
  5.   success: success,  
  6.   dataType: dataType  
  7. });  

 

 

[사용예]

  1. // 요청 Url 만 , 리턴 결과값 무시  
  2. $.post("http://web/test/");  
  3.   
  4. // 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시  
  5. $.post("http://web/test/", { name: "John", time: "2pm" } );  
  6.   
  7. // 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시  
  8. $.post("http://web/test/", { 'choices[]': ["Jon""Susan"] });  
  9.   
  10. // 요청 Url + 폼데이터, 리턴 결과값 무시  
  11. $.post("http://web/test/", $("#testform").serialize());  
  12.   
  13. // 요청 Url, xml(또는 html)리턴 결과값  
  14. $.post("http://web/test/",   
  15.       function(data) {    alert("Data Loaded: " + data);  });  
  16.   
  17. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식  
  18. $.post("http://web/test/", { name: "John", time: "2pm" },    
  19.       function(data) {    process(data);  },   "xml" );  
  20.   
  21. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식  
  22. $.post("http://web/test/", { "func""getNameAndTime" },    
  23.       function(data){      
  24.                      console.log(data.name); // John      
  25.                      console.log(data.time); //  2pm    
  26.       }, "json");  

 

 

 

 

2. $.get() 방식

 

- 서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답 받을 때 사용

 

[형식]

jQuery.get(  url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

 

 

[$.ajax 로 표현]

  1. $.ajax({  
  2.   url: url,  
  3.   data: data,  
  4.   success: success,  
  5.   dataType: dataType  
  6. });  

 

 

[사용예]

  1. // 요청 Url 만 , 리턴 결과값 무시  
  2. $.get("http://web/test/");  
  3.   
  4. // 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시  
  5. $.get("http://web/test/", { name: "John", time: "2pm" } );  
  6.   
  7. // 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시  
  8. $.get("http://web/test/", { 'choices[]': ["Jon""Susan"] });  
  9.   
  10. // 요청 Url, xml(또는 html)리턴 결과값  
  11. $.get("http://web/test/"function(data) {    alert("Data Loaded: " + data);  });  
  12.   
  13. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식  
  14. $.get("http://web/test/", { name: "John", time: "2pm" },  function(data) {    process(data);  },   "xml" );  
  15.   
  16. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식  
  17. $.get("http://web/test/", { "func""getNameAndTime" },  function(data){    console.log(data.name); // John    console.log(data.time); //  2pm  }, "json");  

 

 

 

 

3. $.getJSON() 방식

 

- 서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답을 JSON 형식으로 받을때 사용 

 

[형식]

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

 

 

[$.ajax 로 표현]

  1. $.ajax({  
  2.   url: url,  
  3.   dataType: 'json',  
  4.   data: data,  
  5.   success: callback  
  6. });  

 

 

[사용예]

  1. <script>   
  2.     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",   
  3.     {   
  4.         tags: "mount rainier",   
  5.         tagmode: "any",   
  6.         format: "json"   
  7.       },   
  8.       function(data) {   
  9.         $.each(data.items, function(i,item){   
  10.           $("<img/>").attr("src", item.media.m).appendTo("#images");   
  11.           if ( i == 3 ) return false;   
  12.         });   
  13.     });  
  14.   </script>  

 

 

 

 

4. $.ajax() 방식

 

- 서버에 데이터를 HTTP POST,GET,JSON 모든 방식 전송 가능한 통합적인 함수

- 다양한 Parameter 존재

 

[형식]

jQuery.ajax( url [, settings] ) [ 1.5 이상버젼 ] ,jQuery.ajax( settings ) [ 1.0 이상버젼 ]

 

- url : 요청 Url

- settings : key/value 쌍으로 된 Ajax 요청 Set ( optional )

 

 

[사용예]

  1. // 요청 Url + 추가적 데이터, 완료된 후 리턴 메시지를 받음  
  2. $.ajax({   
  3.       type: "POST",   
  4.       url: "http://web/test/",   
  5.       data: { name: "John", location: "Boston" }   
  6. }).done(function( msg ) {   
  7.       alert( "Data Saved: " + msg );   
  8. });  
  9.   
  10. // 최종 버전 리턴 Html 가져오기  
  11. $.ajax({   
  12.       url: "http://web/test/",   
  13.       cache: false   
  14. }).done(function( html ) {   
  15.       $("#results").append(html);   
  16. });  
  17.   
  18. // 서버에 데이터를 보낸 후 저장처리, 그리고 사용자에게 리턴 완료 메시지 반환  
  19. var menuId = $("ul.nav").first().attr("id");   
  20. var request = $.ajax({   
  21.     url: "http://web/test/",   
  22.     type: "POST",   
  23.     data: {id : menuId},   
  24.     dataType: "html"   
  25. });   
  26.    
  27. request.done(function(msg) {   
  28.     $("#log").html( msg );   
  29. });   
  30.    
  31. request.fail(function(jqXHR, textStatus) {   
  32.     alert( "Request failed: " + textStatus );   
  33. });  
  34.   
  35.   
  36. // 자바 스크립트 로딩 및 실  
  37. $.ajax({   
  38.     type: "GET",   
  39.     url: "test.js",   
  40.     dataType: "script"   
  41. });  

 

 

 

4.1 $.ajaxSetup()

 

- 공통적인 기본 ajax 요청을 미리 설정함

 

[형식]

jQuery.ajaxSetup( options )

 

- optional : default Ajax 요청의 설정값 ( key/value )

 

 

[사용예]

  1. // 미리 ajaxSetup에 기본사항들을 설정한 후 ajax 로 각각 호출  
  2. $.ajaxSetup({  
  3.     url: 'http://web/test/',  
  4.     global: false,   
  5.     type: "POST"   
  6.   
  7. });  
  8. $.ajax({  
  9.       // url not set here; uses 'http://web/test/'  
  10.       data: {'name''Dan'}  
  11. });  
  12. $.ajax({  
  13.       // url not set here; uses 'http://web/test/'  
  14.       data: {'name''John'}  
  15. });  

 

 

 

 

5. $.load() 방식

- 외부 컨텐츠 가져올때 사용

 

[형식]

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- complete(responseText, textStatus, XMLHttpRequest) : 요청이 완료될때 실행되는 callback 함수

 

 

[사용예]

  1. //  Html Content 로딩  
  2. $('#result').load('ajax/test.html');  
  3.   
  4. //  Html Content 로딩 후 메시지  
  5. $('#result').load('ajax/test.html'function() {  
  6.   alert('Load was performed.');  
  7. });  
  8.   
  9. //  Html Content #container Target 로딩  
  10. $('#result').load('ajax/test.html #container');  
  11.   
  12. //  array parameter 전달 후 Html Content 로딩  
  13. $("#objectID").load("test.asp", { 'choices[]': ["Jon""Susan"] } );  


'web standard > jquery' 카테고리의 다른 글

마우스 휠 이벤트 체크  (0) 2016.10.05
이벤트 설정 시에 jQuery의 .on()을 사용하자.  (0) 2014.10.13
jQuery Slider plugin  (0) 2014.01.09
width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
좌우(상하) 슬라이드  (0) 2012.02.29
Posted by 수라
web standard/mobile2014. 1. 29. 15:10
디자인이나 코딩할때 피씨환경은 항상 해오던거라 가이드잡을때 해상도잡기 쉬웠는데
모바일기기 대응해서 가이드잡을때는 해상도가 제각각이라 애로사항이 많습니다.
그래서 관련해서 도움을 줄수 있는 페이지를 소개합니다.

각 제조사별 디바이스의 해상도를 볼 수 있고 실제로 url을 입력해서 어떻게 보이는지 알 수 있습니다.
리스트에 없는 해상도는 Custom에서 입력해서 확인 가능합니다.

확인하고 싶은 디바이스에서 위 url를 호출하면 width와 pixel ratio를 확인할 수 있습니다.
해당 디바이스의 해상도를 확실하게 알 수 있습니다.


'web standard > mobile' 카테고리의 다른 글

안드로이드에서 레이어팝업  (0) 2011.03.21
안드로이드 - dip -> pixel  (0) 2010.12.22
모바일웹사이트 제작시 고려사항  (0) 2010.12.02
뷰포트(VIEWPORT)  (0) 2010.11.30
css3 media 쿼리 예시(모바일웹)  (0) 2010.11.30
Posted by 수라
web standard/responsive web2014. 1. 20. 17:18

/* 스마트폰 가로+세로 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){

}


/* 스마트폰 가로 */
@media only screen and (min-width : 321px) {
}


/* 스마트폰 세로 */
@media only screen and (max-width : 320px) {
}


/* 갤럭시탭+iPad 가로+세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}


/* 갤럭시탭+iPad 가로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}


/* 갤럭시탭+iPad 세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}


/* 데스크탑 브라우저 가로 */
@media only screen and (min-width : 1224px) {

}


/* 큰 모니터 */
@media only screen and (min-width : 1824px) {
}


/* iPhone4와 같은 높은 해상도 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

}

'web standard > responsive web' 카테고리의 다른 글

반응형웹의 시작  (0) 2012.03.19
Posted by 수라
web standard/jquery2014. 1. 9. 17:46

출처 : http://egorkhmelev.github.io/jslider/


'web standard > jquery' 카테고리의 다른 글

이벤트 설정 시에 jQuery의 .on()을 사용하자.  (0) 2014.10.13
[jquery] ajax 방법  (0) 2014.04.11
width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
좌우(상하) 슬라이드  (0) 2012.02.29
lnb 슬라이드메뉴  (0) 2012.02.21
Posted by 수라
web standard/jquery2013. 4. 22. 11:49

출처 : https://github.com/stowball/jQuery-rwdImageMaps


c / jQuery-rwdImageMaps

JavaScript

Responsive Image Maps jQuery Plugin Read more



Read-Only access

README.md


'web standard > jquery' 카테고리의 다른 글

[jquery] ajax 방법  (0) 2014.04.11
jQuery Slider plugin  (0) 2014.01.09
좌우(상하) 슬라이드  (0) 2012.02.29
lnb 슬라이드메뉴  (0) 2012.02.21
수평네비게이션 기초  (0) 2012.02.13
Posted by 수라