[즐거'웅'코드] 목차 jQuery 예제 소스 구현 예시 jQuery 1 2 3 4 5 $('(대상)').fadeOut((속도), function () { $(this).remove(); }); 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .test_obj { width: 100px; height: 100px; background-color: red; } 천천히 제거하기 function test() { $('.test_obj').fadeOut(500, function () { $(this).remove(); }); } 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 #container { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; } #container #content { border: 2px solid #000000; height: 100px; width: 100px; position: absolute; } let $constrain = 20; let..

[즐거'웅'코드] 목차 리소스 예제 소스 구현 예시 리소스 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 .shape { position:absolute; left: 0; right: 0; margin: 0 auto; top: 0; width: 100%; height: 100vh; overflow: hidden; } .shape [class*="layer"] { position: absolute; } .shape #item_0 { left: 40%; top: 30%; width: 52px; height: 52px; background..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 .test_obj { background: linear-gradient(to right, rgba(0, 0, 0, .3) 3px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.25) 7px, rgba(255, 255, 255, 0.25) 10px, transparent 12px, transparent 16px, rgba(255, 255, 255, 0.25) 20px, transparent 22px), url('/images/test.png'); box-shadow: 0 0 5px -1px rgba(0, 0, 0, 1), inset -1px 1px 2px rgb..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 .test_obj { position: relative; display: inline-block; width: 200px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); } .test_obj:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0px, transparent 5%, transparent ..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 @keyframes typo_animation { 0% { left: 0; width: 0; } 50% { width: 100%; } to { right: 0; width: 0; } } #test { position: relative; display: inline-block; } #test:before, #test:after { content: ""; position: absolute; top: 0; bottom: 0; display: i..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 @keyframes anime_textup { 0% { top: 0; } 20% { top: -0.2rem; } 40% { top: 0 } 60% { top: 0 } 80% { top: 0 } 100% { top: 0 } } .test_obj span { position: relative; animation: anime_textup 1.5s infinite; } .test_obj span:nth-of-type(1) { animation-delay: .1s; } .test_ob..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 @keyframes flash { 0%, 20%, 40%, to { opacity: 1; } 10%, 30% { opacity: 0; } } .test_obj { animation: flash 3s infinite; } 테스트 중입니다. 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 body { margin: 0; padding: 0; } .test_obj { display: inline-block; width: 100%; height: 100%; background: url("images/test.png") no-repeat center center #dbdce8; } 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 html { width: 100%; height: 100%; } body { margin: 0; padding: 0; } .header { position: fixed; top: 0; z-index: 1; width: 100%; background-color: #F1F1F1; } .progress-container { width: 100%; height: 8p..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 #progress-container { width: 100%; background-color: #DDDDDD; } #progress-bar { width: 0; height: 30px; line-height: 30px; background-color: #8C9CEC; text-align: center; } progress var i = 0; function start() { if (i == 0) { i = 1; var elem = d..

[즐거'웅'코드] 목차 jQuery 예제 소스 구현 예시 jQuery 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var last_scrollTop = 0; $(window).scroll(function () { var tmp = $(this).scrollTop(); if (tmp > last_scrollTop) { // scroll down event } else { // scroll up event } last_scrollTop = tmp; }); 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 body { height: 3000px; } p { position: fixed;..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 .flipBox { position: relative; display: inline-block; } .flipBox .outer { width: 300px; height: 200px; } .flipBox .outer .inner { position: relative; width: 100%; height: 100%; text-align: center; transition: trans..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 .flipBox { position: relative; display: inline-block; } .flipBox .outer { width: 300px; height: 200px; } .flipBox .outer .inner { position: relative; width: 100%; height: 100%; text-align: center; transition: trans..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: translateZ(0); } } .test_obj { position: relative; animation: fadeInRight 1s; } 테스트 중입니다. 구현 예시