기준이 1920인 width: 500px; 를 vw로 변경 할 경우
Category Archives: Web Publishing
Android 4.* native `audio` and `video` controls bug
android 4.*버전의 android 브라우저에서 -webkit-appearance사용시 video태그의 기본 컨트롤의 스타일이 무너지는 현상 html 셀렉터를 이용하여 해결필요 [css] html input[type="button"] { -webkit-appearance: none } [/css]
안드로이드 pointer-events 버그
몇몇 안드로이드에서 touchstart 같은 touch전용 이벤트가 걸린 엘리먼트 위에 pointer-events: none;가 걸린 엘리먼트를 위에 띄울경우 touch이벤트가 안먹는 문제가 발생.
:nth-child(n)
n 2n+1 4n+1 4n+4 4n 5n-2 -n+3 0 1 1 4 – – 3 1 3 5 8 4 3 2 2 5 9 12 8 8 1 3 7 13 16 12 13 – 4 9 17 20 16 18 – 5 11 21 24 20 23 – 머리가 안돌아가서 적어둠….
IE10에서 IE 호환성 모드사용하기
IE8로 넘어 오면서 호환성모드를 ms에서 추가 하였습니다. 아래의 소스와 같은 방식으로 호환성 모드를 동작시킬수가 있습니다. [html] <meta http-equiv="X-UA-Compatible" content="IE=9" /> [/html] 헌데 IE10에서 자바스크립트로 태그의 속성을 체크 할경우 문제가 생깁니다. html5에서 추가된 placeholder같은 IE10에서만 동작하는 속성의 경우 호환성 모드가 추가될 경우 아래와 같은 방법으로는 속성값을 뽑아오지 못하고 undefined를 뿌려주는 문제가 생기게 됩니다. [html] <input type="text" …
CSS Flexbox
여러가지 방법이 있겠지만 Flexbox를 이용한 유동적으로 늘어나고 줄어드는 input박스를 구현해봤습니다. 요즘 모바일 코딩시 전화번호 입력폼, 주민등록번호 입력폼등에서 많이 사용하고있습니다. 좋은 방법이 될지 확신은 안서지만 가장 편하더군요.-_-