[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 document.getElementById('(아이디명)').style.margin = (값); 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 margin 변경하기 div { width: 200px; height: 50px; border: 1px solid #bbbbbb; background-color: #fbfbfb; } function test() { var margin_value = document.getElementById('margin_value').value; document.getElementById('test_obj').style.margin..

[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 document.getElementById('(아이디명)').style.marginRight = (값); 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 margin-right 변경하기 div { width: 200px; height: 50px; border: 1px solid #bbbbbb; background-color: #fbfbfb; } function test() { var margin_value = document.getElementById('margin_value').value; document.getElementById('test_obj').s..

[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 document.getElementById('(아이디명)').style.marginLeft = (값); 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 margin-left 변경하기 div { width: 200px; height: 50px; border: 1px solid #bbbbbb; background-color: #fbfbfb; } function test() { var margin_value = document.getElementById('margin_value').value; document.getElementById('test_obj').sty..

[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 document.getElementById('(아이디명)').style.marginBottom = (값); 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 margin-bottom 변경하기 div { width: 200px; height: 50px; border: 1px solid #bbbbbb; background-color: #fbfbfb; } function test() { var margin_value = document.getElementById('margin_value').value; document.getElementById('test_obj')..

[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 document.getElementById('(아이디명)').style.marginTop = (값); 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 margin-top 변경하기 div { width: 200px; height: 50px; border: 1px solid #bbbbbb; background-color: #fbfbfb; } function test() { var margin_value = document.getElementById('margin_value').value; document.getElementById('test_obj').style..

[즐거'웅'코드] 목차 jQuery 예제 소스 구현 예시 jQuery 1 2 3 $('(대상)').val(""); 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 사과 딸기 바나나 SELECT 선택 해제(초기화) function test() { $('#fruit').val(""); } 구현 예시

[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 document.getElementById("(아이디명)").value = ''; 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 사과 딸기 바나나 SELECT 선택 해제(초기화) function test() { document.getElementById("fruit").value = ''; } 구현 예시

[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 history.back(); 예제 소스 1 2 3 4 5 6 7 페이지 뒤로 가기 function test() { history.back(); } 구현 예시

[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 4 5 6 7 // 선택 1. 페이지 이동 순서를 기억하여 '뒤로 가기' 동작 시 역순으로 되돌아가게 함. location.href = "http://www.naver.com"; // 선택 2. 페이지 경로 자체를 바꿔 '뒤로 가기' 동작 시 직전의 페이지로 되돌아가게 함. location.replace("http://www.naver.com"); 예제 소스 1 2 3 4 5 6 7 8 9 10 11 페이지 이동 function test() { // 선택 1. 페이지 이동 순서를 기억하여 '뒤로 가기' 동작 시 역순으로 되돌아가게 함. location.href = "http://www.naver.com"; //..

[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 4 5 6 7 8 function test() { var tmp = document.getElementById("(아이디명)").value; tmp--; document.getElementById("(아이디명)").value = tmp; } 예제 소스 1 2 3 4 5 6 7 8 9 10 11 카운트 다운 function test() { var tmp = document.getElementById("test_obj").value; tmp--; document.getElementById("test_obj").value = tmp; } 구현 예시

[즐거'웅'코드] 목차 JAVASCRIPT 예제 소스 구현 예시 JAVASCRIPT 1 2 3 4 5 6 7 8 function test() { var tmp = document.getElementById("(아이디명)").value; tmp++; document.getElementById("(아이디명)").value = tmp; } 예제 소스 1 2 3 4 5 6 7 8 9 10 11 카운트 업 function test() { var tmp = document.getElementById("test_obj").value; tmp++; document.getElementById("test_obj").value = tmp; } 구현 예시

[즐거'웅'코드] 목차 jQuery 예제 소스 구현 예시 jQuery 1 2 3 4 5 6 $('textarea').on('keyup', function (e) { $(this).css('height', 'auto'); $(this).height(this.scrollHeight - 15); }); 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 textarea { resize: none; overflow-y: hidden; height: auto; padding: 10px; } $('textarea').on('keyup', function (e) { $(this).css('height', 'auto'); $(this).height(this.scrollHei..

[즐거'웅'코드] 목차 CSS 예제 소스 구현 예시 CSS 1 2 3 4 5 .test_obj { resize: none; } 예제 소스 1 2 3 4 5 6 7 .test_obj { resize: none; } 구현 예시

[즐거'웅'코드] 목차 CSS 예제 소스 구현 예시 CSS 1 2 3 4 5 .test_obj:hover { transform: translateX(50px); } 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .test_obj { display: block; width: 200px; height: 200px; transition: all 0.3s ease-out; background-color: #414144; } .test_obj:hover { transform: translateX(50px); } 구현 예시

[즐거'웅'코드] 목차 CSS 예제 소스 구현 예시 CSS 1 2 3 4 5 .test_obj:hover { transform: translateX(-50px); } 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .test_obj { display: block; width: 200px; height: 200px; transition: all 0.3s ease-out; background-color: #414144; } .test_obj:hover { transform: translateX(-50px); } 구현 예시