[모바일웹] -webkit 모바일웹 코딩에서 사용하는 웹킷 CSS를 정리 -webkit-tap-highlight-color,-webkit-text-size-adjust:none;사파리/크롬 등 스크롤바 제어,viewport

-webkit-tap-highlight-color,-webkit-text-size-adjust:none;사파리/크롬 등 스크롤바 제어,viewport
모바일 웹 코딩시 기본적으로 적용하는 몇 가지 -webkit css 스타일 시트와 메타 뷰포트들이다. 
[모바일 사이트 보기 비율 지정]
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

-webkit-tap-highlight-color
탭,링크 등 포커스가 맞춰졌을때 나타나는 색상을 결정한다. 아이폰에선 사각형 박스형태로 표시되고 색상,알파값이 제대로 적용이 되는것으로 보인다.
안드로이드폰에선 알파값이 0이 아니라면 디폴트로 정해져 있는 두꺼운 주황색테두리가 표시가 된다.
따라서 
-webkit-tap-highlight-color:rgba(0,0,0,0);
로 맞춰주면 조금더 앱스러운 모바일 웹페이지를 만들 수 있다.
-webkit-text-size-adjust:none;
모바일 사이트에서 텍스트 비율이 유동적인 것을 막아줍니다. 지정 비율 유지
(auto | none이 있으면 기본은 auto)
-webkit-border-radius:1px; 
인풋 요소의 라운딩을 조절

[인풋 요소의 표현, none으로 하면 그림자 등이 깨끗하게 사라진다.]
-webkit-appearance:none;
-webkit-appearance:text;
-webkit-appearance:radio;
-webkit-appearance:checkbox;
[사파리/크롬 등 스크롤바 제어]
-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; } 
-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment
{display: block; height: 10px; background: url('./images/bg.png') #efefef}
-webkit-scrollbar-track
{
background: #efefef; -webkit-border-radius: 10px; border-radius:10px;
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
:-webkit-scrollbar-thumb
{height: 50px; width: 50px; background: rgba(0,0,0,.2);
-webkit-border-radius: 8px; border-radius: 8px;
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}