CSS & Javascript

1. CSS & Javascript Author : arkii@naver.com

2. 목차 • CSS • 준비 하기 • 적용 하기 • 예제 스샷 • Javascript • 준비 하기 • 적용 하기 • 예제 스샷

3. CSS (Cascading Style Sheet) • CSS를 쓰면 웹 페이지가 샤방 샤방 >_< 해질 수 있어요!!

4. CSS – 준비 하기 • Embeded 방식 <style type="text/css"></style> • 인라인 방식 <font style="font-size:20pt; color:red; font-family:돋움체;"> Test</font> • *.CSS 파일을 불러오기 <link rel=“stylesheet” href=“./lib/test.css" type="text/css">

5. CSS – 준비 하기 • 클래스로 사용 .[클래스 이름] { color:#FFFFFFl; font-size:9pt; } • 태그로 정의 [태그]{ color:#FFFFFFl; font-size:9pt; } [태그][태그]{ color:#FFFFFFl; font-size:9pt; }

6. CSS – 적용 하기 • 교재 388-389 • 교재 390 • 교재 394 • 교재 395 • 교재 398

7. CSS – 예제 스샷

8. CSS – 예제 스샷 • 주의 할 점?! • css 적용 시 우선 순위가 애매?! • 우선 순위 • class 방법 < 태그 방법 • 태그 속 스타일 방법은 우선순위에서 독립적!!

9. Javascript • Javascript 는요?? 텀프로젝트 해야하잖아요;;

10. Javascript – 준비 하기 • Embeded 방식 <javascript languague=“javascript”></javascript> • *.JS 파일을 불러오기 <javascript languague=“javascript”src=“0-0.js”></javascript>

11. Javascript – 준비 하기 • 웹 페이지의 구성 document.test_form.text.value Ex.html document <form name=“test_form”> <input name=“text”> test_form text

12. Javascript – 적용 하기 • 테스트에 쓰일만한 것은? • 날짜 입력 • 환영 메시지 띄우기 • 폼 데이터 입력 값 확인 • 텍스트 값 바꾸기(힌트 보기) • 다른 창 띄우기, 윈도우 닫기

13. Javascript – 예제 스샷

14. Javascript – 예제 스샷

15. Javascript – 예제 스샷

16. Javascript – 예제 스샷 • <form onsubmit=“”> • text 입력 확인 • document.test_form.name.value • checkbox 와 radio button 입력 확인 • for문 사용해서 입력 확인 for(int i=0; i<5; i++) { document.element[i].checked == true | false }

17. Javascript – 예제 스샷 • 폼 체크 • onsubmit 실행 시 함수 호출 • onsubmit • =“if(form_check() == 1) return false” return 1;  에러 발생 (폼 값이 없다고 가정 할 때) return 0;  모든 값이 있다. form_check