html css dhtml jscript

******************************<html>***********************************

doctype = html문서의 타입선언

<html> 브라우저에 html문서라고 알리는 테그</html>

<head> 문서에 대한정보를 포함하는 태그</head>

<title>윈도우타이틀바에 명시되고 북마크 제목으로사용</title>

매초마다 읽어오기및 라이다이렉트시킬수있다.

<body>속성 frameset 태그는 body 태그를 대체

bgcolor=””	배경색지정
text=””	보여질문자색지정
link=””	링크색지정
vlink=””	페이지색지정
alink=””	링크를클릭했을때의색을지정
background=””	웹문서배경지정

<basefont size=”4”>기본글꼴크기를 지정하는태그</basefont>

<i>문자를 italic으로 만든다</i>

<strike>문자의 중간에 글을 긋는다.(취소선비슷)</strike>

<tt>글자가 teletype 으로 보이게한다.</tt>

<big>폰트크기를 현재값보다 1증가시킨다.</big>상반태그<smal>

<sub>아래첨자표시(원소기호)</sub><sup>위첨자</sup>

<abbr title=”document”>title속성은 풍선도움말</abbr>

<br>다음줄로넘긴다 (상반태그)<nobr></nobr>

<p align=”left”>단락을 나타내는 태그</p> 종료태그생략가능

<div align=””>특정구조를 만들거나 block-level스타일시트를 적용하기위해 사용</div> = dhtml을 만드는데 자주사용됨

<h>제목의 글자크기를 나타내는 태그</h> 무조건볼드

<center>element를 가운데 정렬시킨다.</center>

<span>inline스타일을 적용하기 위한 태그</span>

<a href = “” target=”” title=”풍선말”>다른페이지로 이동할때</a>

<a href = “javascript: +링크함수</a>스크립트 링크시

<a href = mailto:+이메일?subject=title</a>이메일창을 뛰운다.

<base href=”” target=””>헤더에 포함되고 하나만기술가능 상대url을 해결할 문서의 base url을 정의하는 태그

<img src=”주소 ”alt=”그림보기가 꺼진 브러우저에 보여줄 문자”name=”” border=”테두리두께” hspace=”좌우객체와의 거리” vspace=”상하주위의객체와의 거리”>그림삽입태그

<map name=”mapname”>이미지맵에서 활성화된 영역의정보

</map>사용자가 그림영역을 클릭하면 url로 이동됨

<ol type=”a” start=”2”><li>목록나열의순서를지정</li></ol>

<ul type=”circle”><li>순서가없는리스트를나열</li></ul>

<li>ul/ol 태그안에서 각각의 목록을 나타내는 태그</li>

<dl><dt>정의글<dd>내용글(들여쓰기됨)</dd></dt></dl>

<form name=”formname” action=”url” ectype=”encodingType”

method=get or post target=”windowsName”></form>

<input>폼에 입력될 요소의 종류를 나타내는 태그

input type
button	name / value
text	name /maxlength /size/value(기본값)
password	텍스트와동일
file	exctype속성 = (multipart/form-data) name/value(파일주소)
hidden	name/value
submit	name/value(표면글자)
reset	name/value *초기화시킨다 버튼클릭시
image	submit대신 이미지클릭하여 전송케함 align/name/src=”location”
checkbox	checked(지정시체크된상태로표시)/name/value(체크되었을시 서버에 보내질값 기본값은 “on”)
radio	checked/name/value
textarea	name/cols=”넓이”/rows/wrap=”다음줄넘기기”

*<form name=””>

<select> name/multiple(선택시 여러매뉴선택가능) size(메뉴에 보여질 메뉴의 수)

<option> value=”optionvalue(서버에제출되는값)”/selected

ComboBox형태 </option></optgroup>

</select></form>

*<button name=submit value=save>보내기

기본값submit (submit/reset/button 타입존재)

</button>

