Play Ground

cordova를 이용해서 하이브리드 앱으로 제작하던 도중,네이티브 앱이 아닌 모바일웹이다보니 자꾸 버튼이나 a태그를 선택할 때 텍스트에 영역이 잡히는 현상이 발생하였다.그럴 경우엔 * { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; }위와 같이 CSS를 주면 해당 선택자는 드래그가 되지 않는다.

나는 마우스오버했을 때 버튼이 돌아가는걸 만들었다.서론 필요없고 소스부터 #chatBtn { width: 50px; height: 50px; border-radius: 50%; background: url("/images/btn_chat.png") no-repeat center #9736e5; } #chatBtn:hover { background-color: #A13AF5; -webkit-animation:spin 3s linear infinite; -moz-animation:spin 3s linear infinite; animation:spin 3s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @..

1. 미디어 쿼리(Media Query)란? :media의 종류에 따라 특정 css 스타일을 적용하고자 할 때 사용하는 css 스펙 가운데 하나데스크탑 브라우저, iPhone, iPad 모바일 브라우저 등에 스타일 시트를 구분하기 위해 사용 2. 미디어쿼리의 역할CSS에서 최초로 스크린의 종류(모니터 or 프린터 등)를 감지할 수 있게 되었고 CSS3에서 더 상세하게 변경되어 해상도, Landscape/Portrait(가로/세로)감지가 가능하게 되었다. 3. 미디어 쿼리 사용가능한 브라우저CSS3속성이므로 최근에 출시된 브라우저들에서 지원 가능미디어 쿼리를 지원하지 않는 브라우저는 조건과 상관없이 CSSS를 읽게 된다.PC용 브라우저 : MS익스플로러9+(8이하 지원X), 파이어폭스, 사파리, 크롬, 오..

예전에 구글드라이브에 정리해놓은 글이 있어 블로그에 옮겨본다 ※ Print mode(인쇄 스타일)를 적용하는 방법1. 2. 3. @media print {/*직접 코드입력*/} 코드 분리, 수정을 위해 @media print{}를 활용하는것을 권장. (크롬 개발자도구- 설정에서 media버전을 강제 지정하여 확인할 수 있다.)프린트시 반복적으로 나오거나, 필요없는 부분은 display: none;으로 안보이도록 작업을 먼저 한 후, 프린트 모드에 맞게 수정하면 된다.인쇄물의 제목, 회사의 로고, 카피등을 고정적으로 출력하기위해서 상단과 하단에 출력에만 나오는 헤더와 푸터를 삽입할 수 있다.전체출력 외 브라우저 내 특정부분만 출력하게 하기 위해서 예)

1.CSS Reset 2.IE6 CSS Bugs and Fixes Explained 3.Block and Inline Elements Explained 4.100% Height using CSS, Fixed Footer 5.CSS Rounded Corners 6.Float and Clear: A Comparison of CSS Clearing Techniques 1. CSS Reset - 크게 7가지로 정리해 볼 수 있을거 같습니다. 1. The CSS Reset 모든 엘레멘트에 margin값과 padding값을 초기화 시켜 줍니다. html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, d..

default.css /* reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;}fieldset,img{border:0 none;}dl,ul,ol,menu,li {list-style:none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}a{text-decoration:none}legend, caption{font-size:0;..