HTML 5+ 자바스크립트 발표자 : 20091903 김동한 5주차.

Presentation on theme: "HTML 5+ 자바스크립트 발표자 : 20091903 김동한 5주차."— Presentation transcript:

1 HTML 5+ 자바스크립트 발표자 : 김동한 5주차

2 CSS의 문법(배경/리스트)(1/2) 배경 이미지 지정하기 웹 페이지나 테이블의 셀에 배경 이미지를 넣을 수 있습니다.
① background-image프로퍼티 : 배경이미지를 지정합니다. http로 시작하는 절대 URL이나 CSS의 상대 URL로 지정 이미지가 없을때는 none을 지정 ② background-repeat프로퍼티 : 반복할 방향을 지정합니다. no-repeat : 박복 없음, repeat : 가로 세로의 박복, repeat-X/Y 가로/세로로 반복 ③ background-attachment프로퍼티 : 이미지를 고정할 것인지 지정함. scroll : 문서와 함께 스크롤, fixed : 웹 브라우저 화면에 고정 ④ background-position프로퍼티 : 이미지의 표시 위치를 지정합니다. left, right, center, top, bottom 등 ① ② ③ ④

3 CSS의 문법(배경/리스트)(2/2) 리스트 설정 항목 쓰기(리스트)의 마크를 설정하는 프로퍼티
① list-style-type프로퍼티 : 항목 쓰기의 마크를 지정합니다. 동그라미, 사각형, 숫자, 로마 숫자, 알파벳, 아르메니아 숫자, 그루지아 숫자 등 ② list-style-image프로퍼티 : 항목 쓰기의 마크의 이미지를 지정합니다. http로 시작하는 절대 URL 이나 CSS의 상대 URL로 지정 ③ list-style-position프로퍼티 : 항목 쓰기 마크의 위치를 지정합니다. ① ②

4 CSS의 문법(표시/배치) 표시와 배치 ① ② ① position 프로퍼티 : 배치 방법을 지정합니다. ③
static, relative, absolute, fixed ② top, bottom, left, right 프로퍼티 : 요소의 위치를 지정합니다, auto 또는 %, px로 지정 ③ z-line 프로퍼티 : auto 또는 정수 값을 지정합니다. ④ visibility 프로퍼티 : 표시/감춤을 지정합니다. visibility, hidden, collapse ⑤ display 프로퍼티 : 표시 형식을 지정합니다. inline 인라인 요소 Block 블록 요소 Inline-block 인라인 요소처럼 배치되는 블록 요소 List-item 리스트 요소 none 표시 안 함. ① ② ③ ④ ⑤

5 JavaScript(1/2) JavaScript 스립립트 언어
Javascript란, HTML 파일에 심어 넣을 수 있는 스크립트 언어를 말합니다. 웹 서버와 통신을 하지 않아도 사용자 조작 등으로 글자색이나 배경색을 변경 하거나 웹 페이지를 전환할 수 있습니다. 색을 바꾼다, 일정 시간 후에 페이지를 전환한다, 메시지 상자를 표시한다, 드롭다운 메뉴를 만든다. 스립립트 언어 Javascript 코드(스크립트)가 들어간 HTML 파일을 웹 브라우저에서 읽어 들이면 javascript가 해석되어 그대로 실행됩니다.

6 JavaScript(2/2) JavaScript의 예
<script> ~ </script>가 javaScript 부분입니다. Function 함수(메소드) /* */ 안의 내용과 // 이후는 주석 문장의 마지막에는 ;(세미콜론)을 붙힌다. Document.write()는 HTML에 값을 출력하는 기능을 가진 함수입니다.

7 JavaScript를 작성하는 장소 Javascript를 작성하는 장소 Body 요소 직접 작성하는 방법 문자열을 나타낼 때는
Header 요소 안에 작성하여 호출하는 방법 문자열을 나타낼 때는 “”로 둘러쌉니다.

8 6주차 : DOM Thank you