목차 1. jQuery 이벤트 처리 함수 2. jQuery 폼(form) 태그 기능 3. each() 함수 1. jQuery 이벤트 처리 함수 1) unbind() - 설정되어 있는 이벤트 처리를 취소하는 함수 - 형식: .unbind(“적용될 이벤트”); - ex) $("button").click(function(){ $("a").unbind("click"); // a 태그를 클릭할 때 발생하는 click 이벤트를 취소시키는 역할 }); 2) live() - 앞으로 추가될 태그에도 설정한 이벤트가 적용될 수 있도록 하는 함수 - 형식: .live(‘이벤트명’, 이벤트처리기 함수) - ex) $("button").live(“click”, function(){ $("ul").append("건물"); });..

목차 1. jQuery 기초 2. jQuery로 CSS 속성 값 추가 3. attr() 함수로 속성 변경하기 1. jQuery 기초 1) jQuery 기초 • 자바스크립트에서 getElementById() 함수로 객체의 값을 가져오고, jQuery에서는 간단하게 $() 함수로 원하는 html 요소를 선택한다. - ex) var b1 = document.getElementById("b1"); = $("#b1") • jQuery( ) = $( ) • jQuery의 괄호 안에는 3가지 요소가 올 수 있다. (① HTML Tag / ② CSS Selector / ③ JavaScript Object (내장객체) ) ① HTML Tag ex) $("div") ② CSS Selector ex) $("h1").hide..

목차 1. HTML 파일 유효성 검사 2. 쿠키 생성 3. jQuery 적용 1. HTML 파일 유효성 검사 1) 게시판 양식에 대한 유효성 검사 → ★boardform.html 참고 ① 유효성 검사가 필요한 html 파일 작성(boardform.html) - 유효성 검사가 필요한 항목의 태그에 id와 name 값 설정 - 전송 기능(submit)이 있는 버튼에 대해 유효성 검사를 할 때는 submit 이벤트로 처리한다. - submit 이벤트는 해당 버튼 태그가 아닌 태그 안에서 처리한다. - ex) ② 유효성 검사를 위한 함수 생성(board.js) →★ board.js 참고 - 확장자가 ‘js’인 파일을 만들고 유효성 검사를 위한 함수 생성 ③ 외부 자바스크립트 파일 불러오기 - 자바스크립트 파일을..

목차 1. Window 객체 2. Document 객체 3. Location 객체 4. History 객체 5. Navigator 객체 6. Form 객체 7. Text 객체 8. Submit 객체 9. Checkbox 객체 10. Radio 객체 11. Select 객체 Intro • 브라우저 내장 객체 - 브라우저에 내장된 객체이며 계층적 구조로 이루어져 있다. 1. Window 객체 1) Window 객체 window 객체는 브라우저 내장 객체들의 계층 구조 중에서 가장 상위에 있는 객체로, 우리가 자바스크립트로 하는 모든 작업들이 window 객체 안에서 이뤄지게 된다. • window 객체의 특성, 메소드, 이벤트 핸들러 정리 window 특성 status 브라우저 상태선에 나타날 문자열 def..

목차 1. 내장 객체: Date 객체 2. 배열 3. 내장 객체: String 객체 4. 내장 객체: Math 객체 5. 내장 함수 : 계산기 프로그램 작성 6. 자바스크립트 이벤트 처리 방식 1. 내장 객체: Date 객체 → ★date02.html 참고 1) 브라우저 내장 객체의 종류 • status: 브라우저 상태선에 나타날 문자열 (한글 6장 참고) • setTimeout(): 지정된 시간동안 기다린 후 명령 실행 (한글 6장 참고) • clearTimeout(): setTimeout() 해제 • onload: 브라우저를 실행하면 시작됨 • onMouseOver: 마우스를 위로 올렸을 때 실행됨 • onMouseOut: 마우스를 뗐을 때 실행됨 2) Date 객체를 이용해서 브라우저 상태 표시줄에..