*<fieldset><legend>그룹박스를만든다</legend></fieldset>

*<label for=연결될객체id>폼요소와 연결시켜줌</label>

*<table cols=”” width=”” haeight=”” align=”” bgcolor=””

background=”” cellpadding=”셀내부객체와의 거리” cellspacing=”셀간의거리” border=””

bordercolor=”” ><caption>표의제목을지정</caption>

<tr>행을나눈다<td>열을나눈다</td></tr>

표를 만든다.</table>

*<tr속성>align=수평정렬지정 valign=수직정렬

*<th>td태그와 같으나 가운데 정렬됨

*<td> align / valign / bgcolor / colspan(칸을합친다) / rowspan(행을합친다) / bgcolor / background / height/ width </td> 스펜시 합쳐지는대상셀은 td태그비워둘것

<====스타일시트사용을위한태그=====>

*<thead><tbody><tfoot> 머리말 본문 꼬리말을 그룹화한다.

table 태그안에 위치

*<colgroup>표에서 칸의 성질이 같은겉끼리 그룹화한다.

*<col>표에서 각각의칸을 정의하는 태그

<프레임>

*<frameset rows=”” cols=”” border=”” cordercolor=”” frameborder=””>프레임셋정의태그로 body태그 대체</frameset>

rows / cols 하나이상을 지정하고 조합으로 만든다.

*프레임셋을 구성하는 프레임 문서설정

<frame src=”문서위치” name=”” marginwidth=”” marginheight=”” scrolling=””

noresize target=””>

*<noframes>프레임을지원하지않는브라우저에서보여짐</noframes>

*<iframe src=”” longdesc=”” name=”” width=”” height=”” marginwidth=”” harginheight=”” scrolling=”” framborder=””>

*<embed src=”” width=”” height=”” pluginspage=”” hidden=”” autostart=”” loop=””>웹문서에 임의의 개체를 삽입하는 태그

*<noembed>embed태그를 사용하지 않는 브라우저에 표시

*<applet code=”” codebase=”” width=”” height=”” > java applets를삽입한다. <param name=”FONT” value=ARIAL”> 파라메터태그사용

*<object data=”” type=”” codebase=”” width=”” height=”” classid=””

codetype=”” archive=”” name=”” usemap=”” standby=””

tabindex=”” declare=””></object><param 태그사용>

<어느문서에나 적용할 수 있는 일반속성>

id = 요소의 이름을 지정

class = element를 종류별로 그룹화 하거나 이름을 지정

dir = 텍스트또는 테이블의 방향을 지정(ltr / rtl)

title = 풍선도움말을 제공

style = element의 스타일을 지정

language = 언어코드

******************************<css>***********************************

*<style type=”” media=”(screen/print/all)”>스타일시트지정</style>

*<link rel=(styleseet/fontdef) type=”text/java script” href=”url”>

문서간의 관계를 정의하는 태그로 <head>에 포함된다.

*스타일선언방법

1.외부스타일시트파일을 link

2.import하는방법

3.html의 head에서 선언하는 방법

4.직접각각의 태그에 적용하는 방법

&&&&&&&&&&&&&&&&&&&&html <head>에서 선언법&&&&

[ selector {property : value } selector(선택기)와 decaration(선언) ]

ex) <style> --element selector

p {background-color : teal;}

</style> 동일웹페이지 모드 p태그에 적용됨

ex) <style> --class selector

.firclass {background-color : teal};

</style> firclass 클레스에 적용됨

ex) p.pclass {decaration} p태그 p클래스에만 적용

ex)#h2id (color : red;) 객체 id가 h2id 것만 적용

ex)h1,h2,h3,h4,h5 {color :red ;} h1부터 h5까지 element를 그룹화

ex)div i {color:red} div i태그안에 속한 element만 변경됨

ex)p : first-line {color:red} p태그 첫줄만 반영됨

ex)p : first-letter{color:red} p태그 첫문자만 반영됨

