티스토리 툴바

Daum
Tistory
로그인
JavaScript2011/09/29 19:36

웹페이지 모바일 페이지 분기(script)

<script type="text/javascript">
if (navigator.userAgent.match(/iPad/) == null && navigator.userAgent.match(/Mobile|Windows CE|Windows Phone|Opera Mini|POLARIS/) != null)
    location.href = "http://" + location.host + "/m" + location.pathname;
</script>

간단하다.. 안드로이드 폰과 아이폰 모두 잡아낸다^^ 

<script language="JavaScript">
//모바일 페이지로 이동. 
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i<mobilePhones.length;i++)
if(uAgent.indexOf(mobilePhones[i]) != -1)
document.location = "http://"+ location.host +"/m" + location.pathname;
</script>


출처
http://jjong.co.kr/22
저작자 표시 비영리 동일 조건 변경 허락
Posted by hyelia
Trackback 0 Comment 0
Html/CSS2011/06/01 13:27

IE의 100% 문제



요즘은 html 코딩이 기본은 웹표준화!!!

그럼 간혹 플래시를 100%로 넣어야 한다던가. 이미지는 100%로 잘넣지않는다..

플래시를 100%로 넣었을때 문제이다...

그럼 플래시가 문제인가..?

플래시는 자신이 속한 컨테이너의 영향을 받기 때문에 문제가 전혀 문제가 되지않는다.

그래서 플래시가 아닌 이미지로 테스트를 해봄


1. 우선!! html 을 100%로 만 인식되게 함

코딩한지 몇년 되었지만 당연히 100% 란 table 에서만 존재하는 줄 알았는데.
이것저것 항상 해보면 되지 않았기 때문....

울회사에 계신 '안현자'님께서 쿨하게 한마디로 해결해주셨다.

"html 도 100% 주면 되.."

