웹앱 작성을 위한 CSS 팁

출처 : 안드로이드 웹앱 / 조나단 스타크 / 한빛미디어 ISBN 978-89-7914-911-1 13560

== 둥근 모서리 처리 

 

#header ul li:first-child a {
 -webkit-border-top-left-radius: 8px;
 -webkit-border-top-right-radius: 8px;
}

#header ul li:last-child a {
 -webkit-border-bottom-left-radius: 8px;
 -webkit-border-bottom-right-radius: 8px;
}

== 배경 그라데이션 처리 

 

background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999) );

== 버튼 border 이미지 처리 

 

-webkit-border-image: url(../img/button.png) 0 8 0 8;

== 브라우저 너비에 따라 css변경시키기 

 

<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" type="text/css" href="../css/android.css" media="only screen and (max-width: 600px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 601px)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="desktop.css" media="all" /> 

<![endif]-->