css & javascript

17
CSS & Javascript Author : [email protected] 1

Upload: danton

Post on 07-Jan-2016

69 views

Category:

Documents


5 download

DESCRIPTION

CSS & Javascript. Author : [email protected]. 목 차. CSS 준비 하기 적용 하기 예제 스샷 Javascript 준비 하기 적용 하기 예제 스샷. CSS (Cascading Style Sheet). CSS 를 쓰면 웹 페이지가 샤방 샤방 >_< 해질 수 있어요 !!. CSS – 준비 하기. Embeded 방식 인라인 방식 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: CSS & Javascript

CSS & JavascriptAuthor : [email protected]

1

Page 2: CSS & Javascript

목 차

CSS 1. 준비 하기2. 적용 하기3. 예제 스샷

Javascript 1. 준비 하기2. 적용 하기3. 예제 스샷

2

Page 3: CSS & Javascript

CSS (Cascading Style Sheet)

CSS 를 쓰면 웹 페이지가

샤방 샤방 >_<

해질 수 있어요 !!

3

Page 4: CSS & Javascript

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">

4

Page 5: CSS & Javascript

CSS – 준비 하기

I. 클래스로 사용.[ 클래스 이름 ] {

color:#FFFFFFl; font-size:9pt; }

II. 태그로 정의[ 태그 ] {

color:#FFFFFFl; font-size:9pt; }

[ 태그 ] [ 태그 ]{ color:#FFFFFFl; font-size:9pt;

}

5

Page 6: CSS & Javascript

CSS – 적용 하기

교재 388-389 교재 390 교재 394 교재 395 교재 398

6

Page 7: CSS & Javascript

CSS – 예제 스샷

7

Page 8: CSS & Javascript

CSS – 예제 스샷

주의 할 점 ?! css 적용 시 우선 순위가 애매 ?!

우선 순위 class 방법 < 태그 방법태그 속 스타일 방법은 우선순위에서 독립적 !!

8

Page 9: CSS & Javascript

Javascript

Javascript 는요 ??

텀프로젝트 해야하잖아요 ;;

9

Page 10: CSS & Javascript

Javascript – 준비 하기

Embeded 방식<javascript languague=“javascript”></javascript>

*.JS 파일을 불러오기<javascript languague=“javascript”src=“0-0.js”></javascript>

10

Page 11: CSS & Javascript

Javascript – 준비 하기

웹 페이지의 구성Ex.html

<form name=“test_form”>

<input name=“text”>

11

document

test_form

text

document.test_form.text.value

Page 12: CSS & Javascript

Javascript – 적용 하기

테스트에 쓰일만한 것은 ?

1) 날짜 입력

2) 환영 메시지 띄우기

3) 폼 데이터 입력 값 확인

4) 텍스트 값 바꾸기 ( 힌트 보기 )

5) 다른 창 띄우기 , 윈도우 닫기

12

Page 13: CSS & Javascript

Javascript – 예제 스샷

13

Page 14: CSS & Javascript

Javascript – 예제 스샷

14

Page 15: CSS & Javascript

Javascript – 예제 스샷

15

Page 16: CSS & Javascript

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}

16

Page 17: CSS & Javascript

Javascript – 예제 스샷

폼 체크 onsubmit 실행 시 함수 호출

onsubmit=“if(form_check() == 1) return false”

17

form_checkreturn 1; 에러 발생 ( 폼 값이 없다고 가정 할 때 )

return 0; 모든 값이 있다 .