Upload
danton
View
71
Download
5
Embed Size (px)
DESCRIPTION
CSS & Javascript. Author : [email protected]. 목 차. CSS 준비 하기 적용 하기 예제 스샷 Javascript 준비 하기 적용 하기 예제 스샷. CSS (Cascading Style Sheet). CSS 를 쓰면 웹 페이지가 샤방 샤방 >_< 해질 수 있어요 !!. CSS – 준비 하기. Embeded 방식 인라인 방식 - PowerPoint PPT Presentation
Citation preview
CSS & JavascriptAuthor : [email protected]
1
목 차
CSS 1. 준비 하기2. 적용 하기3. 예제 스샷
Javascript 1. 준비 하기2. 적용 하기3. 예제 스샷
2
CSS (Cascading Style Sheet)
CSS 를 쓰면 웹 페이지가
샤방 샤방 >_<
해질 수 있어요 !!
3
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
CSS – 준비 하기
I. 클래스로 사용.[ 클래스 이름 ] {
color:#FFFFFFl; font-size:9pt; }
II. 태그로 정의[ 태그 ] {
color:#FFFFFFl; font-size:9pt; }
[ 태그 ] [ 태그 ]{ color:#FFFFFFl; font-size:9pt;
}
5
CSS – 적용 하기
교재 388-389 교재 390 교재 394 교재 395 교재 398
6
CSS – 예제 스샷
7
CSS – 예제 스샷
주의 할 점 ?! css 적용 시 우선 순위가 애매 ?!
우선 순위 class 방법 < 태그 방법태그 속 스타일 방법은 우선순위에서 독립적 !!
8
Javascript
Javascript 는요 ??
텀프로젝트 해야하잖아요 ;;
9
Javascript – 준비 하기
Embeded 방식<javascript languague=“javascript”></javascript>
*.JS 파일을 불러오기<javascript languague=“javascript”src=“0-0.js”></javascript>
10
Javascript – 준비 하기
웹 페이지의 구성Ex.html
<form name=“test_form”>
<input name=“text”>
11
document
test_form
text
document.test_form.text.value
Javascript – 적용 하기
테스트에 쓰일만한 것은 ?
1) 날짜 입력
2) 환영 메시지 띄우기
3) 폼 데이터 입력 값 확인
4) 텍스트 값 바꾸기 ( 힌트 보기 )
5) 다른 창 띄우기 , 윈도우 닫기
12
Javascript – 예제 스샷
13
Javascript – 예제 스샷
14
Javascript – 예제 스샷
15
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
Javascript – 예제 스샷
폼 체크 onsubmit 실행 시 함수 호출
onsubmit=“if(form_check() == 1) return false”
17
form_checkreturn 1; 에러 발생 ( 폼 값이 없다고 가정 할 때 )
return 0; 모든 값이 있다 .