Contents
Class #12: HTML, DHTML and CSS
in place May 22, 2002, lasted modified May 22, 2002, working...
HTML (Hyper Text Markup Language)
HTML 소개
- 태그(<>)와 내용으로 이루어진 일종의 소스 코드
- 서버에 저장되어 있다가 Web Browser의 요청에 따라 인터넷을 통해 전달
- 전달된 HTML은 Web Browser의 해석에 의하여 Brwoser 화면에 출력
- 출판과 관련하여 오랜 역사를 지닌 SGML 에서 기원
- 매우 간단하며 사용하기 쉽기 때문에 광범위하게 사용
- 정적인 면과 내용의 보안성으로 현재 대안이 제안되고 있음(DHTML, XML)
- HTML은 http://wwww.w3.org/MarkUp 참조
HTML 소개
- <HTML > </HTML > - HTML 문서의 시작과 끝을 알림
- <HEAD > </HEAD > - HTML 문서의 Header - 본문에 나타나지 않는 정보 포함, 검색엔진등에서 참조
- <TITLE > </TITLE > - Header에 포함된 Title - 본문에 나타나지 않지만 WebBrowser의 Title부분에 나타남.
- <META > </META > - Header에 포함된 문서의 Meta Data - Attribute로는 NAME, CONTENT가 있음. 검색엔진에서 참조. NAME에는 Author, Keywords, Description 등이 있음
- <BODY > </BODY> - HTML 문서의 본문을 나타냄 Bgcolor 등의 Attribute가 있음, Backgroud image, Sound 등이 가능
- <BOLOCKQUOTE > </BOLOCKQUOTE> - 문서안의 인용문 표시, Indentation 이 됨
- <P > </P> - 문단 표시, 문단 앞뒤에 한줄바꾸기 및 한줄 뜀이 됨, Align attribute를 가짐
- <B > </B> - 볼드체 표시, <I > </I> 이텔릭체 표시
- <BR > - 한줄 바뀌기
- <FONT > </FONT> - 글자 크기 및 색 지정 SIZE, COLOR Attribute
- <HR > - 가로선 넣기 Width Attribute 가 잆음, Width는 % 및 Pixel 로 가능
- <DIR > </DIR> - 디렉토리형 목록 사용, <LI > 와 함께 사용
- <UL > </UL> - 순서없는 목록, <LI > 와 함께 사용
- <OL > </OL> - 순서 있는 목록 사용, <LI > 와 함께 사용
- <TABLE > </TABLE> - Table 생성시 사용 WIdth, Cellpadding, Cellspacing Attribute 존재
- <TR > </TR> - 새로운 Row 생성 - TABLE Tag 안에 사용
- <TD > </TD> - 새로운 Colume 생성 - TABLE Tag 안에 사용, COLSPAN, ROWSPAN Attribute 존재
- <IMG >- 이메지 파일(JPG, GIF)를 포함시킬때 사용 Attribute로는
- <A > </A> -다른 HTML 문서를 Link (Anchor) 할때 사용 Attribute로는 HREF 가 있음, HREF의 내용으로는 URL을 사용하여 연결하고자 하는 Resource를 지정
** 전제 HTML 의 Tag는 http://www.neocyber.co.kr/html/zzhtml.htm 참조
- <A > </A> -다른 HTML 문서를 Link (Anchor) 할때 사용 Attribute로는 HREF 가 있음, HREF의 내용으로는 URL을 사용하여 연결하고자 하는 Resource를 지정
CSS 와 DHTML (Dynamic HTML)
CSS 소개
- Web의 확산에 의하여 HTML 문서가 광범위하게 사용
- HTML 자체가 문서로써 출력되고, 화면 사용자 환경으로 사용
- HTML 의 Formatting이 정교하지 못함
- 기존의 HTML 표준을 확장하여 보다 정교한 Formatting 도구 필요
- CSS(Cascade Style Sheet) 등장
- HTML 에 추가되어 CSS Script를 추가
CSS 사용 형식
- HTML 의 Header 부분에 CSS 형식을 정의
<HTML>
<HEAD>
<META>
<TITLE>Class #12</TITLE>
</META>
<style type="text/css">
<!--
td {font-size:9pt; font-family:"Arial";background-color:white}
A {text-decoration: none}
A:hover {color:black;text-decoration: underline; }
body {font-size:9pt; font-family:"Arial"}
.TH {background-color:silver}
.OR {background-color:orange}
-->
</style>
</HEAD> - Comment를 사용하여 지원하지 못하는 Browser에 나타나지 않도록 함.
- 두가지 방법으로 CSS 형식 정의
td {font-size:9pt; font-family:"Arial";background-color:white}
.TH {background-color:silver} - 기존의 HTML Tag 확장 - td {font-size:9pt; font-family:"Arial";background-color:white}
- 새로운 형식 정의 .TH {background-color:silver}
- 기존의 HTML Tag 확장은 해당 HTML Tag를 사용시 정의한 형식으로 처리
- 새로운 형식은 CLASS= 형식이름 형태로 사용
Font Size=9 <TD class=TH> <TD class=OR> - 보다 상세한 Operation에 대한 형식을 제공 - A:hover {color:black;text-decoration: underline; }
- Anchor위에 마우스가 위치했을 때 형식을 정의 - 밑줄을 표시함
** 이 외에도 글자간격, 단어 간격, 문단줄간격등 많은 형식 정의 요소가 있음.
Layer 소개
- Browser 화면의 가상의 여러장의 화면에 그림을 그린후 이의 겹치는 순서를 바꾸어 동적으로 화면 구성
- layer 의 정의는 CSS 형식정의에 동일하게 정의
<HTML>
<HEAD>
<META>
<TITLE>Class #12</TITLE>
</META>
<style type="text/css">
<!--
td {font-size:9pt; font-family:"Arial";background-color:white}
A {text-decoration: none}
A:hover {color:black;text-decoration: underline; }
body {font-size:9pt; font-family:"Arial"}
.TH {background-color:silver}
.OR {background-color:orange}
.f1 {background-color:black; color:white}
.f2 {background-color:red; color:white}
.f3 {background-color:green; color:white; width:300px;height:300px}
.f4 {background-color:orange; color:white; width:50px;height:30px;top:1100px;left:1100px}
.f5 {position:absolute;background-color:red; color:white; width:30px;height:30px;top:1280px;left:100px; z-index:1}
.f6 {position:absolute;background-color:blue; color:white; width:30px;height:30px;top:1300px;left:110px; z-index:2 }
-->
</style>
</HEAD> - HTML 의 DIV를 이용하여 표현
<DIV class=f1>
- 혹은 SPAN을 사용
<SPAN class=f2>
- 넓이와 크기를 정의
<SPAN class=f3> 300x300 - 위치를 정의 - 위쪽을 보세요!
<SPAN class=f4> 50x30 top 1100, left 100 - Z 방향으로 위치조정- 위를 보세요!
<SPAN class=f5> z=1
<SPAN class=f6> z=2 - 보이게 하거나 보이지 않게 함 - visivility, display
- Layer 의 응용 -레이어 움직이기
월드컵 16강!!!
Knowledge & Engineering Databases (c) copyright Namchul Do, 2002