11. JavaScript Event
Event Description
onClick 클릭 하였을 때
Onfocus 입력양식 필드를 선택 하였을 때
Onmouseover 마우스를 해당 객체에 올려 놨을 때
Onload 문서가 모두 로딩 되었을 때
onsubmit 폼을 전송할 때
Onkeydown 키를 입력하였을 때
Onblur 포커스가 다른 곳으로 이동 했을 때
19. JavaScript 실습 - 2
• input 태그를 사용해 사용자로부터
정수 값(num)을 입력받아
2단~num단까지의 구구단을 출력
• 3의 배수단은 출력하지 않음
• js, html 분리
20. Bootstrap ?
• Twitter에서 만든 HTML5, CSS3, JS 기반의 웹 디자인 프레임워크
• 크로스 브라우징 지원 (2.x IE 7이상, 3.x IE 8 이상)
• 멀티 디바이스 해상도 최적화 : 반응형
→ 추가 모바일 페이지 제작 없이 모바일 환경 지원 가능
25. Bootstrap Grid Class - 1
• 가로 분할(한 줄) : row
• 세로 분할(한 칸)
• col-xs- : 매우 작은 화면 ( < 768px / 모바일)
• col-sm- : 그냥 작은 화면 ( >= 768px / 태블릿)
• col-md- : 일반적인 화면 ( >= 992px / 데스크탑)
• col-lg- : 큰 화면 ( >= 1200px / 데스크탑)
• co l
26. Bootstrap Grid Class - 2
• col 클래스와 혼합, 혹은 독립적으로 사용하여 특정 해상도에서 내용을
숨길 수 있다.
• co l
27. Bootstrap Table Class
• 기본 클래스(table tag) : table
• 선있는 테이블 : table-bordered
• 행 hover 효과 : table-hover
• 행 색상 효과(tr tag) : active, success, warning, danger
• 작은 기기에서 스크롤 주기(div) : table class 상위에 table-responsive
• co l
28. Bootstrap Form Class
• 기본 상위 클래스(div tag) : form-group
• 기본 클래스(input tag) : form-control
• 폼 클래스는 종류와 적용법이 복잡함 : http://bootstrapk.com/BS3/css#forms
29. Bootstrap Button Class
• 기본 클래스(input, button tag) : btn, btn-default
• 색상 강조 : btn-primary, btn-success, btn-danger 등
• 버튼 크기 : btn-lg, btn-sm, btn-xs
• width 100% : btn-block
30. Bootstrap Image Class
• 기본 반응형 클래스(img tag) : img-responsive
• 모양 효과 : img-rounded, img-circle, img-thumbnail
31. Bootstrap Alert Class
• 기본 클래스(div) : alert
• 색상 효과(div) : alert-info, alert-success, alert-warning, alert-danger
34. 과제
• 앞의 실습 문제
• 사칙연산 기능을 가지는 사용자 정의 함수를 만들어 계산기
자바스크립트 작성
35. 과제
• 저번 과제의 회원가입 페이지를 Bootstrap을 사용하여 꾸미기
• 약관, 약관동의 유/무(radio), 아이디, 비밀번호, 비밀번호 확인, 최소 1개의 select
태그, 최소 1개의 textarea 태그가 포함되어야함
• 데스크탑, 모바일 해상도 모두 지원해야됨
• ex) http://uyu423.iptime.org:8080/book/register.jsp
• 그렇다고 위에꺼 똑같이 베끼면 죽는다.
36. 과제
• 다음과 같은 화면구성을 가지는 페이지를 Bootstrap을 활용해 작성
• 좌)데스크탑 화면 우)모바일 화면
• 사진 첨부의 미리보기 기능은 구현 하지 않아도 됨.