링크선택기<a 태그에 반영됨>
a:link	링크의 기본적용될 스타일 지정
a:visited	방문했던 링크에 적용될 스타일 지정
a:active	클릭했을때 적용될 스타일 지정
a:hover	링크위에 마우스가 올라갔을때 스타일 지정

&&&&&&&& element 의 각각의 style에 속성적용 선언법&&&&

<body>내 객체의 태그 element 의 style에 직접적용

ex)<p style=”color:red; background-color:green;”> </p>

&&&&&&&&&&& link를 사용하는 선언법&&&&&&&&&&&&&

스타일선언문을 css파일로 따로저장하고 사용할문서에서 <head>

&&&&&&& @import를 사용하는 선언법 &&&&&&&&&&&&

#동일선언스타일시트의 적용은 아래쪽이 우선시된다.

#selector{property : value !important} 선언시 우선된다.

#일반적으로 법위가좁은것부터 넓은것으로 적용됨.id/class/element

#margin /boder / padding / background 관련속성은 element-color 의 형태를 뛴다.

***************************<javaScript>*********************************

#delete 연산자 = 개체.속성/배열요소를 제거한다.

delete objectName 개체의 이름

delete objectName.property 지울속성

delete objectName.[index] 지울배열

delete property(with명령문에만 사용)

#new 연산자 = instance를 생성한다.

objectName = new objectType(param1,param2,paramN)

#this 현재개체를 참조 this.propertyname

#typeof(operand) data type을 문자열로 알려준다.

#void(expression) 식을평가하고 값을 리턴하지 않는다.

#var | const variavleName = function(param) { functionBody }

#label : continue label; 타언어 점프문

#for(var i in obj) { statements } oracle for~in 문과 동일.

#try{ } catch{exception} finally{ } =Core javascript1.5추가

최상위 속성
undefined	선언후 값이 정의되지 않음
NaN	숫자가 아님을 의미
Infinity	무한대를 나타내는 숫자값
최상위 함수
escape(str)	ASCII(16진수) 코드로변경한 값을반환
unescape(str)	16진수 코드를 보통문자로 변경
eval(str)	str매개변수가 식이면 식을평가 명령문이면 명령문을 실행한다.
isFinite(num)	유리수를 확인한다.(무한수면 false)
isNaN(value)	int /float 변수가아니면 false(숫자인지를 체크한다.)
parseFloat(str)	float형으로 변환 숫자가아닐시 NaN리턴
parseint(str,radix)	값과 / 리턴되는값의 진수를 나타내는 정수
Number(obj)	Stringf(obj) 숫자 및 문자로 변환한다.
encodeURI(str)	string을 uri로 변조시킴 “/?문자를 변조못함
decodeURI(uri)	URI를 string으로 변조시킨다.
encodeURI Component(str)	string를 uri로 변조시킨다 . 특수문자전체를 변환시킨다.
decodeURI Component(uri)	encodeURI Component(str)에 의해 변조된 uri를 string으로 나타낸다.
EVENT HANDLER
onClick	클릭
ondblClick	더블클릭
onBlur	포커스를 잃어버릴때
onFocus	포커스를 가질때
onAbort	다운로드중 중지버튼을 클릭했을때
onChange	값이변할때
onLoad	브라우저가 프레임을 로드한 후
onUnload	브라우저를 종료시킬때
onMouseDown	마우스버튼을 누를때
onMouseUp	마우스버튼을 놓을때
onMouseOver	개채나 이미지를 마우스가 가르칠때
onMouseOut	마우스 커서가 개체나 영역을 벗어날때
onReset	리셋버튼을 클릭할때 form태그에서 사용함
onSubmit	submit 문서가 전송되기전에 form태그에서사용
onSelect	사용자가 텍스트박스나 필드를 선택할때
onMouseMove	마우스가 움직일때(전체이벤트)
onDragDrop	개체를 윈도우에 떨어뜨릴 때
onError	그림이나 문서를 읽어들이는 동안 에러발생시
onResize	윈도우또는 프레임크가를 변경할때
onKeyDown	사용자가 키를 누를때
onKeyUp	키보드키를 눌렀다 땔때
onKeyPress	키보드키를 누르고 있을때

