Dynamic HTML 맛보기

Transcript Dynamic HTML 맛보기

Dynamic HTML 맛보기
컴퓨터공학부
컴퓨터의 개념 및 실습
Dynamic HTML
• DHTML?


정적인 HTML의 한계를 극복하기 위한 방법
Cascading Style Sheet (CSS)
 문서의 layout, 다양한 글꼴 모양 등을 지원
 HTML을 보다 보기 좋게 하기 위한 수단

Java Script (Client-side)
 Browser에 대한 여러 가지 control 지원
 Java language를 기반으로 함

Browser마다 지원하는 정도가 조금씩 다름
DCS Lab., SNU.
2
Cascading Style Sheet (CSS)
• 문서의 layout을 보다 자유롭게 설정 가능
• 글자 모양을 HTML보다 더 다양하게 바꿀 수
있음
• 일정한 style을 정해 놓고 여러 HTML page에
공통적으로 적용 가능
• W3C 권고안

http://www.w3.org/TR/REC-CSS2/
DCS Lab., SNU.
3
CSS 삽입하기
• HTML 문서의 HEAD에 정의
<HEAD>
<STYLE type=“text/css”><!-…
--></STYLE>
• Tag에 style 속성을 사용하여 적용
<H1 style=“font-style:italic”>
• 외부 style sheet 사용 – LINK tag 사용
<LINK rel=“stylesheet” type=“text/css”
href=“style.css”>
DCS Lab., SNU.
4
CSS 정의
• Selector


적용할 HTML tag 정의
Comma를 사용하여 여러 개를 동시에 정의할 수 있음
• Attribute


해당 selector에 적용할 속성
Semicolon을 사용하여 여러 속성을 동시에 정의할 수 있
음
H1 {font-family: Helvetica; font-size: 12pt;
line-height: 14pt}
H1 {font-style: normal}
H2, H3 {font-family: Arial; font-style:
italic}
DCS Lab., SNU.
5
CSS를 사용한 글자 모양
• 글꼴 : font-family
font-family: Arial, “Times New Roman”, 굴림
• 글자 형태 : font-style(normal, italic)
font-style: normal
• 글자 굵기 : font-weight(normal, bold, …)
font-weight: 800
• 글자 크기 : font-size
font-size: 10pt
font-size: xx-large
font-size: smaller
DCS Lab., SNU.
6
CSS를 사용한 문단 모양
• 들여 쓰기 : text-indent
text-indent: 1cm
• 자간 : letter-spacing
letter-spacing: 0.1em
• 단어 간격 : word-spacing
word-spacing: 1in
• 영 대소문자 변환: text-transform(capitalize,
uppercase, lowercase)
text-transform: capitalize
DCS Lab., SNU.
7
Java Script
•
•
•
•
Java language에 기반을 둔 script
Object-oriented
Browser를 제어하기 위한 object를 제공
사용자의 입력(event)에 따른 동적인 처리가
가능
• Netscape Java Script documentation

http://developer.netscape.com/tech/javascript
DCS Lab., SNU.
8
Java Script 삽입하기
• HTML 문서의 HEAD에 정의
<HEAD>
<SCRIPT language=javascript><!-…
--></SCRIPT>
• HTML 문서 BODY에 정의


SCRIPT tag를 사용하여 정의
정의된 이후의 내용에만 적용됨
DCS Lab., SNU.
9
Java Script 함수 정의하기
• Hello, World 함수
Function hello () {
alert(“Hello, World”);
}
…
<BODY onLoad=“javascript:hello()”>
…
DCS Lab., SNU.
10
Java Script 적용 예
<SCRIPT language=javascript><!-function button_change (status) {
if(status == 1)
document.imgbutton.src="smile.gif";
else
document.imgbutton.src="nosmile.gif";
}
--></SCRIPT>
…
<img name=imgbutton
onMouseOver="javascript:button_change(1)"
onMouseOut="javascript:button_change(0)"
src=nosmile.gif>
DCS Lab., SNU.
11

Dynamic HTML 맛보기

Transcript Dynamic HTML 맛보기

Directory