[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 4 5 document.getElementById('test_obj').addEventListener('blur', function () { // 실행할 함수 입력. }); 예제 소스 1 2 3 4 5 6 7 document.getElementById('test_obj').addEventListener('blur', function () { alert("포커스 아웃, 함수 실행."); }); 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 form문 동적 생성 및 submit 처리 function test() { var new_form = $(''); new_form.attr("name", "test_form"); new_form.attr("method", "post"); new_form.attr("action", "/test.php"); new_form.attr("target", "_blank"); new_form.append($('', {type: 'hidden', name: 'data_1', value: 'value_1'})); new_form.append($('', {type: 'h..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 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 form문 동적 생성 및 submit 처리 function test() { var new_form = document.createElement('form'); new_form.name = 'test_form'; new_form.method = 'post'; new_form.action = '/test.php'; new_form.target = '_blank'; var test_obj_1 = document.createElement('input'); test_obj_1.setAttribute("type", "hid..

[즐거'웅'코드] 목차 리소스 예제 소스 리소스 예제 소스 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 #loading { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: block; opacity: 0.5; background: #ffffff; z-index: 100; text-align: center; } #loading img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 101; } $(windo..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 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 #triangle{ stroke-dasharray: 4000; animation: drawing 30s ease-out forwards; } @keyframes drawing { to { stroke-dashoffset: 0; } from { stroke-dashoffset: 4000; } } 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 #triangle{ stroke-dasharray: 4000; animation: drawing 30s ease-out forwards; } @keyframes drawing { to { stroke-dashoffset: 0; } from { stroke-dashoffset: 4000; } } 구현 예시

[즐거'웅'코드] 목차 리소스 예제 소스 구현 예시 리소스 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .arrow_box { position: relative; display: inline-block; width: 100%; height: 45px; } .arrow_box .icon { transition: all .5s ease; position: absolute; left: 0; top: 0; } .arrow_box:hover .icon { left: 100%; transform: translate(-100%, 0); } .arrow_box .icon .arrow { display: inline-block; width: 45px; height..

[즐거'웅'코드] 목차 CSS CSS 1 2 3 4 5 input:focus { outline: none; }

[즐거'웅'코드] 목차 CSS CSS 1 2 3 4 5 button:focus { outline: none; }

[즐거'웅'코드] 목차 CSS CSS 1 2 3 4 5 textarea:focus { outline: none; }

[즐거'웅'코드] 목차 CSS CSS 1 2 3 4 5 .test_obj { -webkit-tap-highlight-color : transparent !important; }

[즐거'웅'코드] 목차 CSS CSS 1 2 3 4 5 .test_obj { pointer-events: none; }

[즐거'웅'코드] 목차 CSS 예제 소스 구현 예시 CSS 1 2 3 4 5 6 7 8 9 .test_obj { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Chrome, Edge, Opera and Firefox */ } 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 드래그 가능. 드래그 금지. .test_obj { -webkit-touch-callout: ..

[즐거'웅'코드] 목차 CSS 예제 소스 구현 예시 CSS 1 2 3 4 5 p:nth-child(even) { /* style 적용(짝수) */ } 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 1번 라인 2번 라인 3번 라인 4번 라인 5번 라인 p:nth-child(even) { color: red; } 구현 예시

[즐거'웅'코드] 목차 CSS 예제 소스 구현 예시 CSS 1 2 3 4 5 p:nth-child(odd) { /* style 적용(홀수) */ } 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 1번 라인 2번 라인 3번 라인 4번 라인 5번 라인 p:nth-child(odd) { color: red; } 구현 예시