인라인 방식">
Css javascript
This presentation is the property of its rightful owner.
Sponsored Links
1 / 17

CSS & Javascript PowerPoint PPT Presentation


  • 63 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

CSS & Javascript

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Css javascript

CSS & Javascript

Author : [email protected]


Css javascript

목차

  • CSS

    • 준비 하기

    • 적용 하기

    • 예제 스샷

  • Javascript

    • 준비 하기

    • 적용 하기

    • 예제 스샷


Css cascading style sheet

CSS (Cascading Style Sheet)

  • CSS를 쓰면 웹 페이지가

    샤방 샤방 >_<

    해질 수 있어요!!


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


Css javascript

CSS – 준비 하기

  • 클래스로 사용

    .[클래스 이름] {

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

    }

  • 태그로 정의

    [태그]{

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

    }

    [태그][태그]{

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

    }


Css javascript

CSS – 적용 하기

  • 교재 388-389

  • 교재 390

  • 교재 394

  • 교재 395

  • 교재 398


Css javascript

CSS – 예제 스샷


Css javascript

CSS – 예제 스샷

  • 주의 할 점?!

    • css 적용 시 우선 순위가 애매?!

    • 우선 순위

      • class 방법 < 태그 방법

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


Javascript

Javascript

  • Javascript 는요??

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


Javascript1

Javascript – 준비 하기

  • Embeded 방식

    <javascript languague=“javascript”></javascript>

  • *.JS 파일을 불러오기

    <javascript languague=“javascript”src=“0-0.js”></javascript>


Javascript2

Javascript – 준비 하기

  • 웹 페이지의 구성

document.test_form.text.value

Ex.html

document

<form name=“test_form”>

<input name=“text”>

test_form

text


Javascript3

Javascript – 적용 하기

  • 테스트에 쓰일만한 것은?

    • 날짜 입력

    • 환영 메시지 띄우기

    • 폼 데이터 입력 값 확인

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

    • 다른 창 띄우기, 윈도우 닫기


Javascript4

Javascript – 예제 스샷


Javascript5

Javascript – 예제 스샷


Javascript6

Javascript – 예제 스샷


Javascript7

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

      }


Javascript8

Javascript – 예제 스샷

  • 폼 체크

    • onsubmit 실행 시 함수 호출

    • onsubmit

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

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

return 0;  모든 값이 있다.

form_check


  • Login