DEV/CSS
크롬 모바일 터치시 파란색 배경 제거
크롬 모바일에서 터치, 클릭시 생기는 파란색 배경 제거 -webkit-tap-highlight-color: transparent;
반응형 테이블
#html 이름 반응형 #css @media all and (max-width: 768px){ .mt thead{display: none;} .mt tbody tr td{display: block;} /* 한 줄 */ /* .mt tbody tr td{display: inline-block; width: 50%;} */ /* 여러 줄 */ .mt tbody tr td:before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; } }https://codepen.io/anon/pen/dZrozW
선택 동작 없애기
html{ /* 화면을 길게 누르고 있을때 뜨는 팝업이나 액션시트를 제어 */ -webkit-touch-callout:none; /* 텍스트나 이미지를 선택할 수 있게 하는 여부를 제어 */ -webkit-user-select:none; /* 링크를 터치했을때 나오는 기본 영역의 색상을 제어 */ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } -webkit : 구글 크롬, 애플 사파리에 적용. -moz : 모질라(FireFox, 파이어폭스)에 적용. -ms : 인터넷익스플로러에 적용. -o : 오페라에 적용. oncontextmenu : 오른쪽 금지ondragstart : 드래그 금지onselectstart : 선택 복사 금지 참고 : https://m.blog.n..
HTML 색상표
RED HTML COLOR NAMESINDIANRED#CD5C5CRGB(205, 92, 92)LIGHTCORAL#F08080RGB(240, 128, 128)SALMON#FA8072RGB(250, 128, 114)DARKSALMON#E9967ARGB(233, 150, 122)LIGHTSALMON#FFA07ARGB(255, 160, 122)CRIMSON#DC143CRGB(220, 20, 60)RED#FF0000RGB(255, 0, 0)FIREBRICK#B22222RGB(178, 34, 34)DARKRED#8B0000RGB(139, 0, 0)PINK HTML COLOR NAMESPINK#FFC0CBRGB(255, 192, 203)LIGHTPINK#FFB6C1RGB(255, 182, 193)HOTPINK#FF6..
checkbox switch ios
1. http://callmenick.com/post/css-toggle-switch-examples 에 들어간다. 2. Get source 버튼을 눌러 다운을 받아준다. 3. 받은 파일 압축을 풀어준다. 4. css폴더안에 style.css 를 프로젝트 안에 넣어준다. 5. 사이에 css를 지정해준다. 이름을 바꿔 사용해도 무방하다. 6. 기본형은 아래와 같고 응용해서 사용하면 된다. 7. 자바스크립트 Checkbox Checked 여부확인은 아래와 같이 하면된다. function test(obj){var cb_id = document.getElementById(obj.getAttribute('id')); if(cb_id.checked){ console.log("true"); // 클릭 }else{ c..
부트스트랩 테이블 정렬
https://www.codeproject.com/Tips/823490/Bootstrap-Table-With-Sorting-Searching-and-Paging
input, textarea, button 파란색 테두리 제거 및 색상 바꾸기
input{ outline-style:none; } outline-style = auto | none | dotted | dashed | solid | double | groove | ridge | inset | outset default none dotted dashed solid double groove ridge unset outset input:focus{ outline: 1px solid blue; } outline-style : 외곽선 스타일 outline-color : 외곽선 색상 outline-offset : 외곽선과 요소의 가장자리 또는 border 사이에 공백 outline-width : 외곽선 폭 outline : 모든 외곽선의 속성 설정
비율 유지 이미지 object-fit
가로·세로 비율은 유지한 채로 주어진 영역에 여백이 없도록 맞춤(확대·축소) object-fit :cover; fill; contain; none; scale-down; object_position : top; bottom;