IOS에서 폼 필드 초기화하기
IOS에서 폼 필드 초기화하기 텍스트 필드 input,textarea{background-clip:padding-box;-webkit-appearance:none;-webkit-border-radius: 0;} 라디오 버튼 input[type=radio]{border-radius:100%;}
IOS에서 Auto Tel 제거하기
IOS에서 Auto Tel 제거하기 <meta name="format-detection" content="telephone=no" />
텍스트 필드에서 x 버튼 제거하기
텍스트 필드에서 x 버튼 제거하기 HTML <input type="search" /> <input type="text" /> CSS IE: ::-ms-clear { display: none; width : 0; height: 0; } ::-ms-reveal { display: none; width : …
화면 비율별 반응형 스타일 예제
화면 비율별 반응형 스타일 예제 Ratio 1:1 Aspect Ratio .responsive-ratio.ratio-1to1 { padding-top: 100%; } 16:9 Aspect Ratio .responsive-ratio.ratio-16to9 { padding-top: 56.25%; } 4:3 Aspect Ratio .responsive-ratio.ratio-4to3 { padding-top: 75%; } …
스크린 해상도별 반응형 스타일
Responsive Stylesheet Screen Resolution We refer to the screen resolution statistics of the world. (http://gs.statcounter.com/) /* – Desktop || 1920px || wide – Desktop || 1680px || xlarge – Desktop …
CSS에서 placeholder 텍스트 컬러 바꾸기
CSS에서 placeholder 텍스트 컬러 바꾸기 Usage html <input type="text" placeholder="Hello World" /> css ::-webkit-input-placeholder { color: pink; } /* Chrome/Opera/Safari */ ::-moz-placeholder { color: pink; } /* Firefox 19+ */ …
IOS에서 자동으로 폰트 사이즈를 조절하는 기능 끄기
IOS에서 자동으로 폰트 크기를 조절하는 기능 끄기 html { -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; }
CSS에서 nth-child 속성 활용 예제
CSS에서 nth-child 속성 활용 예제 n번째 이후 li:nth-child(3n) {} li:nth-child(n+2) {} li:nth-child(3n+1) {} 테이블 tr 4행이후 모든 td table tr:nth-child(4) ~ tr td {} 4행부터 ~ 9행까지 li:nth-child(n+4):nth-child(-n+9){}
CSS에서 float 속성 clear 시키는 방법
CSS에서 float 속성 clear 시키는 방법 <div class="parent"> <div class="child"></div> <div class="clear"></div> </div> 새로운 태그를 추가하여 clear 스킨다 .parent { float: left; } .child {} .clear {clear:both} 부모 태그를 float시킨다. …
CSS에서 수직 중앙 정렬하기
CSS에서 수직 중앙 정렬하기 테이블 속성 이용한 방법 .valign-parent {display:table;width:100%;height:100%;} .valign-child {display:table-cell;vertical-align:middle;} 포지션 속성 이용한 방법 .valign-parent { position: relative; width:100px;height:100px; } .valign-child { width: 50%; height: 50%; position: absolute; …