나름 웹표준코더로 생각하던 난 자괴감이 듬...ㅠㅠ
그래서 이것저것 테스트 해본결과!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 <title> Hyelia </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head>
<style type='text/css'>
 html, body {width:100%; height:100%; margin:0; padding:0; }
 body { background-color:#ff9933; }
</style>
<body>
<div style='width:100px; height:100%; background:#ff3399;'>100%</div>
</body>
</html>


아래처럼 작성하면 div 가 100% 늘었다 줄었다 하는것을 볼수있다.




2. 그러나!!!

저 div 안에 이미지, 꼭 div 가 아니더라도 body 안에 플래시를 넣으면  스크롤이 생기면서 약 10px 정도의 여백이 생긴다....
아놔.........
아무리 늘려도 스크롤이 사라지지 않는다....
이건 뭐지...?
라고 div 를 감싸보아도 어쩔수 없다..
그래서 구글 크롬 파폭에서 확인해본결과..
ie 의 문제이다.
픽셀을 계산하는 게 다른 브라우저들과 조금 틀린가 보다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 <title> Hyelia </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head>
<style type='text/css'>
 html, body {width:100%; height:100%; margin:0; padding:0; }
 body { background-color:#ff9933; }
 img {margin:0; padding:0;}
 form {margin:0; padding:0;}
</style>
<body> 
<img src='http://static.naver.com/www/u/2010/0611/nmms_215646753.gif' style='height:100%; width:500px;' /> </body>
</html>




3. 대안책

100%를 만들어야하는 놈의 컨테이너 에게 overflow:hidden 을 잡아주면 된다!
이미지건 플래시이건 모두에게 동일하게 작동됨!!
물론 그 상위 엘리먼트들이 100% 가 아니라면 여전히 작동되지않는다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 <title> Hyelia </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type='text/css'>
 html, body {width:100%; height:100%; margin:0; padding:0; }
 body { background-color:#ff9933; }
 img {margin:0; padding:0;}
 form {margin:0; padding:0;}
</style>
<body>
 <div style='width:500px; height:100%; overflow-y:hidden;'>
  <img src='http://static.naver.com/www/u/2010/0611/nmms_215646753.gif' style='height:100%; width:500px;' />
 </div>

</body>
</html>




4. 결론
- 목적 : 이미지, 플래시 등등을 100% 로 맞추고 싶다
- 방법 : 100% 의 플래시나 이미지를 넣으려면 그 오프젝트를 담고 있는 모든 부모 컨테이너들은 모두 100% 로 들어가야한다.
            또한 body, 뿐만아니라 html 에도 100% 로 잡혀있어야 한다!
- 결론 : ie 의 문제임!!!!!! ie 거지

이상 끝!!!
저작자 표시 비영리 동일 조건 변경 허락
Posted by hyelia
TAG 100%, 100%에러, CROM, Firefox, height, height:100%, html, IE, IE6, ie7, IE8, IE9, 구글크롬, 스크롤, 파이어 폭스
Trackback 0 Comment 1
AIR2010/08/20 14:19

Air의 시작 윈도우 만들기 (WindowedApplication , Window)

출처 http://dsbuilding.kr/10

Air는 어플리케이션 윈도우의 디자인을 다양하게 표현할 수 있습니다.
OS기반으로 만들 수도 있고 Flex Framework에서 공급하는 Air 크롬형태로 제작할 수 있으며,
개발자가 직접 디자인하여 벡터기반 또는 비트맵기반으로 윈도우를 제작할 수도 있습니다.

저는 Flex Builder를 사용하기 때문에 Flex Framework 기반으로 설명하겠습니다.
Flex Builder에서 Air Window를 생성하려면  WindowedApplication 와 Window 컴포넌트를 사용합니다. 
WindowedApplication 컴포넌트는 Air 어플리케이션에서 한개만 존재해야하는 메인 윈도우 객체 입니다. 한 어플리케이션에서 다른 윈도우를 생성하고 싶다면 Window 컴포넌트를 이용해야 합니다.
WindowedApplication 와 Window 컴포넌트는 Flex containers로 디자인 되었기 때문에 Layout 역할로서 Flex components 들을 담을 수 있습니다. 때문에 Flex를 다룰 줄 안다면 환경이 웹에서 윈도우로 바뀐것만 제외하고는 같기때문에  
Flex를 다루는 기술 + 윈도우시스템제어기술 이 두가지를 습득하면 Air로 쉽게 어플 개발이 가능합니다.

기본적으로 플래시 기반에서 윈도우를 관리하는 클래스는 NativeWindow 입니다.
WindowedApplication 와 Window  컴포넌트들은 Flex Framework 기반에서 쉽게 윈도우를 생성할 수 있도록 만들어진 컴포넌트입니다. 따라서 NativeWindow 클래스를 내장하고 있습니다.
하나의 윈도우 컴포넌트 객체는 하나의 스테이지를 관리하며 스테이지는 nativeWindow속성을 통해 윈도우를 관리 할 수 있다고 보면 됩니다.


윈도우 스타일을 설정하려면 아래 3가지 속성을 이해해야 합니다.


  • type
  • systemChrome
  • transparent


윈도우를 처음 생성할 때 위의 속성들을 사용하여 스타일을 만듭니다. 윈도우가 생성된 후에는 속성값을 변경할 수 없습니다.

*  transparent 속성이 true 이거나 type이 lightweight 일때는 systemChrome을 필히 none으로 설정하여야합니다. 이를 위반했을 시엔 프로세스는 죽지 않습니다. 혹시 실수로 설정해서 컴파일이 되지 않으면  작업관리자의 adl.exe 프로세스 찾아 강제로 종료시키면 됩니다.

Type

 type  description
 normal  표준 윈도우를 생성하는 경우
 utility task bar 정보가 표시되지 않음, 상태바표시되지 않음,시스템메뉴팝업가능(alt+spacebar)
 lightweight task bar 정보가 표시되지 않음,시스템메뉴팝업안됨


systemChrome

systemChrome 속성 값은 standart 또는 none이 있습니다.  standard로 설정되면 OS 크롬 스타일을 따릅니다. none으로 설정하면 Flex 크롬 스타일을 따릅니다.

transparent

transparent속성 값은 true 또는 false 입니다.  알파값을 사용하기 위해서는 transparent값을 true로 설정해야합니다. true속성값과 systemChrome의 standerd 속성값을 함께 사용할 수 없습니다. true로 설정되었을 시에는 systemChrome은 none이 되어야합니다.





window initialization properties

initialization 속성은 윈도우가 만들어진 후에는 변경할 수 없습니다. initialization 속성의 default 값은 다음과 같습니다.

  Property    Defalut Value
   systemChrome     standard 
   type     normal 
   transparent     false 
   maximizable     true 
   minimizable     true
   resizable     true 

 위 속성들은 초기 윈도우가 만들어질 때 세팅할 수 있습니다. 메인윈도우(WindowApplicated) 에서는 type값을 바꿀 수 없고 항상 normal 입니다. 또한  WindowApplicated 는 속성값을 xml 파일에서 해줘야합니다. (Flex Builder에서 Air프로젝트를 생성하면 어플이름명-app.xml이란 파일이 생성됩니다.)


저작자 표시 비영리 동일 조건 변경 허락
Posted by hyelia
Trackback 0 Comment 0