Heojju

-webkit-filter : grayscale(100%) a img{ -webkit-filter: grayscale(100%); filter: gray; } a:hover img{ -webkit-filter: grayscale(0%); filter: none; } 결과 : 흑백처리된 이미지. 마우스오버시에 원래 색으로 바뀝니다.

$(document).ready(function(){ $( "#draggable" ).draggable(); }); #draggable{width:150px; height:150px; border:1px solid #ccc;} #draggable:hover{cursor:move;} Element

▤ cursor 속성 .element{cursor:auto;} auto crosshair default move hand text wait help n-resize s-resize ne-resize sw-resize nw-resize se-resize e-resize w-resize pointer progress not-allowed no-drop vertical-text all-scroll col-resize row-resize cursor1.cur cursor2.gif 참고 : http://cofs.tistory.com/212 [CofS]

.element{width:500px;}#layer{display:none; padding:10px; background:#e6e6e6;}#layerClose{font-size:15px; float:right;}.element:hover, #layerClose:hover{cursor:pointer; opacity:0.8;} 음식입니다. 닫기X $('.element').click(function(e) { var divTop = e.clientY - 20; //상단 좌표 var divLeft = e.clientX - 40; //좌측 좌표 $('#layer').css({ "top": divTop ,"left": divLeft , "position": "absolute" }).show(); }); $("#lay..

1 Element:nth-child(n) 부모의 n번째 자식인 Element요소2 Element:nth-of-type(n) 같은 유형의 n번째 형제인 Element요소 해당 태그 안에 다른 태그가 있을경우에는 2 만 적용이 된다. (IE8 이하에서는 호환되지 않습니다.) (1) 첫번째 요소(1)(2) 두번째 요소(2)(2n) 2배수 요소(2,4,8,```)(3n) 3배수 요소(3,6,9,```)(odd) 홀수 요소(1,3,5,```)(even) 짝수 요소(2,4,8,```)(3n+2) 3배수+2 번째 요소 (2,5,8,```)(-n+3) 처음부터 3번째까지의 요소(1,2,3)

::-webkit-input-placeholder { /* WebKit, Blink, Edge */color:#909} :-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#909; opacity: 1;} ::-moz-placeholder { /* Mozilla Firefox 19+ */color:#909; opacity: 1;} :-ms-input-placeholder { /* Internet Explorer 10-11 */color:#909;}

버튼 클릭 시에 생기는 기본효과 outline을 없애는 방법. body{outline:none;}

#first{ position: absolute; width: 100%; height: 100%; } #second{ position: relative; top: 50%; transform: translateY(-50%); }

Toggle navigation Bootstrap Example Home About Contact BOOTSTRAP PARALLAX Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit di..

body{height:1000px;}스크롤 고정$('body').on({'mousewheel': function(e) { if($('#element')[0].checked == true){ e.preventDefault(); e.stopPropagation(); }else{ return true; } }})