2018/08 33

javascript - form submit 제한의 여러가지 방법

DOCTYPE html> Insert title here function func1() { //document.frm.id.focus(); // 포커스 설정 //document.frm.id.blur(); // 포커스 해제 document.frm.id.select(); // value값 선택 } function func2() { // 아이디 입력하지 않았으면 '입력하세요' 포커스주기 if (document.frm.id.value == '') { // (document.frm.id.value.length == 0) alert('아이디를 입력하세요'); document.frm.id.focus(); return; } // 4~10자 아이디 글자수 제한 if (frm.id.value.length < 4 || fr..

IT/JavaScript 2018.08.30

css3 - 레이아웃 배치, 자바스크립트 submit 제한걸기, radio, checkbox, select, textarea

DOCTYPE html> 컴퓨터 기술 소개 스마트폰 스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다. 목차 역사 안드로이드폰 아이폰 샘플 역사 최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다 안드로이드 안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS)..

IT/Css 2018.08.29

javascript - 이벤트 기초 및 활용법, preventDefault, stopPropagation, form, radio, checkbox

DOCTYPE html> Insert title here * { margin: 5px; padding: 5px; border: 3px solid black; } function func1 (e) { var a = e.target; // a태그, 이벤트타겟(소스) a.style.backgroundColor = 'blue'; // 하이퍼링크 기능 막기 // return false; e.preventDefault(); // 이벤트 전파막기(버블단계. 자식->부모) e.stopPropagation(); } function func2 (h1) { h1.style.backgroundColor = 'red'; } 네이버 DOCTYPE html> Insert title here function init() { var ..

IT/JavaScript 2018.08.27

javascript - document.getElementById, document.write(), prompt, eval, 조건문, 반복문, 함수

DOCTYPE html> 자바스크립트 코드 위치 function over(obj) { obj.style.backgroundColor="yellow"; var objH3 = document.getElementById('a'); objH3.style.color = 'red'; objH3.style.backgroundColor = 'violet'; } function out(obj) { obj.style.background="white"; var objH3 = document.getElementById('a'); objH3.style.color = 'black'; objH3.style.backgroundColor = 'white'; } 마우스를 올려 보세요 여기에 마우스를 올리면 배경색이 노란색으로 변합니다...

IT/JavaScript 2018.08.26

javascript - 함수정의, 함수호출, 익명함수

DOCTYPE html> Insert title here // 함수정의 function prn() { document.writeln('Hello Javascript!! '); } // prn()의 끝 function mySum(a, b, c) { document.write(a+'+'+b+'+'+c+'='+(a+b+c)+' '); } function myAbs(num) { if (num < 0) { num = -num; } return num; // return numb) { result = a; } else { result = b; } return result; } // 함수호출 prn(); // 출력 "Hello Javascript!!" mySum(10, 20, 30); // 값을 전달 받아서 출력 "..

IT/JavaScript 2018.08.24

css3 - float 배치, 변환(transform rotate), 전환(transition), 리스트로 수직 메뉴 만들기, list float 응용, 애니메이션 응용 keyframes

DOCTYPE html> float 배치 #floatimg { border: 1px solid yellowgreen; margin: 10px; padding: 5px; float: left; /* position: relative; */ /* left: 10px; */ } 스폰지밥 저는 스폰지밥입니다. 먹는 밥이 아니고요 제 이름이 그냥 그래요. 그리고 어린이부터 노인까지 많은 분들의 사랑을 받고 있어요. 제 친구 뚱이도 있고요, 징징이도 있고 집게 사장님도 있어요 DOCTYPE html> 1초에 한바퀴식 무한번 반복 @keyframes turn { 0% { transform : rotate(0deg); } 100% { transform : rotate(360deg); } } #turn { animati..

IT/Css 2018.08.22

css3 - :hover 활용, 이미지 테두리 만들기, text-shadow와 box-shadow

DOCTYPE html>:hover 활용div {width : 100px;height : 140px;background-image : url("../media/back.png");background-size : 100px 140px;}div#img:hover {background-image : url("../media/spade-7.png");}:hover 활용마우스를 올리면 카드의 앞면이 보인다. DOCTYPE html>img {padding : 5px;border : 15px solid grey;border-image : url("../media/checkpattern.png") 30 round;} 이미지 테두리 만들기 DOCTYPE html> text-shadow와 box-shadow h2:acti..

IT/Css 2018.08.21

css3 - 배치, 리스트 꾸미기, 표 꾸미기, 폼 꾸미기

DOCTYPE html> 3개의 div 활용 div { display : inline-block; width : 200px; border : 1px solid green; } 3개의 div 활용 캔버스에 이미지를 그리기 위해서는 이미지를 담을 객체가 먼저 필요하다. Image 객체의 src 프로퍼티를 이용하여 비트맵을 로드한다. 이미지 로딩이 끝나면 그 때 비로소 이미지의 너비와 높이가 제대로 알려진다. DOCTYPE html> 3개의 div 활용 div { display : inline; border : 1px solid green; } 3개의 div 활용 캔버스에 이미지를 그리기 위해서는 이미지를 담을 객체가 먼저 필요하다. Image 객체의 src 프로퍼티를 이용하여 비트맵을 로드한다. 이미지 로딩..

IT/Css 2018.08.20