http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

'hybrid app > HTML5' 카테고리의 다른 글

모바일에서 숫자 자동전화걸기 자동 링크 방지  (0) 2014.03.24
[HTML5] 구글에서 제공하는 webgl sample  (0) 2013.12.23
[HTML5] HTML5 Rocks 한글 페이지  (0) 2013.10.28
[HTML5] HTML5 Sortable  (0) 2013.07.01
[HTML5] Mobile Web & HTML5 최적화  (0) 2013.06.03

필자는 phonegap2.4를 기준을 설명합니다.


프로젝트를 생성후 디바이스에서 실행시키면 아래 사진과 같이 에러가 발생한다.



이를 아래 사진을 보면서 수정해 봅시다.



위 사진과 같이Any IOS SDK가 armv7으로 설정돼 있을텐데 위와 같이 armv7과 armv7s를 선택하면 디바이스에서도


잘 실행이 될것입니다.


'hybrid app > phonegap' 카테고리의 다른 글

[phonegap cordova] plugin 모음  (0) 2013.06.11
[phonegap cordova] ios plugin 만들기  (1) 2013.05.23
[phonegap cordova] android childbrowser 2.2이상에서 실행시키기  (0) 2013.05.20
[phonegap cordova] android localnotification 플러그인 알림창 선택시 앱 실행하기  (0) 2013.05.20
[phonegap cordova] InAppBrowser  (0) 2013.05.20

AngularJS를 설정하고 시작해 보겠습니다.


AngularJS는 구글에서 개발한 라이브러리 입니다. 


AngularJS는 자동 바인딩을 사용하여 객체의 속성을 바꾸면 화면이 자동으로 변경됩니다.


직접 보면서 해보도록 하겠습니다.


일단 AngularJS홈페이지를 방문하여 소스를 다운받습니다. (http://angularjs.org/)


아래와 같이 입력해 봅시다.


<!DOCTYPE html>

<html ng-app>  <!--ng-app이란 Angular.js라이브러리를 사용하겠다고 선언하는 것입니다.-->

<head>

    <title></title>

    <script src="angular.js"></script>


</head>

<body >

    <input ng-model="text">

    <h1>{{text}}</h1><!--{{ }}은 angular.js라이브러리의 템플릿입니다.-->

</body>

</html>


아래 input창에 텍스트를 입력해 보면 실시간으로 변경되는걸 보실수 있습니다.

{{text}}



여기서 소개는 마치도록 하고 다음부터 Angular.js에 대해 자세히 설명하겠습니다.


'AngularJS' 카테고리의 다른 글

[AngularJS] 데이터 바인딩과 필터  (0) 2013.10.30
[AngularJS] contorller  (0) 2013.10.28

https://kuler.adobe.com/


색감이 떨어지시는 분들을 위한 색상 조합 사이트 입니다.




'기타' 카테고리의 다른 글

[크로스브라우징 테스트] mac에서 vm없이 explorer 사용하기  (0) 2013.11.18
facebook oauth 연동문제  (0) 2013.11.11
스프라이트 생성 사이트  (0) 2013.08.26
[mac] finder에서 경로를 입력 이동하기  (0) 2013.07.18
webstorm 줄단위 이동, 함수단위 이동  (0) 2013.07.12

http://css-tricks.com/examples/ShapesOfCSS/


별모양, 오각형, 평행사변형 등 다향한 도형을 css로 표현



'hybrid app > css3' 카테고리의 다른 글

[css3] css3 3d transform sample  (0) 2013.12.23
[css3] Increase Your Site’s Performance with Hardware-Accelerated CSS  (0) 2013.12.13
[css3] prefix free 플러그인  (0) 2013.08.28
[css3] +, ~ 선택자(selector)  (0) 2013.08.27
[css3] box-sizing  (0) 2013.08.20

http://leaverou.github.io/prefixfree/


-moz-  -webkit-같은 prefix를 생략하게 해줍니다.


'hybrid app > css3' 카테고리의 다른 글

[css3] Increase Your Site’s Performance with Hardware-Accelerated CSS  (0) 2013.12.13
[css3] 도형 정리 사이트  (0) 2013.08.28
[css3] +, ~ 선택자(selector)  (0) 2013.08.27
[css3] box-sizing  (0) 2013.08.20
[css3] max-width  (0) 2013.08.20

선택자A + 선택자B  : 선택자A 바로뒤에 위치하는 선택자B를 선책한다.


선택자A ~ 선택자B  :  선택자A 뒤에 위치하는 선택자B를 선택한다.

'hybrid app > css3' 카테고리의 다른 글

[css3] 도형 정리 사이트  (0) 2013.08.28
[css3] prefix free 플러그인  (0) 2013.08.28
[css3] box-sizing  (0) 2013.08.20
[css3] max-width  (0) 2013.08.20
[css3] 속성값 여러개 사용할때  (0) 2013.08.20

http://csssprites.com/

'기타' 카테고리의 다른 글

[크로스브라우징 테스트] mac에서 vm없이 explorer 사용하기  (0) 2013.11.18
facebook oauth 연동문제  (0) 2013.11.11
adobe kuler 사이트  (0) 2013.08.29
[mac] finder에서 경로를 입력 이동하기  (0) 2013.07.18
webstorm 줄단위 이동, 함수단위 이동  (0) 2013.07.12

너비를 설정할 경우 margin값과 padding값이 들어가면 


같은 너비를 설정하더라도 크기가 다르게 됩니다.


<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        #box1{

            width:300px;

            margin:20px auto;

            border: 1px solid black;

        }

        #box2{

            width:300px;

            margin:20px auto;

            padding:50px;

            border: 10px solid black;

        }

    </style>

</head>

<body>

    <div id="box1">box1</div>

    <div id="box2">box2</div>

</body>

</html>



box1
box2


box-sizing이라는 프로퍼티를 사용하면 해당 엘리먼트의  패딩과 테두리가 더는 너비를 늘이지 않습니다.


<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        #box3{

            width:300px;

            margin:20px auto;

            border: 1px solid black;

            box-sizing: border-box;

        }

        #box4{

            width:300px;

            margin:20px auto;

            padding:50px;

            border: 10px solid black;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

    <div id="box1">box1</div>

    <div id="box2">box2</div>

</body>

</html>



box3
box4


'hybrid app > css3' 카테고리의 다른 글

[css3] prefix free 플러그인  (0) 2013.08.28
[css3] +, ~ 선택자(selector)  (0) 2013.08.27
[css3] max-width  (0) 2013.08.20
[css3] 속성값 여러개 사용할때  (0) 2013.08.20
[css3] !important  (1) 2013.08.20

설정한 width값보다 브라우저 창이 작을경우 다음과 같은 현상이 발생합니다.



max-width를 사용하면 설정한 넓이보다 웹의 창이 작아지면 웹 크기에에 맞춰 조절이 됩니다.



'hybrid app > css3' 카테고리의 다른 글

[css3] +, ~ 선택자(selector)  (0) 2013.08.27
[css3] box-sizing  (0) 2013.08.20
[css3] 속성값 여러개 사용할때  (0) 2013.08.20
[css3] !important  (1) 2013.08.20
[css3] MediaQuries 반응형웹  (0) 2013.08.20

+ Recent posts

티스토리툴바