********************************<DOM>********************************

<window개체>

1.브라우저가 html파일을 읽어들일때 마다 자동으로 생성됨.

2.최상위개체로 모든개체는 window개체 아래에 위치한다.

3.접근은 window.속성 또는 window.메소드 로 한다.

속성
name	윈도우의 이름을 나타낸다
window	현재윈도우 또는 프레임과 동의어
self	현재윈도우 개체를 나타냄
top	모든프레임을 포함하는 최상위 개체
parent	프레임에서만 의미가 있고 상위프레임 또는 윈도우를 나타냄
closed	윈도우가 닫혀 있는지를 확인 boolean값으로 닫히면 true
defaultStatus	윈도우의 상태바에 표시될 기본메세지 onMuouseOver / onMouseOut 에서 설정하려면 true를 리턴해야된다.
status	윈도우의 상태선에 나타낼 메시지
length	윈도우에 포함되는 프레임수를 지정
locationbar toolbar menubar personalbar scrollbars statusbar	브라우저에 각각의 location bar, 도구막대 , 메뉴막대 의 상태를 알아내거나 지정하는 속성으로 visible속성에 ture를 지정하면 활성화된다 ex) self.menubar.visible=false; self.toolbar.visible=true;
innerHeight innerWidth	윈도우의 현재 내용물의 수직 크기를 지정한다.
outerHeight outerWidth	윈도우의 외부테두리의 수직 크기를 지정
pageXOffset pageYOffset	윈도우 내용물의 위 좌측 코너와 페이지의 위 자측 코너와의 거리를 나타낸다. 처음위치가 (0,0) 이다.
screenX screenY	전체 스크린에서 브라우저의 위쪽과 좌측코너의 좌표
screenLeft screenTop	브라우저 순수 내용물 영역의 스크린에 대한 x,y좌표를 나타냄
opener	윈도우고 open메소드를 사용해서 새 window를 열었을때 부모 윈도우를 나타낸다.

메소드
alert(str)	메시지박스
confirm(str)	yes/no의 메시지박스 yes= ture
prompt(title,기본dsp메시지)	메시지입력즉석대화상자표시
history.back()	현재 url의 이전 url을 읽어들임
history.forward()	현재 url의 다음 url을 읽어들임
home()	브라우저의 home버튼클릭
print()	윈도우의 내용물을 프린트
find(문자,대소문자구분,커서압부분여부) str/true/true	윈도우의 text를 검색 지정시 찾아주고 미지정시 대화상자
stop()	윈도우의 stop와 동일(다운로드중지)
blur()	지정된 개체에 초점 제거
close()	지정된 윈도우를 닫음
focus()	지정된 개체에 초첨을 보냄
setInterval(함수명,밀리초, 함수언어javascript)	지정된 시간마다 함수를 호출 timerID=setInterval(......)
clearInterval(timerID)	setInterval을 취소한다.
setTimeout(함수명,밀리초, 함수언어javascript)	지정된 시간마다 함수를 호출 timerID= setTimeout (......)
clearTimeout(timeoutID)	setTimeout을 취소한다.
moveBy(x축num,y축num)	지정된픽셀로 윈도우를 이동(상대적)
moveTo(x축,y축)	윈도우를 지정된 좌표로 이동(절대적)
resizeBy(x축 픽셀수,y 축 픽셀수)	윈도우의 크기를 변경하는 메서드 otuerwidth/heigth 를 변경시킴
resizeTo(outerwidth/hegiht)	윈도우의 크기를 변경(아래/오르쪽만변경시킨다)
scrollBy(이동할x,y)	윈도우의 보이는 영역을 스크롤함
scrollTo(x,y)	지정된 위치가 좌상코너가 되게함
open(url,windowname, windowfeatures,replace(true))	새로운 윈도우를 연다 windowfeatures는 fullscreen류 옵션
navigate(url)	현재 윈도우에 지정한 url을 읽어옴
object.setActive()	초첨을 주지않고 현재 개체로 설정
attachEvent(event,function)	이벤트에 특정함수를 결합시킴
detachEvent(event,function)	attachEvent를 제거시킴
showModalDialog(url,arg, features)	open과 유사하나 닫힐때까지 부모창으로 돌아갈수 없다. window.returnValue = value 리턴될값을 적용한다.
showModelessDialog(url, agr,features)	modal과 유사하나 부모창으로 초점이동이 가능하다. window.dialogArguments = 속성 보낼 속성을 지정한다.(모달/모달레스)

