모바일에서 선택 영역 하이라이트 비활성화 하기
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
하이브리드앱에서 텍스트를 길게 눌렀을 때 선택되는 기능을 방지
body{moz-user-select:none;-webkit-user-select:none;user-select:none;}
영역 선택 시 아웃라인 없애기
a, button, input, select, textarea {outline-style:none;}
| 팝업 가운데 정렬 (0) | 2016.06.22 |
|---|---|
| 모바일 터치 영역 가이드 라인 (0) | 2016.06.15 |
| 셀렉트 박스 (0) | 2015.01.05 |
flexable하게 가운데 정렬
ie10 이상 일 경우
position:fixed;
left:50%; top:50%;
transform: translate(-50%, -50%);
margin:auto;
가로의 경우
media query를 사용하여, 넓은 화면에선 고정(px)로 사용하고, 좁은 화면에서 동적(%)으로 설정할 수 있다.
case 1 : width를 %로 설정한 경우
// width가 %일 경우 남은 여백을 양쪽 마진으로 설정한다. ※ auto 적용 불가
width:80%;
margin:0 10%;
case 2 : width를 px로 설정한 경우
// left를 50%로 설정하고, margin-left를 팝업상자(modal) 넓이/2만큼 뺀다.
@media (min-width:500px) {
left:50%;
width:400px;
margin-left:-200px;
}
세로의 경우
top:50%;
case 1 : height이 고정(px)인 경우
// margin-top을 팝업상자(modal) 높이/2만큼 뺀다.
height:200px;
margin-top:-100px;
case 2 : height가 동적일 경우
javascrip에서 팝업상자(modal)의 높이를 계산하여 높이/2만큼 빼도록 설정한다.
$(documnet).ready(function(){
$(".modal").css("margin-top","-" + ($(".modal").outerHeight())/2 + "px");
return this;
});
| 모바일 웹이 아닌 앱처럼 보이기 (0) | 2016.11.11 |
|---|---|
| 모바일 터치 영역 가이드 라인 (0) | 2016.06.15 |
| 셀렉트 박스 (0) | 2015.01.05 |
https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
모바일 터치 영역 가이드 라인
iPhone 44px
MS Window Phone 34px/26px(최소)
Nokia 1cm/28px
그러나, 위 사이즈들은 사람의 표준 손가락 사이즈보다 훨씬 작다.
MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense
the avarage width of index finger is 1.6-2cm for most adults.
45-57px
| 모바일 웹이 아닌 앱처럼 보이기 (0) | 2016.11.11 |
|---|---|
| 팝업 가운데 정렬 (0) | 2016.06.22 |
| 셀렉트 박스 (0) | 2015.01.05 |
문제점 : 내용이 Select Box 사이즈보다 긴 경우 선택창에 뿌려진 내용이 짤린다.
해결 : 뿌리는 창은 p, div tag로 하고, select 옵션은 디바이스 피커를 사용하기 위해
셀렉트 텍스트 위에 select box를 opacity 0으로 해서 위치한다.
<p id="selectViewer">sample Text</p>
<select id="select"></select>
select{margin-top:-selectbox height;opecity:0;}
디바이스 브라우저에 따라 셀렉트 구현
| 모바일 웹이 아닌 앱처럼 보이기 (0) | 2016.11.11 |
|---|---|
| 팝업 가운데 정렬 (0) | 2016.06.22 |
| 모바일 터치 영역 가이드 라인 (0) | 2016.06.15 |