Decoding Note

//화면을 길게 누르고 있을때 뜨는 팝업이나 액션시트를 제어 -webkit-touch-callout:none; // 텍스트나 이미지를 선택할 수 있게 하는 여부를 제어 -webkit-user-select:none; // 링크를 터치시 나오는 기본 영역의 색상을 제어 -webkit-tap-highlight-color:rgba(0, 0, 0, 0);

img 태그에 src 값이 없을 경우, border를 none으로 설정해도 선이 생긴다!!! border-style: hidden; border: 0px; border-width: 0px; 등등.... 아무리 해도 경계선이 생긴다....삽질 및 검색을 해서 알아낸 방법!! img { display: inline-block; content: ""; }위 2가지만 추가해주면 경계선이 사라진다!!!

form을 사파리 모바일 웹에서 보면 input box에 inner-shadow가 생겨 있는걸 볼 수 있다. 아래는 inner-shadow를 제거하는 방법이다. input { -webkit-appearance: none; }

vendor prefixCSS3 표준안은 아직 확정되지 않았기 때문에 표준이 되지 않은 속성은 모든 브라우저에서 동일한 효과가 적용되지 않는다. 이때 브라우저에 따라 다른 접두어를 붙이는 방식으로 속성을 적용하는데, 이를 'verdor prefix’라고 말한다. -webkit-border-radius: 1px; // 사파리, 크롬 -moz-border-radius: 1px; // 파이어폭스 -o-border-radius: 1px; // 오페라 -ms-border-radius: 1px; // 익스플로러 border-radius: 1px; // CSS3 표준속성 브라우저는 순서대로 해당 속성을 읽기 시작하므로 호환성을 위해서 접두어가 붙은 속성들을 먼저 작성해주고 표준 속성을 마지막에 작성해 준다. 여기서 ..