<frame>객체

하나의 브라우저를 여러 부분으로 나누는것.

1.각각의 윈도우 객체로 취급된다.

#child 프레임에서 parent 참조하기

parent.속성

parent.개체.속성

parent.개체.location

parent.개체.document.title

#parent에서 child 프레임 참조하기

framename.속성

framename.개체.속성

framename.개체.document.formName.elementname.value

<document>객체

브라우저 윈도우에서 html문서를 나타내는 개체로 html element

text 와 document에 대한 정보를 이용하기 위한 객체

속성
title	문서의제목(html에서 title태그)
url	문서의 전체 url을 나타내는 속성
domain	서버의 도메인 이름
width/height	현재 document의 넓이와 높이
linkColor	링크의색을지정
alinkColor	마우스버튼을 눌렀을 때의 링크색을 지정
vlinkColor	방문했던 링크의 색을 지정
bgColor	배경색을 지정
fgColor	문서의 글꼴색을 지정
lastModified	문서의 최종변경일
formName	문서의 각각의 폼의 이름
referrer	링크를 클릭할때 호출하는 문서의 url
forms	문서의 form객체의 순서에 따라 배열이 생성됨 ex)document.forms[0]= document.forms[“firstform”]
links	Area에 대응하는 개체의 배열을 나타내는 속성 forms와 동일(anchors/images/embeds/applets)
anchors	anchor에대응하는개체의배열을나타내는 속성
images	images에대응하는개체의배열을나타내는 속성
embeds	문서에삽입된각각의개체의소스순서에따른배열
applets	applets에대응하는개체의배열을나타내는 속성
cookie	cookie를 나타내는 속성 name = value; expires=data(유효기간); domain=설정쿠키를이용할수있는도메인명 path=설정한쿠키를이용할문서의경로 secure;(설정시 보안이 유지된 상태에서만 접근가능)
activeElement	parent document가 초점을 받을때 초점을 받은 개체
defaultCharset	문서의 기본 문자셋을 나타내는 속성
designMode	decument가 편집될수 있는지를 지정하는 속성 document.designMode = on/off
dir	개체를 읽어 들이는 순서 object.dir=ltr/rtl
uniqueID	개체를 인식하는 유일한 아이디를 만드는 속성
documentElement	document의 최상위 node를 나타내는속성으로 Explorer를 나타냄
expando	개체 내에서 임의의 변수를만들수있는지 지정
fileCreatedDate	파일이 만들어진 날짜를 나타냄
fileModifiedDate	파일이 변경된 날짜를 나타냄
fileSize	파일의 크기를 나타냄
parentWindow	현재document개체를 포함하는 window개체를 참조하는 속성
protocol	url의 protocol부분을 나타내는 속성
readyState	개체의 현재상태를 나타내는 속성
URLnuencoded	공백/특수문자가 변환되지 않은 url을 나타냄
메소드
open(mimetype, replace)	write/writein 메소드의 출력을 모으기 위한 document를 여는 메서드
write( arg1,arg2...)	document에 html expression을 쓴다.
writein(arg1.....)	wirte메소드와 동일 하나 새줄에서 시작함.
close()	open으로 연 스트림으 닫고 출력한다.
clear()	현재 document를 지우는 메서드
createElement(tag)	특정 태그의 element를 만든다. document에 추가되지 않으므로 insertBefor, appendChild 메서드를 사용해 추가함. ex)table/tbody/tr/th 등
createTextNode(str)	특정 태그의 text string를 만든다. createElement와 동일하게 추가하고 ex)항목/ 증가 같은 텍스트값을 생성
createStyleSheet (url/index)	document에 적용될 스타일시트를 생성 ex)document.createStyleSheet(url /index) url=url로 파일이름 지정시 link개체에 추가 url이스타일정보를 포함시 style개체에 추가됨
getElementById(str)	지정한 id속성값을 가지는 개체중 첫번째 개체를 참조하는 메서드
getElementByName (str)	같은name속성값을 가진 개체의 콜렉션을 임의로 만들수 있게 하는 메서드
getElementBy TagName(str)	element(태그) 이름이 같은 개체들의 콜렉션을 만드는 메서드로 all콜렉션의 tag와같음
object.hasFocus()	개체가 현재 초점을 가졌는지를 확인
object. mergeAttributes (복사대상개체/boolean)	속성을 복사해서 다른 element에 붙여 넣는 메서드이다.

