sunflower

[카테고리:] Web Publishing

  • calc를 이용하여 vw로 변환하기

    기준이 1920인 width: 500px; 를 vw로 변경 할 경우

    :root {
    --vw-base: 1920;
}
.foo {
    width: calc(500 * 100vw / var(--vw-base));
}

  • 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" id="input" placeholder="ID를 입력해주세요." />

    <srcipt type="text/javascripty">
    alert(document.getElementById(‘input’)[‘placeholder’]);
    //undefined
    </script>
    [/html]

    해결 방법은 아래와 같이 attributes를 사용하여 값을 뽑아오면 되겠습니다.
    [js]
    alert(document.getElementById(‘input’).attributes[‘placeholder’].value);
    [/js]

    IE는 10이 되서도 문제를 일으키는군요.ㅠ

  • CSS Flexbox

    여러가지 방법이 있겠지만 Flexbox를 이용한 유동적으로 늘어나고 줄어드는 input박스를 구현해봤습니다.
    요즘 모바일 코딩시 전화번호 입력폼, 주민등록번호 입력폼등에서 많이 사용하고있습니다.
    좋은 방법이 될지 확신은 안서지만 가장 편하더군요.-_-

    (더 보기…)