note

크롬기준/접두어(-moz, -o-, -webkit-) -webkit-transition-property: background; transition-property: background; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease; transition-timing-function: ease;

사진에 오버시 이미지가 살짝 커지는효과 ul li img {transform:scale(1);transition:.3s ease-in-out;-webkit-transform:scale(1); -webkit-transition:.3s ease-in-out;} ul li:hover img {transform:scale(1.1);-webkit-transform:scale(1.1);}

css3 버튼 눌리는 효과 click .button { position: relative; display: inline-block; margin: 0 auto; -webkit-border-radius: 10px; -webkit-box-shadow: 0px 3px rgba(128,128,128,1), /* gradient effects */ 0px 4px rgba(118,118,118,1), 0px 5px rgba(108,108,108,1), 0px 6px rgba(98,98,98,1), 0px 7px rgba(88,88,88,1), 0px 8px rgba(78,78,78,1), 0px 14px 6px -1px rgba(128,128,128,1); /* shadow */ -webkit-transition:..

chrome update 후 최신버전 54.0.2840.71 에서 인쇄시 table cell 글자가넘어감미디어쿼리로 줌크기 조정 @media print { body { zoom: .7 } }

HTML: JS : var $container = $("#wrapper"); var canvas = $container.find('canvas')[0]; var context = canvas.getContext('2d'); var currentX = canvas.width / 2; var currentY = canvas.height / 1.9; var currentText1 = ''; var currentImage = ''; $container.on('keyup', '.input-text1', changedText1); //src : 이미지 파일명 function renderImage(src){ context.clearRect(0,0, canvas.width, canvas.height); var imag..

html: text : 이미지생성 js: var canvas, context, tool; canvas = document.getElementById('myCanvas'); context = canvas.getContext('2d'); context.font = 'italic 40px Calibri'; if(window.addEventListener){ window.addEventListener('load', InitEvent, false); } function InitEvent (){ if (!canvas) { alert('캔버스 객체를 찾을 수 없음'); return; } if (!canvas.getContext) { alert('Drawing Contextf를 찾을 수 없음'); return; } /..

검색 .search-box { } .search-box li { float:left; } .sch-name { width:200px; border:0; padding:6px 8px; } button { overflow: visible; position: relative; float: right; border: 0; padding: 0; cursor: pointer; height: 30px; width: 50px; line-height: 30px; color: #fff; background: #d83c3c; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); } button:before { content: ''; position: ab..

remove grey background on link clicked in ios safari 색상&투명도 설정 /* light blue at 80% opacity */ html { -webkit-tap-highlight-color: rgba(201, 224, 253, 0.8); } /* change it for a div that has a similar background-color to the light blue tap color */ .blueDiv { -webkit-tap-highlight-color: rgba(251, 185, 250, 0.9); }아예없애기.myButton { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

HTML 특수문자코드표 표현문자숫자표현문자표현설명-�--사용하지 않음space -수평탭space -줄 삽입---사용하지 않음space -여백!!-느낌표"""따옴표##-숫자기호$$-달러%%-백분율 기호&&&Ampersand''-작은 따옴표((-왼쪽 괄호))-오른쪽 괄호**-아스트릭++-더하기 기호,,-쉼표---Hyphen..-마침표//-Solidus (slash)0 - 90-9-0부터 9까지::-콜론;;-세미콜론>>보다 큰??-물음표@@-Commercial atA - ZA-Z-A부터 Z까지[[-왼쪽 대괄호\\-역슬래쉬]]-오른쪽 대괄호^^-탈자부호__-수평선``-Acute accenta - za-z-a부터 z까지{{-왼쪽 중괄호||-수직선}}-오른쪽 중괄호~~-꼬리..

모바일 기기에서 웹브라우저로 사이트 접속 시 즐겨찾기나 북마크 설정으로 페이지 바로가기 아이콘을 만들 수 있음. 아이폰과 안드로이드에서 link태그를 이용하면 되고 사용법은 약간 다른부분,, 1. 아이폰(ios) 2. 안드로이드(android) 안드로이드는 72x72사이즈 png이미지를 지정해주면 됨. 아이폰은 자동으로 리사이징되지만 고정사이즈 이미지를 사용하면 깨져보이므로 사이즈별로 지정해주는게 좋음. iPhone 3gs57x57(px)iPad72x72(px)iPhone 4/4s114x114(px)New iPad144x144(px) ※ 아이폰 사이즈 지정 아이폰은 자동으로 모서리 둥글게, 광택 효과가 적용이 됨ㅎ. 그래서 아이콘 제작할 때 따로 효과를 주지 않아도 되고, 모서리를 둥글게 만들 필요가 없..