<history>객체

메소드
back()	이전 url을 읽어들인다.
forward()	다음 url을 읽어들인다
go(number or url)	(상대적위치를 나타내는 정수 or 전부또는 부분을 나타내는 url)

<location>객체

메소드
reload()	현재 문서를 다시 읽어 들인다.
replace(url)	history 에 url을 지우고 현재 url을 대신할 url을 읽어들인다.
assign(url)	새로운 document를 읽어들인다.

<event>객체

메소드
ctrlkey	CTRL키의 상태를 지정하거나 알아내는 속성 이하동일
	ctrlLeft / altKey / altLeft / shiftKey / shiftLeft
event.srcElement event.target	발생한 이벤트를 알아내거나 지정하는개체 target개체와 유사한 역활
fromElement	마우스오버와 아웃이 발생할때 어떤개체에서 왔는가를 알아내는 속성
toElement	어떤개체로 이동했는지를 알아내는 속성
type	이벤트의 타입을 알아내는 속성
button	사용자가 누른 마우스 버튼을 알아내거나 확인 0:아무것도 안누름 1:왼쪽 2:오른쪽 3: 왼쪽과 오른쪽 동시
keyCode	unicode key code를 알아내거나 지정하는 속성으로 아무이벤트도발생안할때 0 리턴
x y	parent element에 대한 마우스 포인터의 상대적인 좌표를 나타냄
screenX screenY	사용자스크린에 대한 관계에서 마우스포인터의 좌표를 알아낸다.

'free' 카테고리의 다른 글

지금 막 도착한 람보르기니 레벤톤 포장뜯기 (0)	2009.09.18
춘래불사춘(春來不似春) (0)	2009.09.18
윈도우 화면분할 프로그램 (1)	2009.05.06
돌잔치 상품어디가좋을까? 돌잔치온라인서비스 비교 (0)	2009.04.16
터미널 폰트색 변경 (1)	2009.01.08
firefox 스크롤 속도 변경 (2)	2008.11.28
파이어폭스 속도향상 체감 500% (1)	2008.11.19
우편번호 dbf 파일을 myadmin 에 임포트 (1)	2008.10.29
원격제어 프로그램 (0)	2008.10.29
무료 웹호스팅 1.5G, 100G 트래픽 (0)	2008.10.20

Flex4

html css dhtml jscript

'free' 카테고리의 다른 글

티스토리툴바

html css dhtml jscript

'free' 카테고리의 다른 글

'free' Related Articles

티스토리툴바