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

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

너비를 설정할 경우 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

margin 이나 padding 속성값을 연속적으로 설정할 수 있는데 자꾸 잊어버린다.


값이 한개 :  "상하좌우"

값이 두개 : ''상하" "좌우"

값이 세개 : "상" "좌우" "하"

값이 네개 : "상" "우" "하" "좌" 



border-radius는

border-radius : radius

border-radius: top-left-and-bottom-right    top-right-and-bottom-left

border-radius: top-left    top-right-and-bottom-left    bottom-right

border-radius: top-left    top-right    bottom-right    bottom-left



시계방향이라고 기억하자

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

[css3] box-sizing  (0) 2013.08.20
[css3] max-width  (0) 2013.08.20
[css3] !important  (1) 2013.08.20
[css3] MediaQuries 반응형웹  (0) 2013.08.20
[css3] 유용한 css3효과 모음  (0) 2013.05.30

css는 순차적으로 정의되기 때문에 중복으로 정의할 경우 나중에 정의한 값이 적용이된다.


다시말하자면


div{

color:red

}


div{

color:blue

}


라고 정의했다면 마지막에 정의한 blue색깔이 적용될 것이다.


!important를 사용하면 처음에 적용된 값을 유지하게 해준다.


div{

color:red !important;

}


div{

color:blue

}


앞의 색깔이 유지되는걸 확인할 수 있다.


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

[css3] box-sizing  (0) 2013.08.20
[css3] max-width  (0) 2013.08.20
[css3] 속성값 여러개 사용할때  (0) 2013.08.20
[css3] MediaQuries 반응형웹  (0) 2013.08.20
[css3] 유용한 css3효과 모음  (0) 2013.05.30

반응형웹이란 웹의 크기에 맞춰 적합한 디자인을 적용시킨다.


어렵게 생각할 필요없이 크기에 따라 css적용을 다르게 해주면 된다는 말이다.


css3의 미디어쿼리를 사용해 웹사이즈에따라 css를 적용시킬수 있다.



미디어쿼리의 사용방법은 다음과 같다.


@media screen and (max-width: 480px) { 스타일적용 } //너비가 480이하


@media screen and (min-width: 481px) and (max-width: 1024px) { 스타일적용 } //너비가 481이상 1024이하


@media screen and (min-width: 1205px) { 스타일적용 } //너비가 1205이상


위와 같이 사이즈에 따라 스타일 적용을 다르게 하면 된다.


크기를 바꿔보세요


웹 사이즈를 조절해 보면 색깔이 바뀌는 것을 확인 할 수 있다.


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

[css3] box-sizing  (0) 2013.08.20
[css3] max-width  (0) 2013.08.20
[css3] 속성값 여러개 사용할때  (0) 2013.08.20
[css3] !important  (1) 2013.08.20
[css3] 유용한 css3효과 모음  (0) 2013.05.30

+ Recent posts

티스토리툴바