css

폰트선언

@font-face { font-family:noto; font-style:normal; font-weight:300; src:url(font.eot); src:local(※), url(font.eot?#iefix) format('embedded-opentype'), url(font.woff) format('woff'), url(font.ttf) format('truetype'); }

transition

- css

.selector { transition-property:all; transition-duration:.3s; transition-timing-function:ease; /* transition-timing-function:ease-in; transition-timing-function:linear; */ transition-delay:.1s; }

- script (콜백)

$('.selector').bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){ console.log('트랜지션 종료'); });

select - 스타일 초기화

select { -webkit-appearance:none; -moz-appearance:none; appearance:none; } /* 익스 */ select::-ms-expand {display:none;}

background

- css

.selector { background:url('bg.jpg') no-repeat 0 0; background-attachment:fixed; }

placeholder

input:-ms-input-placeholder {color:#999;} input::-webkit-input-placeholder {color:#999;} input::-moz-placeholder{color:#999;} input::placeholder {color:#999;} textarea:-ms-input-placeholder {color:#999;} textarea::-webkit-input-placeholder {color:#999;} textarea::-moz-placeholder{color:#999;} textarea::placeholder {color:#999;}

scroll bar 감추기

.class { -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none; } .class::-webkit-scrollbar {display:none;}

멀티라인 말줄임

.selector { display:-webkit-box; overflow :hidden; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical; }