분류 전체보기 (65) 썸네일형 리스트형 07. Javascript_데이터 타입 DOCTYPE html> ::: 07_javascript ::: function goClick(idx){ var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("p1").innerHTML = cars[idx]; } 자바스크립트 데이터 타입 클릭 06. Javascript_누적함수 만들기 DOCTYPE html> ::: 06_javascript ::: var x = 0; var sum = 0 function goMath(){ x = x + 1; sum = sum + x; document.getElementById("p1").innerHTML = sum; } 버튼을 클릭할 때 마다, 누적시키는 프로그램 작성 누적함수 05. Javascript_버튼 클릭 시 1씩 증가되는 문서 만들기 DOCTYPE html> ::: 05_javascript ::: // 1씩 증가되는 함수 만들기 var num = 0; function goAddOne(){ num = num + 1; msg = "현재 count : "; document.getElementById("p1").innerHTML = num; } 버튼을 클릭하면 1씩 증가되는 문서 만들기 1씩 증가시키기 04. Javascript_변수 처리하기 DOCTYPE html> ::: 04_javascript ::: function goMath() { x = 10; y = 20; sum = x * y; document.getElementById("p1").innerHTML = sum } 자바스크립트 변수 처리하기 // 변수 선언 및 정의하기. var x = 10; var y = 20; var sum = x + y; // p태그의 아이디가 p1인 곳에 위의 sum값 출력하기 클릭하기 03. Javascript_텍스트 작성하기 DOCTYPE html> ::: 03_javascript ::: 자바스크립트로 텍스트 작성하기 document.write("내용을 작성합니다."); document.write(" 줄바꿈 되나?"); document.write(" "); document.write(10 + 20); document.write(" "); document.write(""); 클릭!! 여기에 innerHTML 내용 넣기 document.getElementById("p1").innerHTML = 10 * 10; 02. Javascript_외부 js파일 호출, 함수 호출 DOCTYPE html> ::: 02_JavaScript ::: 01_JavaScript 이곳에 자바스크립트 함수를 이용해서 내용 입력1 이곳에 자바스크립트 함수를 이용해서 내용 입력2 p1 입력 p2 입력 01. Javascript_함수호출, button, onclick DOCTYPE html> ::: 01_JavaScript ::: // 메세지 출력 함수 function goMessage(mode){ // alert("함수 호출 잘 되나?"); // id가 p1인 태그 찾기... // 문서 중에 요소가 id인 값이 p1인 것을 찾기 //document.getElementById("p1").innerHTML = "임의의 값 넣기!"; //document.getElementById(mode).innerHTML = "임의의 값 넣기!"; document.getElementById(mode).innerHTML = "임의의 값 넣기!" + mode; } 01_JavaScript 이곳에 자바스크립트 함수를 이용해서 내용 입력1 이곳에 자바스크립트 함수를 이용해서 내용 입력2 p1.. 04. CSS_수직 네비게이션(2) DOCTYPE html> ::: 04_CSS기초_수직_네비게이션(2) ::: /* ul 스타일 */ ul { list-style-type: none; background-color: #f1f1f1; padding: 0; margin: 0; width: 200px; } /* 선 그리기 */ li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; } /* li a 스타일 */ li a { color: #000; padding: 5px; /* a 태그의 언더라인 없애기 */ text-decoration: none; display: block; } /* home이 있는 a태그의 스타일만 변경하기 *.. 이전 1 2 3 4 5 6 7 8 9 다음