목차 1. 반복문과 보조 제어문 2. 사용자 정의 함수와 내장 함수 3. 내장 객체: Date 객체 1. 반복문과 보조제어문 1) 반복문 ① for문 → ★for01.html ~ for07.html 참고 - 형식: for (초기값; 조건식; 증감식) { 반복 실행할 문장; } ② while문 → ★while01.html ~ while04.html 참고 - 형식: while (조건식) { 반복 실행할 문장; } ③ do while문 → ★dowhile01.html / dowhile02.html 참고 - 실행할 문장이 조건식 앞에 오기 때문에 조건이 거짓이어도 한 번은 실행된다. - 형식: do { 반복 실행할 문장; } while (조건식); 2) 보조 제어문 → ★continue.html 참고 - 보조 ..

목차 1. 아파치 톰캣으로 프로젝트 배포 2. 자바스크립트 기초 1. 아파치 톰캣으로 프로젝트 배포 1) 프로젝트 폴더 배포하기 (Export) ① 해당 프로젝트 오른쪽 마우스 클릭 후 ‘Export’ > ‘WAR file’ 클릭 ② ‘Browse…’ 버튼 클릭해서 저장할 경로 지정하고, 체크박스 모두 선택 후 ‘Finish’ 클릭 2) 아파치 톰캣 서버로 프로젝트 배포하기 ① 이클립스 종료 (아파치 톰캣과 충돌 방지) ② ‘내 컴퓨터' > '관리' > '서비스’에서 아파치 톰캣 시작 상태로 변경 ③ 아파치 톰캣이 저장된 경로로 들어가서 아래 정보 변경 • ‘conf’ 폴더의 ‘server.xml’ 파일에서 포트번호를 8080이 아닌 80 등의 포트로 변경하기 경로 - C:\Program Files\Ap..

1. Bootstrap 예제 - W3Schools (www.w3schools.com)에서 제공하는 CSS Bootstrap 예제들을 활용할 수 있다. - 경로: W3School 메인에서 메뉴바의 ‘References’ > CSS에서 ‘Bootstrap4 Reference’ 클릭 • 버튼 - References > Bootstrap 4 Reference > BS4 Buttons ① Button Styles → ★button01.html 참고 [코드] Basic Primary Secondary Success Info Warning Danger Dark Light Link [결과] ② Button Outline → ★button02.html 참고 [코드] Primary Secondary Success Info..

목차 1. CSS 속성 2. 레이아웃 3. 반응형 웹 1. CSS 속성 1) 박스 속성 2) 배경 이미지 반복과 부착 형태, 위치 ① background-repeat 속성 - 배경 이미지의 반복 형태 지정 • repeat-x : X축 방향으로만 이미지 반복 (ex. background-repeat: repeat-x) • repeat-y : Y축 방향으로만 이미지 반복 (ex. background-repeat: repeat-y) • no-repeat: 이미지 반복 없음 (ex. background-repeat: no-repeat) ② background-attachment 속성 - 배경 이미지를 화면에 고정 2. CSS 레이아웃 1) 수평 정렬 레이아웃 [코드] [결과] 2) 중앙 정렬 레이아웃 - wid..

목차 1. CSS 기초 개념 2. CSS 선택자 1. CSS 기초 1) CSS (Cascading Style Sheet)의 이해 • CSS (Cascading Style Sheets ): HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어 2) 스타일 시트의 기본적인 사용법 3) CSS를 적용하는 3가지 방법 ① 인라인(Inline) 방식 → ★div1.html 참고 - 특정 html 태그 1개에 대해서만 css를 적용하는 방식 - 인라인 방식은 특정 태그에 style="속성:속성값" 형식으로 css를 적용한다. ex) ② 내장형(Embedded) 방식 → ★css01.html / css02.html / css03.html 참고 - HTML 문서에서 태그 내에 2) CSS 선택자 종류 ..