|
|
|
ⓔ Explorer 전용, ⓝ Netscape 전용
HTML 형식 설명
<!DOCTYPE> HTML전용편집기 이용 문서 작성시 문서의 종료 버젼을 표시하는 태그
생략 가능, 문서형식은 HTML이며 W3C에서 표준으로 정한 HTML 4.0을 기준으로 작성
<META> 검색엔진 키워드나 문서에 대한 정보 http 응답헤더를 만들때 사용
검색 엔진
Name 검색엔진에서 사용 할 형식
Subject : 웹페이지의 주제
Title : 목적
Author : 작성자
Publisher : 책임을 가진 단체
Date : 작정 날짜
Keyword : 검색에 사용될 키워드
Description :검색 시 설명 문장
Http-equiv expires : 유효기간 설정, 접속시 마다 갱신은 0으로 설정
refresh : 일정 시간후 refresh 설정
content-type : 기본 문자셋 설정
Content Name, http-equiv 속성에 대한 설명이나 명령
반드시 따음표 사용
정보 제공
content-type : 문서의 형식
page-enter : Explorer가 처음 읽어들일 때 실행할 내용
page-Exit : Explorer가 메모리에서 해제할 때 실행할 내용
응답 헤더
refresh : 브라우저가 새로 Loading 하고자 하는 내용을 초단위로 지정
expires : 임시폴더에 저장되는 문서의 유효기간 지정
<BASEFONT> ⓔ 기본 글꼴 크기를 지정
사용자의 옵션 설정 보다 우선, <HEAD>,<BODY> 중복 사용가능
<BASE> <A>링크의 상대 경로 사용시 기준 URL경로 지정
href : 상대적인 경로를 사용할 때 그 기준이 되는 URL
target : 링크된 페이지를 보여줄 윈도우 이름
<STYLE> 스타일 선언
<LINK> 스타일시트나 아이콘과 같은 외부의 파일을 불러옴
media 스타일이 적용될 대상 장치를 지정, screen,print,all 값만 모든 브라우저에서 공통 지원
screen Computer screens(default)
tty Teletypes and similar media using a fixed-pitch character grid
tv Television type devices(low resolution, limited scroll ability)
projection Proejctors
handheld Handheld devices(small screen, limited bandwidth)
print Print preview mode/printed pages
braille Braille feedback devices
aural Speech synthesizers
all Suitable for all devices
<SCRIPT> 인터프린터(해석기)에 의해 해속될 스크립트 언어 입력
###############################################################################################
<BODY>태그 속성
색상 bgColor 배경색
text 글자색
link 링크색(방문하지 않은)
aLink 링크색(마우스를 올려 놓은)
vLink 링크색(방문한)
여백 marginHeight ⓝ 문서의 상하 여백(픽셀)
marginWidth ⓝ 좌우 여백
leftMargin 좌우 여백
topMargin 상하 여백
배경 background 배경색을 이미지로 지정
bgProperties ⓔ 배경이미지의 고정 또는 스크롤 결정
스크롤바 scroll ⓔ 스크롤바의 여부(yes/no, 1/0)
###############################################################################################
<A> 태그 속성
링크, <BASE>
Name 페이지의 특정 위치로 이동시 사용하는 Ancher
Href 링크에 연결할 URL
Target 링크된 페이지를 보여줄 윈도우 지정(_self, _parent, _top, _blank, 윈도우 이름)
Title 링크에 마우스포인터를 올려둘 때 도움말
###############################################################################################
<IMG> 태그 속성
이미지 로드, <MAP>
align top, middle, botton, absMiddle, baseLine, absBotton 중 하나의 높이에 대한 값을 사용(left, right 사용 가능하나 권장하지 않음)
alt 이미지가 나타나지 않을 때 보여줄 설명
border 테두리선
src URL
width 넓이
height 높이
hSpace 수평여백
vSpace 수직여백
lowSrc 이미지가 다운로드될 동안 보여줄 적은 용량의 이미지
name 객체의 이름
title onMouse 설명문
useMap <MAP> 태그의 name값 지정
###############################################################################################
<MAP> 태그 속성
AREA 태그의 타켓 이미지 지정, <IMG>,<AREA>
name <AREA> 태그가 적용될 <IMG> 태그 이름
###############################################################################################
<AREA> 태그 속성
이미지 분할 링크, <MAP>
alt, title onMouse 설명문
coords shape="circle" 원형(x,y좌표와 반지름)
shape="rect" 사각형(좌측상단과 우즉하단의 x,y좌표)
shape="poly" 다각형(각 꼭지점 x,y 좌표)
href 링크 URL
Shape 링크 모양 결정(circle 원, rect 사각형, poly 다각형)
Target 링크를 보여줄 윈도우 지정
<img src="/images/page/app_header_bt_noti.png" usemap="#app_header_bt" style="width:100%"/>
<map name="app_header_bt">
<area shape="rect" coords="26,9,150,38" href=""/>
<area shape="rect" coords="151,9,275,38" href=""/>
</map>
###############################################################################################
블록 요소(Block Element)
줄바꿈을 해주는 태그
<ADDRESS> Italic체, 박스 앞뒤 줄바꿈
<BLOCKQUOTE> 들여쓰기 적용, 줄바꿈
<CENTER> 중앙 정렬, 줄바꿈
<DIV> 줄바꿈
<H1>~<H6> 제목을 나타냄, 앞뒤로 한칸 띄움
<P> 앞뒤로 한줄을 띠어 문단 구분
<PRE> 띄어쓰기, 엔터 적용
<HR>* 수평선
Noshade 그림자효과 없애고 단색 표현
Align,Title,Width,Color*,Size*
<MARQUEE> 브라우저에 흐르는 효과
behavior Scroll : 스크롤 반복
Slide : 스크롤 후 멈춤
Alternate : 좌우 반복적으로 왕복
direction Left, Right, Up, Down 흐르는 방향 설정
loop 반복 횟수, Infinite(무한)
scrollAmount 이동 간격
scrollDelay 이동 속도
bgColor,width,height,vSpace,vSpace
목록은 나타내는 태그 <DIR>,<MENU>,<DL>,<DD>,<DT>,<LI>,<OL>,<UL>
테이블과 관련된 태그 <TABLE>,<CAPTION>,<TBODY>,<TR>,<TD>
###############################################################################################
목록 태그
<DL> <DT>,<DD> 태그 포함
Definition List(용어 정의 목록)
<DD> <DL>에 포함되어 들여쓰기
Definition DEscription(용어의 설명)
<DT> <DL>에 포함되어 제목 표시
Definition Terms(용어)
<LI> List로서 <DIR>,<MENU>,<OL>,<UL>태그에 포함되어 항목을 나타
type <OL>에 포함될 때 A,a,I,i,1
<DIR>,<MENU>,<UL>에 포함될 때 disc,circle,square
value <OL>에 포함될 때 1보다 큰 양의 정수로 목록의 순서를 정함
List(목록)
<OL> <LI>태그에 숫자,알파벳,로마자와 같은 순서를 적용시키는 type 속성을 가짐
type A,a,I,i,1
start type의 시작 번호 정의
Ordered List(순서 있는 목록)
<UL> <LI>태그를 Disc, Circle, Square 형태의 블릿으로 출력하기 위한 type 속성을 가짐
Unordered List(순서 없는 목록)
###############################################################################################
테이블 태그
<TABLE> 테이블 작성
borderColorLight ⓔ 테두리 색중 밝은 부분 색
borderColorDark ⓔ 테두리 색중 어두운 부분 색
cellSpacing Cell과 Cell 사이의 여백
cellPadding Cell의 내용과 테두리선 사이의 간격
frame ⓔ 테이블 바깥쪽 선 설정
rules ⓔ 테이블 안쪽 선 설정
align,bgColor,background,border,borderColor,width,height
align="값" (값 = left / center / right)
backgroungd="이미지 파일 경로"
bgcolor="값" (값 = 색이름 / SRGB)
bordercolor="값" (값 = 색이름 / SRGB)
border="픽셀"
bordercolordark="값" (값 = 색이름 / SRGB)
bordercolorlight="값" (값 = 색이름 / SRGB)
cellpadding="픽셀"
cellspacing="픽셀"
cols="숫자"
class="클래스 이름"
frame="값" (값 = above / below / border /hsides / Lhs / rhs / vside / void)
height="픽셀"
hspace="픽셀"
id="id 이름"
rules="값" (값 = cols / rows / none / all /group)
style="스타일 시트 입력"
title="제목"
width="픽셀/(%)"
특이사항
- summary 요약문 abbr 약어 지정 (WCAG1.0)
<CAPTION> 테이블 제목
align="값" (값 = top / bottom / left / right)
id="id 이름"
class="클래스 이름"
style="스타일 시트 입력"
title="제목"
align,valign
<COL> 하나의 컬럼의 공통 속성 지정
span ⓔ 현재의 걸럼의 기능을 적용시킬 컬럼 수
ID ⓔ 스타일시트를 적용하기 위한 이름
align ⓔ,valign ⓔ,bgColor ⓔ, width
<COLGROUP> 여러개의 컬럼에 공통 속성 지정
align="값" (값 = top / bottom / left / right)
id="id 이름"
char="기준 알파벳"
charoff="문자 개수"
span="열 개수"
style="스타일 시트 입력"
width="픽셀"
valign="값" (값 = top / bottom / center /baseline)
<COL>과 비슷
align="값" (값 = top / bottom / left / right)
id="id 이름"
char="기준 알파벳" (align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
charoff="문자 개수" (align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
span="열 개수" (열의 개수를 지정 IE 3.0,N 4.0 이상)
style="스타일 시트 입력"
width="픽셀"
valign="값" (값 = top / bottom / center /baseline)
align ⓔ,valign ⓔ,bgColor ⓔ, width,ID ⓔ, span ⓔ
<TR> <TABLE>에 포함되 행 만듬, <TD>,<TH>를 포함\
align="값" (값 = left / center / right / justify /char)
bgcolor="값" (값 = 색이름 / SRGB)
bordercolor="값" (값 = 색이름 / SRGB)
bordercolordark="값" (값 = 색이름 / SRGB)
bordercolorlight="값" (값 = 색이름 / SRGB)(표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 IE 3.0 이상)
char="기준 알파벳"(align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
charoff="문자 개수"(align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
class="클래스 이름"(스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상)
id="id 이름"
style="스타일 시트 입력"
title="제목"
nowrap
valign="값" (값 = top / bottom / center /baseline)
colSpan Column 병합시 Cell 수
rowSpan Row 병합시 Cell 수
noWrap Cell의 내용을 다음 줄로 넘기지 않음
align,valign,bgColor,background,width,height
<TD><TH>
align="값" (값 = left / center / right / justify /char)
bgcolor="값" (값 = 색이름 / SRGB)
bordercolor="값" (값 = 색이름 / SRGB)
bordercolordark="값" (값 = 색이름 / SRGB)
bordercolorlight="값" (값 = 색이름 / SRGB) (표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 IE 3.0 이상)
char="기준 알파벳" (align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
charoff="문자 개수" (align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
class="클래스 이름" (스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상)
id="id 이름"
style="스타일 시트 입력"
title="제목"
nowrap
valign="값" (값 = top / bottom / center /baseline)
<THEAD> 머리글
<TBODY> <TR>의 부모, 셀의 공통속성 지정
<TFOOT> 꼬리말, <TBODY> 보다 먼저 선언
<THEAD>, <TBODY>, <TFOOT> 공통 속성
align="값" (값 = left / center / right / justify /char)
axis="셀 이름"(셀의 이름을 설정합니다.)
axes="관련 내용"(셀의 내용과 부합하는 이름을 나열합니다.)
background="이미지 파일 경로"
bgcolor="값" (값 = 색이름 / SRGB)
bordercolor="값" (값 = 색이름 / SRGB)
bordercolordark="값" (값 = 색이름 / SRGB)(셀 경계선을 3차원으로 만들때 사용되는 어두운색을 지정)
bordercolorlight="값" (값 = 색이름 / SRGB)(셀 경계선을 3차원으로 만들 때 사용되는 밝은색을 지정)
char="기준 알파벳"(align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
charoff="문자 개수"(align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
class="클래스 이름"
colspan="숫자"
id="id 이름"
rowspan="숫자"
style="스타일 시트 입력"
title="제목"
nowrap
valign="값" (값 = top / bottom / center /baseline)
예제
※summary 요약문 abbr 약어 지정 (WCAG1.0)
※표제목 caption 설정 (css로 행정렬)
※<table width="" border="" frame="" rules="" cellspacing="" cellpadding="">
(css로 하는것이 좋음)
width= 가로길이 픽셀,%로 지정
border=테두리선 두께, 값은 px로 지정
frame=표의 외부 테두리를 상하좌우 어디에 표시할지 지정 (웹표준교과서74p)
rules=셀의 구분선 표시양식 (웹표준교과서74p)
cellspacing=셀사이의 간격, 픽셀 또는 % 지정
cellpadding=셀안의 간격, 픽셀 또는 % 지정
※열 그룹화를 위한 colgroup 요소, col 요소
-col요소는 빈요소이며 table 요소 또는 colgroup 요소의 자식 요소로 지정한다
<table summary="브라우저의 이용자 비율에 관한 독학조사. 2004년 제2분기가 대상. 1열이 브라우저명, 2열이 비율.">
<caption>브라우저 이용자 비율</caption>
<colgroup span="2">
<col class="browsers" />
<col class="versions" />
</colgroup>
<col class="percentage" />
※좀더 높은 레벨의 셀 관련 짓기 (header)
-th 요소, td 요소에 headers 속성과 scope 속성을 지정하면 좀더 높은 레벨로 셀을 관련지을 수 있다
-header 속성에는 td 요소의 제목 정보를 제공하는 th 요소의 id를 지정한다
<thead>
<tr>
<th id="brs" abbr="브라우저">브라우저</th>
<th id="ver" abbr="버전">버전</th>
<th id="pct" abbr="비율">비율</th>
</tr>
</thead>
<tfoot>
<tr>
<td headers="brs ver" colspan="2">합계</td>
<td headers="pct">100%</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="brs" rowspan="3">Internet Explorer</td>
<td headers="ver">6.x</td>
<td headers="pct">83.24%</td>
</tr>
<tr>
<td headers="ver">5.x</td>
<td headers="pct">10.76%</td>
</tr>
<tr>
<td headers="ver">4.x</td>
<td headers="pct">0.10%</td>
</tr>
</tbody>
※좀더 높은 레벨의 셀 관련 짓기 (scope)
-th 요소로 제목정보를 제공하는 td요소의 범위를 지정한다.
-row(그 행의 td 요소 제목정보 제공)
-col(그 열의 td 요소에 제목정보 제공)
-rowgroup(그 행 그룹의 td 요소에 제목정보 제공)
-colgroup(그 열 그룹의 td 요소에 제목정보 제공)
<theader>
<tr>
<th scope="col" abbr="브라우저">브라우저</th>
<th scope="col" abbr="버전">버전</th>
<th scope="col" abbr="비율">비율</th>
</tr>
</theader>
※headers 속성은 td 요소에서 th 요소의 id 참조에 비해 scope 속성은 th 요소에 td 요소의 범위를 지정하는 점이 다르다.
※axis 속성을 이용해서 th 요소의 분류명을 지정할 수 있다.
-예컨데 id에 'brs'라고 지정한 th 요소와 'ver'라고 지정한 th 요소에 대하여 axis 속성으로 '화면표시'라는 분류명을 부여하는 경우등에 쓰인다.
<thead>
<tr>
<td id="brs" axis="화면표시" abbr="브라우저">브라우저</th>
<th id="ver" axis="화면표시" abbr="버전">버전</th>
<th id="pct" abbr="비율">비율</th>
</tr>
###############################################################################################
프레임 테그
<FRAMESET> 프레임셋 설정
cols 프레임 좌우 분할
rows 프레임 상하 분할
border 경계선 두께
borderColor 경계선 색
frameSpacing ⓔ 프레임 테두리선 사이의 간격 변경
frameBorder 프레임 테두리 생성 여부
<FRAME> 프레임 설정
name 프레임 이름
src 출력할 URL
frameBorder ⓔ 테두리선 여부
marginWidth 좌우 여백
marginHeight 상하 여백
noResize 프레임 크기 조절 여부
Scrolling 스크롤바 생성 여부
<IFRAME> <BODY>에 사용 가능한 프레임
frameBorder, marginWidth, marginHeight, name, Scrolling, src, width, height
###############################################################################################
미디어 태그
<EMBED> ⓔ Media Player,ⓝ Real Player 가 있어야함
autostart 자동 시행 여부(true/false)
hidden 숨김 여부
loop 반복 여부(Infinite 무한)
src URL
alt 실행이 안될때 설명문
pluginSpace Plug-in 미 설치시 다운로드 받을 수 있도록 URL 지정
align, hSpace, vSpace, name, title, width, height
<BGSOUND> ⓔ mid, wav, aif, au, mp3 지원
src ⓔ, loop ⓔ
<IMG dynsrc> ⓔ IMG의 dynsrc속성을 이용하면 미디어 파일 재생 가능
dynsrc ⓔ src속성 보다 우선
src dynsrc 미디어 파일 없을 때 출력할 이미지
border, loop ⓔ, name, width, height
<APPLET> JAVA class 파일 실행
code 파일 이름
codeBae 파일 경로
name, width, height, hspace, vspace
<PARAM> <APPLET>의 Class 파일에 변수를 전달
name class 파일로 전달할 고정된 변수
value 애플릿에서 사용하기 위한 실제 데이터
<OBJECT> 차세대 멀티미디어 표준
data 파일 URL, 안정상 <PARAM> 태그 이용을 권장
id 요소를 인식하기 위한 이름, classid 속성에 어떤 요소를 삽입하는 것인지를 설명
classid 파일의 형식 지정
codebase 플러그인 미설치시 자동 설치에 사용될 파일 URL
align, border, width, height
###############################################################################################
입력 양식
<FORM> 사용사가 입력한 값을 서버로 전달
Action 서버프로그램의 URL
Method get default, 주소표시줄 이용 보안성 X, 전송 데이터 크기 제한(2Kbyte), 데이터가 인수로 전달
post 크기 제한 없음, 표준입력 방식 전달
Enctype 서버에 전달 데이터 타임 지정, javascript에서 변경시 encoding
application/x-www-form-urlencoded
multipart/form-data
Target 결과를 돌려받을 윈도우 이름
onsubmit submit 버튼 이벤트
onreset reset 버튼 이벤트
name
<INPUT> 입력 태그
type 종류(text,password,file,checkbox,radio,hidden,button,reset,summit,image)
checked checkbox, radio 원하는 항목 체크
maxlength text, password 최대 입력 글자 수
readonly text, password 내용 변경 못함
size text, password 입력 문자열 수
type, name, value
<TEXTAREA>
name, rows, cols, readonly(none,readonly), disabled(none,disabled)
<SELECT>
multiple 중복 선택 가능
name, size
<OPTION>
selected 요소 선택
value 요소 값
###############################################################################################
<SPAN>
<DIV> 줄바꿈
###############################################################################################
HTML 태그(HTML Tag)
<XMP> 태그와 텍스트를 공백문자까지 입력한 그대로 보여주는 기능, 문자열 그대로 보여줌
<PRE> XMP와 비슷한 기능을 하지만 PRE는 텍스트만 보여주고 태그는 태그로 처리함
<BR> 줄 바꿈
<NOBR></NOBR> 줄 바꿈 방지
<HR> 문서 구분(수평선)
<IMG> 이미지 파일 표시
문자 형태
<B></B> 굵게(Bold체)
<I> 기울임(Italic체)
<TT> 타자기체(Typewriter Text)
<SUP> 위첨자(SUPerscript)
<SUB> 아래첨자(SUBscript)
<U> 밑줄(UnderLine)
<STRONG> Strong Emphasis(Bold체로 강조)
<EM> Emphasized text(Italic체로 강조)
<VAR> 변수(Variable) 표시할 때 Italic체로 강조
<CODE> 타자기체로 프로그램 를
<BIG> 현재 보다 큰 글씨 크기
<SMALL> 현재 보다 작은 글씨 크기
<INS> Insert text 부분을 표시하는 밑줄
<S> 취소선(Strike Through)
<STRIKE> STRIKE(Strikeout Type) 취소선
<DEL> 글씨 중간 취소선(Delete)
<CITE> Inline Citation(Inline 인용문으로 Italic체로 보임)
<Q> 짧은 인용구문에 사용(Netscape 전용)
<BLOCKQUOTE> 긴 인용문에 들여쓰기 적용(Block 요소)
<ACRONYM> 약자로 표현
<NOBR> Line-Break 기능을 수행하지 않음
<FONT> 글꼴 변경
size="" 크기 조정(1~7까지, 기본 3)
+,- 기호를 쓰면 기본에 +,-해서 변경
face="" 폰트 조정(바탕체,굴림체,궁서체)
속성에 지정한 폰트를 가지고 있지 않을 때를 대비하여 여러개의 폰트 사용 가능(face="하늘체, 궁서체, 굴림체")
color="" 색 조정(red,#FF0000,REG(255,0,0),REG(100%,0%,0%))
태그 속성(Tag Attribute)
title="" 마우스를 올려 놓으면 설명문 표시
###############################################################################################
###############################################################################################
###############################################################################################
CSS 적용 방법
In-Line 스타일
<태그 style="속성:속성값">스타일 대상</태그>
Embeded 스타일시트
STYLE 태그를 사용
<STYLE TYPE="TEXT/CSS">
선택자 {속성:속성값}
선택자 {속성:속성값; 속성 속성값}
</STYLE>
External 스타일시트
외부에 저장된 CSS파일
LINK 태그
<LINK REL="stylesheet" HREF="경로" TYPE="text/css">
Import 구문
<STYLE TYPE="text/css">
@import url(경로);
@import url(경로);
</STYLE>
###############################################################################################
1. 좌우 위치 정렬 : 텍스트의 왼쪽, 가운데, 오른쪽 정렬
- style="text-align:값;"
- 값 : left 또는 center 또는 right
- 예) style="text-align:left;"
2. 상하 위치 정렬 : 텍스트의 위, 중간, 글표시라인의 하단, 아래 정렬
- style="vertical-align:값;"
- 값 : top 또는 middle 또는 textbottom 또는 bottom
- 예) style="vertical-align:top;"
3. div의 화면 위치 설정 : 절대위치, 상대위치, 기본값, 고정 등의
div가 화면에 나타나는 위치 설정
- style="position:값;"
- 값 : absolute(절대위치), relative(상대위치), static(기본값), flxed(고정)
- 예) style="position:absolute;"
4. 내부위치 설정 : div 내부에 표시될 내용의 위치를 설정
- style="값 : 크기;"
- 값 : top 또는 left 또는 bottom 또는 right
- 크기 : 10px15px 등의 숫자 (15px 는 15픽셀을 뜻함.)
- 예) style="top:13px;" <= 위로부터 13픽셀 떨어 진곳에 표시하라는 뜻.
5. 레이어 순서 : 화면에 나타나는 레이어의 표시 순서로
겹치더라도 우선순위가 높은게 가장위에표시
- style="z-index:값;"
- 값 : 1, 2 등의 숫자
- 우선순위 : 높은 숫자일수록 우선순위가 높다
- 예) style="z-index:1;"
6. 표시여부 : 화면에 보이게 할지 을 결정
- style="visibility:값;"
- 값 : hidden(숨김) 또는 visible(보임)
- 예) style="visibility:hiidden;"
###############################################################################################
배경 이미지
배경이미지 무반복
<style type="text/css">
body {background-image:url(이미지주소);
background-repeat:no-repeat}
</style>
배경이미지 가로만 반복
<style type="text/css">
body {background-image:url(이미지주소);
background-repeat:repeat-x}
</style>
배경이미지 세로만 반복
<style type="text/css">
body {background-image:url(이미지주소);
background-repeat:repeat-y}
</style>
배경이미지 특정위치에 놓기
배경이미지를 반복하지 않고 중앙에 배경이미지 하나만을 위치시키는 태그입니다.
<style type="text/css">
body {background-image:url(배경이미지 파일경로);
background-repeat:no-repeat}
background-attachment : fixed;
background-position : 50% 50%}
</style>
###############################################################################################
Selector
<STYLE TYPE="TEXT/CSS">
DIV {속성:속성값}
DIV.a {속성:속성값}
#a {속성:속성값}
DIV, SPAN, #a, .a {속성:속성값}
A:link {속성:속성값}
A:visited {속성:속성값}
A:active {속성:속성값}
A:hover {속성:속성값}
DIV:first-line {속성:속성값}
SPAN:first-letter {속성:속성값}
DIV SPAN {속성:속성값}
</STYLE>
<DIV class="a"><SPAN></SPAN></DIV>
<SPAN id="a"></SPAN>
class . 사용
id # 사용
A <A>태그 가상 클래스
link 방문기록 없는 링크
visited 방문기록 있는 링크
active 마우스를 누르는 동안의 링크
hober 마우스가 Over 된 상태의 링크
first-line 첫번째 라인에 적용
first-letter 첫번째 글자에 적용
DIV SPAN DIV 자식 SPAN에게만 태그 적용
DIV 스타일의 중첩 적용 됨
단위
절대적 단위 in,cm,mm,pt,pc
상대적 단위 em,ex,px,%
컬러 규칙
red, #FF0000, RGB(100%,0%,0%), RGB(255,0,0)
스타일 속성
font-style normal, italic, oblique
font-variant normal, small-caps
영문 소문자를 작은 대문자로 변경
font-weight normal, bold, bolder, lightr, 100,200,...,900
폰트 두께
font-size xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller
글자 크기, 숫자+단위(ex,em,cm,mm,in,px,pt,%)
line-height 폰트 적용 높이
font-family 글꼴(바탕,굴림,궁서,Arial,Serif)
font style variant weight size/line-heght family 순서로 적용하는 대표 속성
Text 관련 속성
color 컬러
line-height 행높이
letter-spacing normal, 숫자+단위, 글자 간격
word-spacing normal, 숫자+단위, 단어 간격
text-align left, right, center, justify
Block요소만 적용
text-decoration none, underline, overline, line-through, lblink ⓝ
text-indent 숫자+단위, 문단 첫번째 라인 들여쓰기, Block요소만 적용
text-transform none, capitalize, uppercase, lowercase (대소문자 변환)
vertical-align sub, super, baseline, top, text-top, middle, botton, text-bottom, percentage
line 내 수직 방향 위치
white-space ⓝ normal, pre
문서의 공배을 해석
배경 관련 속성
background-color 배경색
background-image URL
background-repeat repeat, repeat-x, repeat-y, no-repeat
background-position 가로 세로 (left, center, right, 숫자+단위, %)
위치 지정
background-attachment scroll, fixed(스트롤바 영향 X)
이미지 스크롤
background color url repeat position attachment
백그라운드 대표 속성
Box 관련 속성
width, height
cursor auto, crosshair, default, hand, pointer, move, text, wait, help, n-resize, ne-resize, e-resize,
se-resize, s-resize, sw-resize, w-resize, nw-resize
마우스포인터 모양
display block, inline, none
FF지원, IE부분 지원
inline 인라인 박스로 만든다.
inline-block 블록박스로 만들지만, 인라인 박스처럼 배치된다.
none 박스를 만들지 않으며 시각적으로 완전히 보이지 않는다.
inherit 상위 요소의 display속성을 상속받는다.
table 블록레벨의 표로 만든다.
inline-table 인라인레벨의 표로 만든다.
table-row 행으로 만든다. (tr 기본속성)
table-row-group 본체 행 그룹으로 만든다. (tbody 기본속성)
table-header-group 해더 행 그룹으로 만든다. (thead 기본속성)
table-footer-group 푸터 행 그룹으로 만든다. (tfoot 기본 속성)
table-column 열로 만든다. (col기본속성-보이지 않음)
table-cell 하나의 셀로 만든다. (td 기본속성)
table-caption 캡션으로 만든다. (caption 기본 속성)
list-item li요소와 같은 블록박스와 목록항목의 인라인박스로 만든다.
run-in 런인박스로 만든다.
compact 콤팩트 박스로 만든다.
marker 그 요소의 전후에 생성된 내용을 마커로 정의한다.
float left, right, none
margin-top 테두리선 외부 여백, 숫자+단위
margin-right
margin-botton
margin-left
margin 대표 속성 (top right botton left)
padding-top 테두리선 내부 여백
padding-right
padding-botton
padding-left
padding 대표 속성
border-top-style 테두리선 모양(none, solid, double, doted, inset, outset, redge, groove, dashed(점선) )
border-right-style
border-botton-style
border-left-style
border-style 대표속성
border-top-width 테두리선 두께
border-right-width
border-botton-width
border-left-width
border-width 대표 속성
border-top-color 테두리선 색상
border-right-color
border-botton-color
border-left-color
border-color 대표 속성
border 대표 속성(style, width, color 속성이 네 방향 모두 같을때)
목록 스타일
list-style-type none, disc, circle, square, decimal,
lower-roman, upper-roman, lower-alpha, upper-lapha
list-style-position inside, outisde
list-style-image url
list-style 대표 속성(type position image)
레이어 스타일
position Box를 레이어로 만듬, 네스케이프에서는 static,fixed를 absolute와 동일 취급
relative 상대적 위치 결정
absolute 좌측상단 기준 위치 결정
static 위치 이동 금지, 바탕 효과
fixed 위치 고정
left x축 이동 길이
top y축 이동 길이
z-index 겹치는 Box 순서
visibility viivility,hidden(box숨김)
overflow visible(fixed), hidden, auto, scroll (범위를 벗어난 글씨 처리 방식)
clip auto,rect(top,left,botton,right) (특정 영역만 보이도록 클립)
그 외 추가
ime-Mode active 한글을 기본 입력 언어로 설정
inactive 영어를
disabled 영어만(한영키X)
deactivated 한글모드(한영가능)
auto 자동변경
선언예
자바스크립트 document.form.input1.text.style.imeMode = active;
스타일 <input style='ime-mode:active'>
filter 필터효과
shadow(속성=값,...) 그림자,color,direction(방향)
glow() 입체,color,strength(강도)
blur() 번짐,color,strength
alpha() 불투명,opacity(불투명도,%),finishopacity(증감의 끝 불투명도),style(1:단일,2:선형,3:사각형)
text-overflow block 객체의 밖으로 출력된 텍스트의 표현 방식을 결정
text-overflow-mode, text-overflow-ellipsis 의 단축 모드
강제 설정 방법 : white-space 값을 nowrap 설정 또는 <NOBR>태그로 감싸야함.
객체가 좁거나 단어가 길어 줄바꿈 기회가 없으면 nowrap에 적용전에 이루어짐
넘처흐름 설정 방법 : visible 이외의 값으로 설정
overflow를 hidden 또는 scroll,auto(스크롤) 설정
cilp 기본값, 밖으로 나온 내용을 단순 절삭
ellipsis 밖으로 나온 글을 잘라내고 마지막 부분을 ... 으로 출력
text-overflow-mode block 객체의 길이보다 텍스트가 길면 이하의 값을 정해 줄 수 있음
clip 기본, 단순 잘라냄
ellipsis text-overflow-ellipsis 속성에서 정한 텍스트를 표시, 기본값은 "..."
ellipsis-word ellipsis 와 비슷하지만 문자가 아니라 문자열 단위로 자름
text-overflow-ellipsis text-overflow-mode 값이 ellipsis 일때 들어갈 문자를 정함
url 마지막 부분에 들어갈 이미지 지정
"문자열" 마지막 부분에 들어갈 문자 지정
inherit 문자 지정을 하며 ellipsis-end와 ellipsis-after 동시 표기시 after만 표현
word-wrap 객체의 밖으로 텍스트가 출력되면 줄바꿈을 하여 표현하도록함
normar 기본값, 글자가 밖으로 표출
break-word 글자가 객체를 벗어나면 강제로 줄바꿈하여 객체 안쪽에 출력
white-space 객체에서 공백문자들을 표시 방법을 설정 할 수 있음
normal 기본값, 줄바꿈 유지
pre 문서 소스에 서식을 할당해서 표시
nowrap 요소 내에서 줄바꿈 방지
float block 객체의 정렬 위치를 결정
align은 객체안의 정렬 모드를 결정하지만 float은 자식의 위치를 결정
left, right, none
###############################################################################################
###############################################################################################
###############################################################################################
Explorer 전용 스타일
이미지 확대 축소
zoom %
스크롤바 속성
scrollbar-arrow-color 화살표 색
scrollbar-face-color 표면의 색
scrollbar-3dlight-color 외곽 좌측과 위
scrollbar-darkshadow-color 외곽 우측과 아래
scrollbar-highlight-color 안쪽 좌측과 위
scrollbar-shadow-color 안쪽 우측과 위
scrollbar-track-color 바닥
IME-모드
active 한글 먼저 입력
inactive 영문 먼저 입력
disabled 영문만 입력
auto 현재 한영키 상태에 맞춤
Explorer 필터 filter:필더(속성:속성값, 속성=속성값); , *표시 크기 속성이 정해진 Box, 레이어만 적용
alpha() * 투명화
opacity 불투명도 시작점, %
finishOpacity 불투명도 끝점, %
startX 효과 시작 X축
startY 효과 시작 Y축
finishX 효과 끝 X축
finishY 효과 끝 Y축
style 필터 종류, 0~3(균일, 선형, 원형, 장방형)
enabled 적용 여부
blur() * 번짐
add 원본과 변형본의 합성 여부
strength 적용 픽셀 수
direction 번짐 방향
enabled 적용 여부
chroma() 특정색 투명화
color, enabled
dropshadow() 그림자효과
color,offX,offY,positive
flipH() * 좌우반전
flipV() * 상하반전
glow() * 특정색으로 주변을 밝힘
color, strength, enabled
gray() 흑백이미지
invert() * 색 반전
light() 서치라이트효과(자바스크립트전용)
mask() * 글씨를 제외한 부분 특정색으로 칠
color, enabled
shadow() * 자연스런 그림자효과
color, direction, enabled
wave() 휘어짐효과
add, freq, lightstrength, strength, enabled
xray() * 필름 효과
blendtrans() 장면전환, 색,이미지 점진적 교체(자바스크립트전용), <META>테그 이용
revealtrans() 장면전환, 24개의 변환 효과(자바스크립트전용), <META>테그 이용
###############################################################################################
###############################################################################################
###############################################################################################
자바스크립트
###############################################################################################
내부 선언
<SCRIPT language="javascript"></SCRIPT>
외부 파일
<SCRIPT language="javascript" src="파일명"></SCRIPT>
이벤트 핸들러 속성
onClick="alert('버튼을 클릭 했습니다.')"
URL을 바꾸는 속성="javascript:함수호출()"
<A href="javascript:함수(); return false">링크</A>
주의
<script type="text/javascript">
<script language="javascript">
<script>
자바스크립트로 이벤트 적용 방법
addEventListener(표준), attachEvent(IE)
addEventListener("on을 제외한 이벤트 이름", 함수, 버블링여부)
document.getElementById("tagname").addEventListener("click",myfunction,false);
document.getElementById("tagname").attachEvent("onclick",myfunction);
###############################################################################################
예약어
abstract boolean break byte case catch
char class const continue default do
double else extends false final finally
float for function goto if implements
import in instanceof int interface long
native new null package private prodecte
public return short static super switch
synchronized this throw throws transient true
try var void while with
###############################################################################################
배열명.length 배열의 길이
!== 자료형까지 다른지 비교
=== 자료형까지 같은지 비교
###############################################################################################
명령어
typeof 데이터형을 나타냄, "Number", "String", "Boolean", "Object", "Function", "undefined"
constructor
instanceof 어느클래스의 인스턴스냐 하는 것, Array, Object, Number...
typeof는 모든 객체를 6개로 구분지어 반환할 뿐 자세한 타입은 구별해주지 않음
typeof는 new Date(),new Array(),{},new User() 등도 단지 'object '로 반환
세분화를 위해서는 constructor와 instanceof를 사용해야함
모든 객체에는 constructor 프로퍼티가 있으며, instanceof는 객체가 해당 함수에서 생성된 것인지 알려줌
브라우저의 엔진에 따라 조금씩 차이를 보이는 constructor와 instanceof 값이라 살짝 사용에 조심을 요하지만,
보통 비교할때는 사용자가 생성한 함수에서 만들어낸 객체의 타입의 동일 여부를 비교한다거나,
내장 객체와의 비교시에는 typeof로 먼저 object인지 확인한 뒤 constructor로 확인사살(?) 한다면 좀더 정확한 형을 구분해낼 수 있겠다.
주의 : onstructor와 instanceof 객체는 브라우저 자바스크립트 엔진에 따라 다른 결과를 낼 수 있음
예를 들면, HTMLElement 는 크롬과 파이어폭스에는 있지만, IE에는 없다.(IE도 8 이전 버전에는 단순히 태그는 object 취급이다.)
따라서 IE에서
document.getElementById("div_ele") instanceof HTMLElement
는 오류를 발생시킨다. IE에는 HTMLElement 가 없기 때문이다.
document.getElementById("div_ele") instanceof HTMLDivElement
혹은
document.getElementById("div_ele") instanceof Element
라고 써줘야 한다.
하지만 파이어폭스나 크롬은 위 둘중 어느것으로 해도 모두 true를 반환한다.
Element는 IE8, 크롬, 파이어폭스 공통으로 적용되는 모든 엘리먼트의 슈퍼 객체가 된다고 볼 수 있고,
HTMLElement는 파이어폭스나 크롬에서 적용되는 모든 엘리먼트의 슈퍼 객체가 된다고 볼 수 있다.
문자열
구분 constructor typeof instanceof String instanceof Object
"hello" String string false false
new String("hello") String object true true
리터럴로 생성한 문자열은 constructor 가 String이고 typeof도 String이지만 instanceof 결과는 String, Object 둘다 false이다.
하지만 생성자 문자열은 typeof가 object이며, instanceof의 값도 두 경우 모두 true가 된다. 함수로부터 생성된 객체의 속성을 모두 가지고 있는 셈이다.
숫자
구분 constructor typeof instanceof Number instanceof Number
1 Number number false false
new Number(1) Number object true true
내장 객체 (대표로 Array를 사용하였다)
구분 constructor typeof instanceof Function instanceof Object
Array Function function true true
new Array() Array object false true
Array는 Function이고, Object이지만 Array constructor는 아니다.
하지만 new Array()로 생성된 객체는 Object이며 constructor로 Array를 가진다. 하지만 Function은 아니다.
글로벌 객체 (브라우저에서는 window 객체)
브라우저 구분 constructor typeof instanceof Window instanceof Object instanceof Function
IE8 Window object true false (*) false
파이어폭스 Window object true true false
크롬 DOMWindow object false (*) true false
정말 브라우저별로 제멋대로이다.
IE8에서는 글로벌 객체의 instanceof Object는 false이다. 하지만 typeof는 object...
크롬은 글로벌 객체의 constructor는 DOMWindow라는 함수객체이다. 따라서 instanceof Window의 값은 false가 된다.
사용자 생성 객체
임의의 생성자 함수 function User(){}과, 객체 리터럴인 {}가 있다고 가정. constructor 속성의 차이가 있다
구분 constructor typeof instanceof Object instanceof Function
new User() User object true false
{} Object object true false
document 객체
대체로 비슷하나, IE에서는 document 객체의 instanceof 값이 false이다. 이상한 해석이다;
브라우저 구분 constructor typeof instanceof HTMLDocument instanceof Object instanceof Function
IE8 HTMLDocument object true false (*) false
파이어폭스 HTMLDocument object true true false
크롬 HTMLDocument object true true false
Element 객체 (div 참조라고 가정하겠다)
IE는 HTMLElement객체는 존재하지 않고 그냥 Element 하나이지만 파이어폭스와 크롬은 Element도 있고 HTMLElement도 있다
브라우저 구분 constructor typeof instanceof Object instanceof Element instanceof HTMLElement
IE8 HTMLDivElement object true true false
파이어폭스 HTMLDivElement object true true true
크롬 HTMLDivElement object true true true
undefined, null
null은 typeof 값이 object. undfined는 undefined이다. 둘다 constructor 값은 구할 수 없다. 그리고 instanceof의 값은 전부 false이다. 어느 객체도 아니라는 것이다
구분 constructor typeof instanceof Function instanceof Object
undefined 오류 undefined false false
null 오류 object false false
내장 함수
eval(string) 숫자 형태의 문자를 숫자로 바꾸어 연산까지함, 함수도 실행가능
escape(string) non-ASCII을 UTF-8로 변환, +, 공백(space) 모두 공백으로 처리하는 문제가 있어서 non-ASCII를 정확하게 처리하지 못함.
처리 못하는 문자 : @*/+
encodeURI(string) 외따옴표(')는 URI에서 valid한 문자로 사용하기 때문에 처리하지 못함
처리 못하는 문자 : ~!@#$&*()=:/,;?+'
encodeURIComponent() 외따옴표(')는 URI에서 valid한 문자로 사용하기 때문에 처리하지 못하지만 대부분의 경우 URI를 인코딩 할 때 사용
처리 못하는 문자 : ~!*()'
unescape(code) UTF-8를 non-ASCII로 변환
decodeURI() encodeURI() 반대로 변환
decodeURIComponent() encodeURIComponent() 반대로 변환
isNaN(num) 숫자로 변환 불가능(Not a Number) 이면 true, 숫자나 숫자로 변환가능한 문자열이면 false
isFinite(num) 숫자형이면 true를 반환한다.
parseInt(string, 진수) 숫자로 반환, 진수를 정의("09"와 같은 형태의 숫자는 8진수 0으로 반환을 방지)
parseFloat(string, 진수) 숫자로 반환
escape(encodeURIComponent()) 한글처리를 위한 방법, jsp에서 받을때 java.net.URLDecoder.decode(request.getParameter(""), "UTF-8");
객체 함수(XML, Node)
window 최상위 객체, 생략가능
alert()
confirm()
prompt()
Document 작업중인 문서를 의미하는 가상 객체
write() 화면에 HTML로 작성된 내용을 모두 지우고 ()안에 입력된 내용을 출력한다.
this.변수명 추상화,함수가 실행된 뒤에도 메모리에 남아있어 다시 불러올 수 있다.
함수["변수"] 함수내 변수값을 불러오는 방법, 함수.변수 와 같은 효과
함수.새변수=값 함수에 변수를 임시적으로 추가
함수.prototype.새변수=값 함수에 변수를 영구적으로 추가
innerHTML 지정된 개체의 내부 HTML 태그 및 문자열을 지정하거나 반환한다.
*표는 Ex 5.5, Net 6.0 이상 지원
Node 관련 프로퍼티 설명 (도큐먼트 탐색기능)
firstChild 요소의 첫번째 자식 노드를 반환
lastChild 요소의 마지막 자식 노드를 반환
previousSibling 어떤 요소에서 현재 자식 노드와 같은 수준에 있는 이전 자식 노드를 반환
nextSibling 어떤 요소에서 현재 자식 노드와 같은 수준에 있는 다음 자식 노드를 반환
ownerDocument 노드를 포함하고 있는 도큐먼트의 루트 노드를 반환
parentNode 트리 구조에서 현재 노드를 포함하고 있는 요소를 반환
nodeNameⓝ 노드의 이름을 반환
nodeTypeⓝ 노드의 형식을 숫자로 반환
nodeValue 노드의 값을 평범한 텍스트의 형태로 설정
contentType 문서의 형식(파일명)을 반환(html, text, ...)
characterSet 기본 문자셋(EUC-KR)
documentElement* DOM을 구성하는 최상위 Element(<html>, XML루트)
parentWindowⓔ Document 객체를 포함하고 있는 윈도우 객체
attributes 엘리먼트의 애트리뷰트 리스트를 리턴
childNode 자식을 리턴
Node 개체의 메서드 설명 (도큐먼트에 요소 추가, 제거)
appendChild(new node) 자식 노드의 목록의 끝에 새로운 node 개체를 추가한다.
appendData(text) 제공한 텍스트를 텍스트 노드의 기존 텍스트 끝에 추가
cloneNode(child option) 인자로 제공한 node 개체와 똑같은 새로운 node 개체를 만든다. 이때 선택사항으로 모든 자식 노드를 포함할 수도 있다.
createAttribute(attributeName)* 매개변수 문자열을 Attribute_Node로 생성
createComment()* 매개변수 문자열을 Comment_Node롤 생성
createElement(elementName) 해당되는 이름으로 엘리먼트를 생성, "div" 또는 "<div id='aa'></div>"
createTextNode() 지정된 문자열 값을 가지는 텍스트 엘리먼트를 생성한다.
getAttribute(a) a라는 애트리뷰트의 값을 리턴
getAttributeNode(a) a라는 애트리뷰트 노드를 리턴
getElementsByTagName(eleName) eleName 이름을 가진 엘리먼트 노드의 리스트를 리턴
getElementById(id) node id 값을 가진 객체를 리턴, id는 사용 불가
hasChildNodes() 어떤 노드가 자식 노드를 가지고 있을 경우 true를 반환한다.
insertBefore(new node, current node) 자식 노드의 목록에서 현재 노드로 지정한 노드 앞에 새로운 node 개체를 추가한다.
insertData(idx, text) 텍스트 노드의 중간에 텍스트를 추가할 수가 있음. idx의 위치에 text 삽입
removeAttribute(a) a라는 애트리뷰트를 제거
removeAttributeNode(a) 제공된 노드와 매치되는 애트리뷰트 노드를 제거
removeChild(child node) node 개체의 자식 노드 목록에서 하나의 자식 노드를 제거한다.
removeNode(true)
replaceChild(new child, old child) 예전 자식 node 개체를 새로운 자식 node 개체로 바꾼다.
replaceData(idx, len, text) 지정된 위치부터 시작하여 len 길이만큼의 문자를 제거하고 text 로 대치
setAttribute(a,v) a라는 애트리뷰트를 생성하고 v의 값을 설정
style 다른방법으로 적용(style.cssText = 'width:100;')
createElement로 생성한 경우에는 IE에서 style이 적용되지 않는 경우가 있으므로 setAttribute를 사용
Ajax
responseXML XML문서를 받을때 <?xml version='1.0' encoding='utf-8'?> 제거해야됨.
responseTEXT
###############################################################################################
Location 객체
속성
hash : 문서의 표식이름을 알려줍니다
host : 도메인 이름을 포함한 호스트의 주소와 포트번호를 알려줍니다
hostname : 문서의 URL 주소중에 호스트 이름을 알려줍니다
href : 문서의 URL 주소를 알려주거나 특정(지정한) URL로 이동합니다
이 속성에 URL 을 지정하여 지정 사이트로 이동하게 되죠
그러나 이속성은 temp에 저장된 문서를 로딩할 가능성이 있습니다
path : 문서의 디렉토리 위치를 설정하거나 알아냅니다
protocol : 프로토콜 종류를 설정하거나 알아냅니다
메서드
reload(true) : 브라우저가 현재 문서를 다시 로드합니다
replace("특정 URL") : 현제 문서를 지정한 특정 URL로 이동합니다
###############################################################################################
Object 객체
prototype 객체의 원형
constructor 생성자 함수를 출력
toString() 문자열로 반환
valueOf() object형으로 반환
Array 객체 ⓝ 네스케이프, ⑥ Explorer 5.5 이후, * RegExp 객체 참조
length
index *
input *
lastIndex*
prototype
concat(a1 [,a2])
join([구분자])
pop() ⑥
push(요소[,...]) ⑥
reverse()
shitf() ⑥
slice(start[,end]) ⑥
sort()
splice(start, n) ⑥
toSource() ⓝ
toString()
unshitf(요소[,...]) ⑥
valueOf()
선언
var empty = []; //빈배열
var empty = new Array(); //빈배열
var a = [1,'abc',new Date(),['x','y'],true]; //여러형태저장
var intArr = [1,2,3,4,5]; //숫자배열
var mixArr = [1,2,100,"abc"]; //서로다른 타입이 섞인 배열
var table = [base,base+1,base+2]; //임의 수식이 있는 배열
var objArr = [[1,{x:1,y:2},[2,3]]; //객체 리터럴이나 또 다른 배열 리터럴을 포함하는 배열
배열을 스택처럼 다루기
Array.shift(); // 배열의 첫 번째 원소 삭제
Array.unshift(); // 배열의 첫 번째 원소 추가
Array.push(); // 배열의 마지막 원소 추가
Array.pop(); // 배열의 마지막 원소 삭제
배열을 자르고 변경하고
slice() 배열내 배열 추출
var testArr = ['a', 'b', 'c', 'd' ];
document.write( testArr.slice(1) ); // ['b', 'c', 'd']
document.write( testArr.slice(1,3) ); // ['c', 'd'] -> 마지막 인덱스는 결과값에 포함되지 않는다.
concat() 두 개의 Array를 합쳐서 하나의 Array로 리턴한다
var alpha = ['a', 'b']
var alpha2 = ['c', 'd', 'e']
var str = alpha.concat( alpha2 );
document.write(str); // ['a', 'b', 'c', 'd', 'e']
splice()
Array.splice(위치,삭제갯수,삽입요소1,삽입요소2,.....,삽입요소N)
var arr=["하나","둘","셋","넷"]
arr.splice(2,1,"둘반","둘반의반");
arr=>["하나","둘","둘반","둘반의반","넷"]
join() 열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환,전달자로 구분자
var a = [1,2,3];
var s = a.join();
document.write(s);//"1,2,3";
Boolean 객체
prototype
constructor
toSource() ⓝ
toString()
valueOf()
Date 객체 시스템 날짜,시간, 1/1000초, 1970.1.1 00:00:00 기준
Date(1/1000초) 기준시로 부터 경과 시간
Date("월 일, 년 [시:분:초]") 입력 시간 객체화
Date(년,월,일[,시:분,초,1/1000초]) 입력 시간 객체화
parse(month 일, 연[,시,분,초]) ⓢ 기준시부터 경과 시간
UTC(연,월,일[,시,분,초]) 기준시부터 경과 시간
toLocaleString() Locale 시간의 문자열로 변환
toGMTString() GMT를 문자열로 리턴
toUTCString() 우주시간으로 리턴
toString() 문자열로 반환
valueOf() 기준시부터 객체가 만들어진 시간을 리턴
get,set 메소드
Year(연도)
FullYear(연도[,월,일])
Month(월[,일])
Date(일)
Day(요일)
Hours(시) setHours 사용 주의 : local(GMT +9,한국)시간을 UTC으로 변환되어 -9시간 해주기 때문에 날짜가 설정한 시간에 따라 하루전으로 바뀔수 있음
예) local 2000.1.10 8시로 설정시 UTC로 2000.1.9 23시로 변함, 따라서 0시로 설정하면 2000.1.9일이
회피 방법 : 처음부터 UTC 시간으로 설정 new Date(Date.UTC(2000,1,9,0))
Minutes(분)
Seconds(초)
Time(밀리초)
Milliseconds(1/1000초)
UTCDate(일)
UTCDay(요일)
UTCFullYear(연[,월,일])
UTCHours(시,[분,초])
UTCMilliseconds(1/1000초)
UTCMinutes(분[,초])
UTCMonth(월[,일])
UTCSeconds(초[,1/100초])
Function 객체
arguments 함수에 전달된 argument를 모두 포함하는 배열, 함수 내부용
arity ⓝ 함수에 선언된 arguments의 수
length 함수에 선언된 arguments의 수
prototype 생성자 함수에 새로운 프로퍼티 추가
constructor 생성자함수
apply() 생성자함수 안에서 다른 객체의 생성자함수 호출, 자신 객체와 arguments 배열 전달
call() 생성자함수 안에서 다른 객체의 생성자함수 호출, 자신 객체와 변수 전달
toString() Function 객체를 문자열로 리턴
Argument 객체
length 함수에 실제 전달된 매개변수의 수
arguments[index] 실제로 전달한 매개변수 배열
Math 객체
수학적인 계산을 하는데 필요한 함수나 상구 값을 제공
E 자연 로그 밑에 사용되는 오일러 상수 값
LN10 밑수가 10인 상용로그 값인 2.302을 의미
LN2 밑수가 2인 자연로그 값인 0.693을 의미
LOG10E
LOG2E
PI 원주율인 3.14159를 의미
SQRT1_2 0.5의 제곱근 값인 0.707을 의미
SQRT2 2의 제곱근 값인 1.414을 의미
abs(x) x의 절대값
acos(x) 아크 코사인 값
asin(x) 아크 사인 값
atan(x) 아크 탄젠트 값
atan2(x, y)
ceil(x) 올림, x보다 같거나 큰 정수중 가장 작은 정수 값
cos(x) 코사인 값
exp(x) E의 x승
floor(x) 내림, x보다 같거나 적은 정수 중 가장 큰 정수 값
log(x) 로그 함수
max(x, y,...) x,y중 큰 수
min(x, y,...) x,y중 작은 수
pow(x, y) x의 y승
random() 0에서 1사이의 난수
round(x) 반올림(ceil,floor)
sin(x) 사인 값
sqrt(x) x의 제곱근
tan(x) 탄젠트 값
Number 객체
MAX_VALUE
MIN_VALUE
NaN
NEGATIVE_INFINITY
POSITIVE_INFINITY
prototype
valueOf()
toString([진수])
String * 객체 fromCharCode(num)는 정적메소드, ⓡ 표시는 매개변수에 정규식이 사용될 수 있는 것
length
prototype
big()
small()
blink()
bold()
fixed()
italics()
Strike()
sub()
sup()
fontcolor("color")
fontsize(숫자)
anchor("name")
link("url")
charAt(index) 지정된 위치에서 문자 찾기
charCodeAt(index)
concat(str) 두 문자열을 합치기
fromCharCode(num)*
indexOf(str) 지정된 문자의 위치를 왼쪽부터 찾기
lastIndexOf(str) 지정된 문자의 위치를 오른쪽부터 찾기
slice(i1, i2)
toLowerCase() 소문자로 변환
toUpperCase() 대문자로 변환
match(str) ⓡ
replace(str, rep) ⓡ
search(str) ⓡ
split("분리자" [,n]) ⓡ
substring(i1,i2) 문자열 인덱스 i1에서 i2까지 잘라냄
substr(i,num) 문자열 인덱스 i1부터 num개를 잘라냄
###############################################################################################
정규식과 RegExp 객체
match(reg) 매치된 결과들의 내용을 Array 객체로 리턴, 없으면 null 리턴
search(reg) 첫 번째 매치되는 문자열의 시작 index 값, 없으면 -1 리턴
replace(reg, rep) 1. 첫 번째 매치된 reg를 rep로 교체하여 리턴
2. g속성이 사용되면 매치된 모든 문자열을 교체하여 바뀐 문자열 전체를 리턴, 없으면 원본 문자열 리턴
split(reg [,n]) 문자열을 reg를 기준으로 잘라서 Array객체로 리턴, 없으면 원본 문자열 리턴
reg.test(String) 문자열과 reg가 검사하여 일치여부를 반환(true, false)
exec(reg) 문자열과 reg가 검사하여 일치여부를 반환(str, null)
정규식 선언
정규식(regexp) var 변수명 = /문자열/;
RegExp객체 var 변수명 = new RegExp("아빠");
속성
global 완전 일치
ignoreCase 대문자 소문자 무시
lastIndex 다음 패턴조회를 시작하는 위치
source 조회시킬 패턴
input 검색 문자열의 설정, 변경($_로도 가능)
multiline 줄바구기 코드를 무시할지 여부($_로도 가능), 참(무시하지 않는다), 거짓(무시한다.)로 설정
lastMatch 패턴 조회한 최후의 문자($&로도 가능)
lastParen 패턴 조회한 최후의 substring($+로도 가능)
leftContext 패턴 조회한 값의 앞의 문자($￥Q로도 가능)
rightContext 패턴 조회한 값의 다음 문자($'로도 가능)
$1~$9 패턴 조회한 것의 일부를 저장한다.(9개까지)
i 대소문자 무시
g 전역검색
m 여러 줄에 대한 검색
s 토드(.)문자가 개행문자와 일치, dotall
m 캐럿(^) 문자와 달러 기호($)가 이전 및 이후 개행 문자와 일치, multiline
x 문자열의 공백 문자가 무시 되므로 가독성이 높은 생성자를 작성, extended
flags 문자열의 다른 문자는 모두 무시
한글 정규식
[\uac00-\ud7a3] 0xAC00~0xD7A3 초중종성이 모인 한글자
[\u3131-\u318E] 0x3131~0x318E 자음, 모음
[가-힣]
문자
알파벳, 한글 문자 그대로
숫자 숫자 그래도
/n 8진수 n에 해당하는 ASCII
/xn 16진수 n에 해당하는 ASCII
/un n은 16진수로 표현된 4자리의 숫자로서 해당 Unicode 문자
\f 폼피드 \| |
\n 줄 바꿈 \* *
\r 캐리지 \+ +
\t 탭 \? ?
\v 수직 탭 \( (
[\b] Backspace \) )
\cX 컨트롤 \[ [
\/ / \] ]
\\ \ \{ {
\. . \} }
!#%&@`:;-.<>,~'" 단독 사용 가능 문자
[*],[+],[$],[|] []을 사용해야되는 문자
메타문자
[] [abc] a,b,c 중 하나의 문자와 매치
[^] [^abc] a,b,c 제외한 임의의 한 문자와 매치
{} {} 앞에 있는 항목에 반복될 때 반복횟수를 지정
() 여러 항목을 묶어서 단일 단위로 사용할 수 있도록 하는 것
| a|b 는 a나 b중에 하나와 매치된다.
\num 정규식의 부분표현식에서 num 번째의 부분표현식을 참조
\b 단어와 단어 사이의 경계에 매치되어 해당 단어만을 정확하게 매치
\B 단어의 경계가 아닌 단어의 위치에 매치
\d 0~9까지의 숫자 중에 하나와 매치
\D 0~9 제외한 임의의 문자에 매치
\s 임의의 공백문자(\t, \n, \r, \f, \v)에 매치
\S 공백문자가 아닌 임의의 한 문자에 매치
\w 알파벳과 숫자에 매치되는 임의의 한 문자(알파벳과 \d)
\W 알파벳과 숫자가 아닌 임의의 한 문자
^ 문자열 행의 시작부분과 매치
$ 문자열 행의 끝부분과 매치
. 줄 바꿈 문자(\n)을 제외한 "모든 문자" 하나에 매치
? 앞에 있는 항목과 1회 이하로 매치
+ 앞에 있는 항목과 1회 이상 매치
* 앞에 있는 항목과 0회 이상 매치
단축 문자
. [^\n] 줄 바꿈 문자 \n을 제외한 모든 문자를 의미
\w [a-zA-Z0-9] 알파벳과 숫자에 매치
\W [^a-zA-Z0-9] 알파벳과 숫자를 제외한 모든 문자에 매치
\s [\t\n\r\f\v] 임의의 공백문자(공백을 의미하지만 출력되는 않는문자들)
\S [^\t\n\r\f\v] 공백을 제외한 모든 문자의 매치
\d [0-9] 모든 숫자에 매치되는 문자클래스 /[0123456789]/
\D [^0-9] 숫자를 제외한 모든 문자와 매치
반복 문자
{n} c{n}의 경우 c가 n만큼 반복되는 문자열과 매치
{n,} c{n,}의 경우 c가 n번 이상 반복되는 문자열과 매치
{n,m} c{n,m}의 경우 c가 n번에서 m번만큼 반복되는 문자열과 매치
? c?는 c가 1회 이상인 문자열에 매치되는 메타문자, c{0,1}과 같다
+ c+는 c가 1회 이상인 문자열에 매치되는 메타문자, c{1,}과 같다
* c*는 c가 0회 이상인 문자열에 매치되는 메타문자, c{0,}과 같다
RegExp 객체 * 표시는 static 프로퍼티, ⓔ Explorer 전용, ⓝ Netscape 전용
regexp = new RegExp("정규식 문자열");
regexp = new RegExp("정규식 문자열", 속성);
constructor
global
ignoreCase
lastIndex
multipleline
source
input *
leftContext *
lastMatch *
multline *
rightContext *
lastParen *
$n *
index * ⓔ
lastIndex * ⓔ
complie("식","속성")
exec(str)
test(str) 입력된 문자열이 정규 표현식에 부합하는지 검사
toSource() ⓝ
toString()
예제
var pattern = /[^(가-힣ㄱ-ㅎㅏ-ㅣa-zA-Z0-9)]/gi; //특수문자찾기
[^\w\s가-힣ㄱ-ㅎㅏ-ㅣ!#%&@`:;.<>,~'"*+$|=^\?\(\)\[\]\{\}\-\/\\] //깨진 문자 찾기
var ch1 = /[^0-9]/g; //new RegExp("[^0-9]", "g")
var ch2 = /[^\uac00-\ud7a3\u3131-\u318E]/g;
var ch3 = /^[a-z0-9_]{3,12}$/; //정규식(영문,숫자 그리고 3자~12자)
var ch4 = /^\d{2,4}\/\d{2}\/\d{2}$/ //2010/04/11 형태만 가능하게
var ch5 = /^\w{3,10}/@/\w{3.10}\.\w{3,6}$/ //이메일 형태 정규식
"동해물과 백두산이123".replace(ch1,""); //결과 : 123
if(!ch3.test(str)){ //str 값이 정규식에 맞다면 true를 반환
alert("아이디는 3~12자의 영문 소문자와 숫자,특수기호(_)만 사용할 수 있습니다.");
return false;
}
/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; //메일 체크 정규식
/^\d{3}-\d{3,4}-\d{4}$/; //핸드폰번호 정규식
/^\d{2,3}-\d{3,4}-\d{4}$/; //일반 전화번호 정규식
/^[a-z0-9_]{4,20}$/; //아이디나 비밀번호 정규식
var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
if ( !regExp.test( document.frm.hp.value ) ) {
alert("잘못된 휴대폰 번호입니다. 숫자, - 를 포함한 숫자만 입력하세요.");
return false
}
주석 제거 : /\/\/.$/
###############################################################################################
HTML 특수문자(HyperText Markup Language Special Character)
- �- - 사용하지 않음
space 	 - 수평탭
space - 줄 삽입
- - - 사용하지 않음
space   - 여백
! ! - 느낌표
" " " 따옴표
# # - 숫자기호
$ $ - 달러
% % - 백분율 기호
& & & Ampersand
' ' - 작은 따옴표
( ( - 왼쪽 괄호
) ) - 오른쪽 괄호
* * - 아스트릭
+ + - 더하기 기호
, , - 쉼표
- - - Hyphen
. . - 마침표
/ / - Solidus (slash)
0-9 0-9 - 0부터 9까지
: : - 콜론
; ; - 세미콜론
< < < 보다 작은
= = - 등호
> > > 보다 큰
? ? - 물음표
@ @ - Commercial at
A-Z A-Z - A부터 Z까지
[ [ - 왼쪽 대괄호
\ \ - 역슬래쉬
] ] - 오른쪽 대괄호
^ ^ - 탈자부호
_ _ - 수평선
` ` - Acute accent
a-z a-z - a부터 z까지
{ { - 왼쪽 중괄호
| | - 수직선
} } - 오른쪽 중괄호
~ ~ - 꼬리표
- -Ÿ - 사용하지 않음
  Non-breaking space
¡ ¡ ¡ 거꾸로된 느낌표
￠ ¢ ¢ 센트 기호
￡ £ £ 파운드
¤ ¤ ¤ 현재 환율
￥ ¥ ¥ 엔
| ¦ ¦ 끊어진 수직선
§ § § 섹션 기호
¨ ¨ ¨ 움라우트
ⓒ © © 저작권
ª ª ª Feminine ordinal
≪ « « 왼쪽 꺾인 괄호
￢ ¬ ¬ 부정
­ ­ Soft hyphen
? ® ® 등록상표
&hibar; ¯ ¯ Macron accent
° ° ° Degree sign
± ± ± Plus or minus
² ² ² Superscript two
³ ³ ³ Superscript three
´ ´ ´ Acute accent
μ µ µ Micro sign (Mu)
¶ ¶ ¶ 문단기호
· · · Middle dot
¸ ¸ ¸ Cedilla
¹ ¹ ¹ Superscript one
º º º Masculine ordinal
≫ » » 오른쪽 꺾인 괄호
¼ ¼ ¼ 4분의 1
½ ½ ½ 2분의 1
¾ ¾ ¾ 4분의 3
¿ ¿ ¿ 거꾸로된 물음표
A À À Capital A, grave accent
A Á Á Capital A, acute accent
A Â Â Capital A, circumflex accent
A Ã Ã Capital A, tilde
A Ä Ä Capital A, dieresis or umlaut mark
A Å Å Capital A, ring (Angstrom)
Æ Æ Æ Capital AE diphthong (ligature)
C Ç Ç Capital C, cedilla
E È È Capital E, grave accent
E É É Capital E, acute accent
E Ê Ê Capital E, circumflex accent
E Ë Ë Capital E, dieresis or umlaut mark
I Ì Ì Capital I, grave accent
I Í Í Capital I, acute accent
I Î Î Capital I, circumflex accent
I Ï Ï Capital I, dieresis or umlaut mark
Ð Ð Ð Capital Eth, Icelandic
N Ñ Ñ Capital N, tilde
O Ò Ò Capital O, grave accent
O Ó Ó Capital O, acute accent
O Ô Ô Capital O, circumflex accent
O Õ Õ Capital O, tilde
O Ö Ö Capital O, dieresis or umlaut mark
× × × Multiply sign
Ø Ø Ø width="130"Capital O, slash
U Ù Ù Capital U, grave accent
U Ú Ú Capital U, acute accent
U Û Û Capital U, circumflex accent
U Ü Ü Capital U, dieresis or umlaut mark
Y Ý Ý Capital Y, acute accent
Þ Þ Þ Capital Thorn, Icelandic
ß ß ß Small sharp s, German (sz ligature)
a à à Small a, grave accent
a á á Small a, acute accent
a â â Small a, circumflex accent
a ã ã Small a, tilde
a ä ä Small a, dieresis or umlaut mark
a å å Small a, ring
æ æ æ Small ae diphthong (ligature)
c ç ç Small c, cedilla
e è è Small e, grave accent
e é é Small e, acute accent
e ê ê Small e, circumflex accent
e ë ë Small e, dieresis or umlaut mark
i ì ì Small i, grave accent
i í í Small i, acute accent
i î î Small i, circumflex accent
i ï ï Small i, dieresis or umlaut mark
ð ð ð Small eth, Icelandic
n ñ ñ Small n, tilde
o ò ò Small o, grave accent
o ó ó Small o, acute accent
o ô ô Small o, circumflex accent
o õ õ Small o, tilde
o ö ö Small o, dieresis or umlaut mark
÷ ÷ ÷ Division sign
ø ø ø Small o, slash
u ù ù Small u, grave accent
u ú ú Small u, acute accent
u û û Small u, circumflex accent
u ü ü Small u, dieresis or umlaut mark
y ý ý Small y, acute accent
þ þ þ Small thorn, Icelandic
y ÿ ÿ Small y, dieresis or umlaut mark
###############################################################################################
###############################################################################################
###############################################################################################
HTMLElement 객체의 프로퍼티
all ⓔ
align ⓔ
className
children ⓔ
clientHeight
clienLeft ⓔ
clientTop ⓔ
clientWidth ⓔ
dir
disabled
id
innerHTML
innerText ⓔ
outerText ⓔ
outerHTML ⓔ
style
background borderRightStyle fontVariant paddingLeft
backgroundAttachment borderRightWidht fontWeight paddingRight
backgroundColor borderStyle height paddingTop
backgroundImage borderTop left position
backgroundPosition borderTopColor letterSpacing right
backgroundRepeat borderTopStyle lineHeight textAlign
border borderTopWidth listStyle textIndent
borderBottom borderWidth listStyleImage textTransform
borderBottomColor bottom listStylePosition top
borderBottomStyle clear listStyleType verticalAlign
borderBottomWidth clip margin visibility
borderColor color marginBottom witeSpace
borderLeft cursor marginLeft width
borderLeftColor display marginRight wordBreak
borderLeftStyle font marginTop wordSpacing
borderLeftWidth fontFamliy overflow zIndex
borderRight fontSize padding zoom ⓔ
borderRightColor fontStyle paddingBottom filter ⓔ
tagName
this
title
sourceIndex ⓔ
parentElement ⓔ
offsetParent
offsetHeight
offsetWidth
offsetLeft
offsetTop
readyState ⓔ
scrollHeight ⓔ
scrollWidth ⓔ
scrollLeft ⓔ
scrollTop ⓔ
컬렉션(Collection)
all ⓔ
all[index] HTMLElement 객체의 sourceIndex 프로퍼티를 사용
all["name"] name속성을 가지는 태그의 이름을 통해서 참조, all("name"), all.name
all["ID"] ID속성을 가지고 있는 HTMLElement 객체를 참조
length 해당 객체에 포함된 모든 HTMLElement 객체의 수
tags() 매개변수로 입력된 태그와 같은 모든 HTMLElement 객체의 배열
applets
anchors
cells ⓔ
children ⓔ
childNodes
elements
embeds
images
filters ⓔ
frames
links
options
plugins
scripts
stylesheets
name 속성을 가지는 태그
document.Collection[index]
document.Collection["name"]
document.name
document.all["Name"] ⓔ
document.all.Name ⓔ
ID 속성을 사용한 태그
document.getElementByld("IdName")
documnet.all["IdName"] ⓔ
Idname ⓔ
this 키워드 사용
<태그 on이벤트="this.프로퍼티=값"></태그>
###############################################################################################
###############################################################################################
###############################################################################################
이벤트의 종류 * : Explorer 5.5 이상, ⓔ : Explorer 전용
Abort
BeforeCopy
BeforeCut
BeforePaste
AfterPrint ⓔ
BeforePrint ⓔ
BeforeUnload ⓔ
Blur
Change
Checkbox,FileUpload, Password,
Radio, Select, Text, Textarea
Click
ContextMenu
Copy
Cut
DblClick
Drag ⓔ
DragStart ⓔ
DragEnter ⓔ
DragOver ⓔ
DragLeave ⓔ
DragEnd ⓔ
Drop ⓔ
Error
Focus
KeyDown
KeyPress
KeyUp
Load
Mousedown
MouseEnter *
MouseLeave *
MouseMove
MouseOut
MouseOver
MouseUp
MouseWheel ⓔ
Move
Paste
Reset
Resize
Scroll
Select
SelectStart ⓔ
Submit
Unload
Explorer Event 객체
altKey
altLeft
button 마우스 0,1,2(좌,중,우) ,브라우저 마다 값이 다름
cancelBubble true : 이벤트를 막기(버블링용)
stopPropagation() FF용
clientX, clientY
ctrlKey
ctrlLeft
dataTransfer
fromElement
keyCode
숫자 48~57
영문(대,소) (65~90,97~122)
특수키
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
page down 34
end 35
home 36
left arrow,up,right,down(←,↑,→,↓) 37~40
insert 45
delete 46
left window key 91
right window key 92
select key 93
numpad 0~9 96~105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1~f12 112~123
num lock 144
scroll lock 145
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 222
offsetX, offsetY
propertyName
qualifier
reason
repeat
returnValue false : 이벤트 취소(키 입력 막기), FF용 : preventDefault()
onclick
oncontextmenu
oncopy
oncut
ondragstart
ondrop
onkeydown
onkeypress
onmouseover
onpaste
onreset
onselectstart
onsubmit
screenX, screenY
shiftKey
shiftLeft
srcElement
toElement
type
x, y
Netscape Event 객체
altKey ⑥
bubbles ⑥
button ⑥
cancelBubble ⑥
clientX,clientY ⑥
currentTarget ⑥
ctrlKey ⑥
data
eventPhase ⑥
keyCode ⑥
layerX, layerY
metaKey ⑥
orginalTarget ⑥
pageX, pageY
rangeOffset
rangeParent
screenX, screenY
shiftKey
target
timeStamp
type
which
width, height
정적 변수들 MOUSEDOWN, MOUSEUP, MOUSEOVER, MOUSEOUT, MOUSEMOVE,
MOUSEDRAG, CLICK, DBLCLICK, KEYDOWN, KEYUP, KEYPRESS, DRAGDROP,
FOCUS, BLUR, SELECT, CHANGE, RESET, SUBMIT, SCROLL, LOAD, UNLOAD,
XFER_DONE, ABORT, ERROR, LOCATE, MOVE, RESIZE, FORWARD, HELP,
BACK, TEXT
정적 modifiers ALT_MASK, CONTROL_MASK, SHIFT_MASK, META_MASK
Event객체 return 값
onclick, oncontetmenu, ondragstart, onkeydown, onkeypress, onmouseover, onreset,
onselectstart, onsubmit
###############################################################################################
###############################################################################################
###############################################################################################
브라우저객체
window
event ⓔ
frames
history
document
all ⓔ
anchors
applets
body
embeds
forms
Button
Checkbox
File
Hidden
Password
Radio
Reset
Select
Submit
Text
Textarea
frames ⓔ
images
links
plugins ⓝ
stylesheets
location
navigator
screen
###############################################################################################
window 객체
프로퍼티 ⒪ : 윈도우의 하위객체
closed
defaultStatus
document ⒪
frames ⒪
history ⒪ * : Read 권한이 있는 Netscape 사용가능
current *
length
next *
previous *
back()
forward()
go(num)
toString() *
Image ⒪
length
location ⒪
hash
host
hostname
href
pathname
port
protocol
search
assign(url)
reload(bool)
replace(url)
name
navigator ⒪
opener
Option ⒪
parent
self
screen ⒪
screenLeft ⓔ
screenTop ⓔ
status 상태 표시줄 문자열
top
window
innerHeight ⓝ
innerWidth ⓝ
outerHeight ⓝ
ourerWidth ⓝ
pageXOffset ⓝ
pageYOffset ⓝ
Netscape 메뉴들 ⓝ locationvar, menubar, personalbar, scrollbar, statusbar, toolbar 프로퍼티는
Netscape에서 각각의 항목을 보여줄 것인지를 설정하는 Boolean 값
Explorer 메뉴들 Explorer의 윈도우 메뉴들은 open() 메소드에 의해서 설정된다.
메소드
alert(string)
blur()
clearInterval(mark)
clearTimeout(mark)
close()
confirm(string)
focus()
moveBy(x, y)
moveTo(x, y)
open(["f","n","o"])
directories
fullscreen ⓔ
height
width
left
top
location
menubar
resizable
scrollbars
status
toolbar
innerHeight ⓝ
innerWidth ⓝ
outerHeight ⓝ
outerWidth ⓝ
screenX ⓝ
screenY ⓝ
resizeBy(x, y)
resizeTo(x, y)
scrollBy(x, y)
scrollTo(x, y)
setInterval("f()", t)
setTimeout("f()", t)
navigator("URL") ⓔ
appCodeName Mozilla,
appName Netscape, navigator.appName.indexOf("Microsoft")
appVersion 5.0 (Linux; U; Android 2.1-update1; ko-kr; XT720 Build/STSKT_N_79.11.36R1) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17,
browserLanguage ⓔ
cookieEnabled
cpuClass ⓔ
language ⓝ
mimeTypes ⓝ
oscpu ⓝ
platform Linux armv7l
plugins ⓝ
systemLanuage ⓔ
userAgent Mozilla/5.0 (Linux; U; Android 2.1-update1; ko-kr; XT720 Build/STSKT_N_79.11.36R1) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
userLanguage ⓔ
userProfile ⓔ
vendor ⓝ
vendorSub ⓝ
javaEnabled()
showModalDialog() ⓔ
dialogLeft, dialogTop, dialogWidth, dialogHeight, center,
edge, help, resizable, scroll, status
showModelessDialog() ⓔ
back() ⓝ
forward() ⓝ
find() ⓝ
home() ⓝ
stop() ⓝ
captureEvents() ⓝ
releaseEvents() ⓝ
이벤트 핸들러
onbeforeunload ⓔ
onblur
onerror
onfocus
onload
onmove
onresize
onscroll ⓔ
onunload
###############################################################################################
Document 객체
프로퍼티
alinkColor
bgColor
fgColor
linkColor
vlinkColor
characterSet ⓝ
cookie
영구쿠키 옵션 : expires, path, domain, secure
charset
defaultCharset ⓔ
domain
fileSize ⓔ
fileCreateDate ⓔ
fileModifiedDate ⓔ
lastModefied
location
protocol ⓔ
parentWindow ⓔ
referrer ⓝ
title
URL
width / height ⓝ
all ⓔ
anchors
applets
body
embeds
forms
frames ⓔ
images
links
plugins ⓝ
styleSheets
메소드
open()
close()
write()
writeln()
getElementByld()
getElementByName()
getElementByTagName()
getComputedStyle() css 의 속성값 가져오기
이벤트 핸들러
onblur
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmouseup
onmouseover
onmouseout
explorer 전용 onactivate, onafterupdate, onbeforeacivate, onbeforedeactivate, onbeforeeditfocus,
onbeforeupdate, oncellchange, oncontextmenu, oncontrolselect, ondataavilable,
ondatasetchanged, ondatasetcomplete, ondeactivate, ondragstart, onfocusin,
onfocusout, onerrorupdate, onhelp, onmousewheel, onpropertychange,
onreadystatechange, onrowenter, onrowexit, onrowsdelete, onrowsinserted,
onselectionchange, onselectstart, onstop
###############################################################################################
all 컬렉션 ⓔ
length
item("name")
tags("TAG")
Anchor 객체
innerHTML
innerText ⓔ
text ⓝ
name
style
title
이벤트 핸들러
onclick, oncontextmenu, ondblclick, onmousedown, onmousemove, onmouseout,
onmouseover, onmouseup, onbeforecopy ⓔ, onbeforepaste ⓔ, oncopy ⓔ,
ondrag ⓔ, onselectstart ⓔ
Applet 객체
code
codebase
name
height
width
hspace
vspace
style
public 변수
start()
stop()
public 메소드
Body 객체
alink
link
vlink
text
background
bgColor
style
scroll ⓔ
outerHTML
innerHTML
innerText ⓔ
clientLeft ⓔ
clientTop ⓔ
offsetLeft
offsetTop
scrollLeft
scrollTop
clientHeight
clientWidth
offsetHeight
offsetWidth
scrollHeight
scrollWidth
이벤트 핸들러 onblur, onclick, oncontextmenu, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onscroll, onselect,
onselectstart, onunload
Explorer 전용 이번트 핸들러
onbeforeunload, oncut, ondrag, ondragend, ondragenter, ondragleave, ondragover,
ondrop, onfilterchange, onhelp, onpaste
Embed 객체
autostart ⓔ
baseURL ⓝ
hidden ⓔ
hspace ⓔ
vspace ⓔ
height
width
id
name
src
style
title
Play()
Stop()
pause() ⓔ
SetVolume()
Frame 객체
document
frame
history
location
name
screenLeft
screenTop
self
parent
top
alert()
confirm()
prompt()
open()
scrollTo(x, y)
scrollBy(x, y)
print()
clearInterval()
clearTimeout()
setInterval()
setTimeout()
이벤트 핸들러 onatferprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus,
onhelp, onload, onresize, onscroll, onunload
Image 객체
alt, title
border
dynSrc ⓔ
width, height
hspace, vspace
loop ⓔ
lowsrc
name
src
style
useMap
isMap
complete 이미지 로드가 완료되었는지 여부 true/false
fileSize ⓔ
fileCreatedDate ⓔ
fileModifiedDate ⓔ
nameProp ⓔ
protocol ⓔ
readyState
이벤트 핸들러 onabort, onerror, onclick, oncontextmenu, oncopy ⓔ, ondblclick, onfocus, onload,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
Link 객체
coords
href
name
shape
target
title
className
id
style
tagName
innerHTML
innerText ⓔ
outerHTML
text ⓝ
hash
host
hostname
port ⓔ
pathname
protocol
blur()
click() ⓔ
focus()
이벤트 핸들러 onblur, onclick, oncontextmenu, oncopy ⓔ, onfocus, onmousedown, onmousemove
onmouseout, onmouseover, onmouseup, onkeypress, onkeydown, onkeyup
StyleSheet 객체
cssText ⓔ
cssRules ⓝ
rules ⓔ
href
owningElement ⓔ
ownerNode ⓝ
readOnly ⓔ
title
type
insertRule() ⓝ
deleteRule() ⓝ
Form 객체
action
Screen 객체
availHeight 작업 표시줄을 제외한 화면의 높이를 픽셀 값으로 표시
availWidth 작업 표시줄을 제외한 화면의 너비를 픽셀 값으로 표시
availTop 화면 표시 영역의 y 좌표 표시
availLeft 화면 표시 영역의 x 좌표 표시
height 화면의 높이를 픽셀 값으로 표시
width 화면의 너비를 픽셀 값으로 표시
colorDepth 컴퓨터에서 사용하고 있는 컬러 수를 표시
pixelDepth 화면의 컬러 해상도를 표시(넷스케이프 네비게이터용)
화면 크기 조절 모음
브라우저의 전체 높이 screen.availHeight
브라우저의 전체 너비 screen.availWidth
모니터의 해상도 높이 screen.height
모니터의 해상도 너비 screen.width
브라우저안쪽의 높이 document.body.clientHeight
브라우저안쪽의 너비 document.body.clientWidth
문서 높이 document.body.scrollHeight
문서 너비 document.body.scrollWidth
현재 스크롤 위치 document.body.scrollTop
document.documentElement.scrollTop
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
HTML5 태그 모음
<!--...--> 정의 댓글
<!DOCTYPE> 정의 문서 종류
<a> 정의하는 하이퍼 링크
<abbr> 정의 약어
<acronym> D 영문 축양형 사용시
<address> 정의 주소 요소
<applet> D 임베디드 애플릿 사용시
<area> Defines an area inside an image map
<article> N 정의 문서
<aside> N 정의는 페이지 콘텐츠를 제쳐두고 콘텐츠
<audio> N 정의 소리 콘텐츠
<b> 정의 굵은 텍스트
<base> 페이지의 모든 링크에 대한 정의 기본 URL
<basefont> D 글꼴의 형태 정의
<bdo> 텍스트 디스플레이의 정의 방향
<big> D 글꼴의 크기 지정
<blockquote> 정의 긴 인용
<body> 정의 Body 요소
<br> 삽입 단일 줄바꿈
<button> 정의는 푸시 버튼, Insert Button과 차이는 button 내부에 Image Tag 등을 사용하여 꾸밀 수 있음
<canvas> N 정의 그래픽
<caption> 정의하는 테이블 캡션
<center> D 텍스트 위치 중앙 정렬
<cite> 정의 표창장
<code> 정의 컴퓨터 코드 텍스트
<col> 정의 테이블 컬럼에 대한 특성
<colgroup> 테이블 컬럼의 정의 그룹
<command> N 정의 명령 단추
<datalist> N 정의 드롭 다운 목록
<dd> 정의 정의 설명
<del> 정의 텍스트를 삭제
<details> N 요소의 정의 세부 정보
<dfn> 정의 용어 정의
<dir> D 디렉토리 리스트
<div> 문서의 정의 섹션
<dl> 정의 정의 목록
<dt> 정의 용어 정의
<em> 정의 텍스트를 강조
<embed> N 정의 외부 인터랙티브 콘텐츠 또는 플러그인
<fieldset> 정의 fieldset
<figcaption> N 그림 요소의 정의 캡션
<figure> N 정의 미디어 컨텐츠의 그룹, 그리고 그들의 캡션
<font> D 글꼴
<footer> N 섹션 또는 페이지에 대한 정의 바닥글
<form> 정의 양식
<frame> D 프레임
<frameset> D 프레임 부속 태그
<h1> 에 <h6> 정의 헤더 1 6 헤더
<head> 문서에 대한 정의 정보
<header> N 섹션 또는 페이지에 대한 정의하는 헤더
<hgroup> N 문서의 섹션에 대한 정의 정보
<hr> 정의 수평 규칙
<html> 정의하는 HTML 문서
<i> 정의 기울임꼴 텍스트
<iframe> 정의 인라인 하위 창 (프레임)
<img> 정의 이미지
<input> 정의 입력 필드
<ins> 정의 텍스트를 삽입
<keygen> N 형태로 정의 생성된 키
<kbd> 정의 키보드 텍스트
<label> 양식 컨트롤에 대한 정의 레이블
<legend> fieldset에 정의 제목
<li> 정의 목록 항목
<link> 정의 리소스 참조
<map> 정의 이미지 맵
<mark> N 정의 텍스트를 표시
<menu> 정의 메뉴 목록
<meta> 정의 메타 정보
<meter> N 미리 정의된 범위 내에서 정의 측정
<nav> N 정의 탐색 링크
<noframes> D 프레임 부속 태그
<noscript> 정의 noscript 섹션
<object> 정의 개체를 내장
<ol> 정의 주문한 목록
<optgroup> 정의 옵션 그룹
<option> 드롭 다운 목록에서 정의하는 옵션
<output> N 출력의 정의 몇 가지 유형
<p> 정의하는 단락
<param> 개체에 대한 정의 매개 변수
<pre> 정의 텍스트 서식이 설정된
<progress> N 어떤 종류의 작업의 정의 진행
<q> 정의 짧은 인용
<rp> N 루비 주석에서 사용한 루비 요소를 지원하지 해당 브라우저를 표시할지 정의합니다.
<rt> N 정의의 설명 주석을 루비 있습니다.
<ruby> N 정의의 루비 주석
<s> 더 이상 올바른 정의 텍스트
<samp> 정의 예제 컴퓨터 코드
<script> 정의 스크립트
<section> N 정의 섹션
<select> 정의 선택리스트
<small> 정의 작은 텍스트
<source> N 정의 미디어 리소스
<span> 문서의 정의 섹션
<strike> D 글골 효과
<strong> 정의 강한 텍스트
<style> 정의하는 스타일 정의
<sub> 정의 텍스트를 subscripted
<summary> N 정의 "상세"요소의 헤더
<sup> 정의 텍스트를 superscripted
<table> 정의 테이블
<tbody> 정의하는 테이블 몸
<td> 정의 테이블 셀
<textarea> 정의하는 텍스트 영역
<tfoot> 정의하는 테이블 바닥글
<th> 정의하는 테이블 헤더
<thead> 정의하는 테이블 헤더
<time> N 정의 날짜 / 시간
<title> 정의 문서 제목
<tr> 정의하는 테이블 행
<tt> N 글골 효과
<u> N 글꼴 언더라인
<ul> 정의 정렬되지 않은 목록
<var> 정의 변수
<video> N 정의 비디오
<wbr> N 정의 가능한 라인 - 휴식
<xmp> D PRE태그와 비슷(태그까지도 글로 표현)
삭제된 태그
<acronym> 영문 축양형 사용시
<applet> 임베디드 애플릿 사용시
<basefont> 글꼴의 형태 정의
<big> 글꼴의 크기 지정
<center> 텍스트 위치 중앙 정렬
<dir> 디렉토리 리스트
<font> 글골
<frame> 프레임
<frameset> 프레임 부속 태그
<noframes> 프레임 부속 태그
<strike> 글골 효과
<tt> 글골 효과
<u> 글꼴 언더라인
<xmp> PRE태그와 비슷(태그까지도 글로 표현)
추가된 태그
<article> 정의 문서
<aside> 정의는 페이지 콘텐츠를 제쳐두고 콘텐츠
<audio> 정의 소리 콘텐츠
<canvas> 정의 그래픽
<command> 정의 명령 단추
<datalist> 정의 드롭 다운 목록
<details> 요소의 정의 세부 정보
<embed> 정의 외부 인터랙티브 콘텐츠 또는 플러그인
<figcaption> 그림 요소의 정의 캡션
<figure> 정의 미디어 컨텐츠의 그룹, 그리고 그들의 캡션
<footer> 섹션 또는 페이지에 대한 정의 바닥글
<header> 섹션 또는 페이지에 대한 정의하는 헤더
<hgroup> 문서의 섹션에 대한 정의 정보
<keygen> 형태로 정의 생성된 키
<mark> 정의 텍스트를 표시
<meter> 미리 정의된 범위 내에서 정의 측정
<nav> 정의 탐색 링크
<output> 출력의 정의 몇 가지 유형
<progress> 어떤 종류의 작업의 정의 진행
<rp> 루비 주석에서 사용한 루비 요소를 지원하지 해당 브라우저를 표시할지 정의합니다.
<rt> 정의의 설명 주석을 루비 있습니다.
<ruby> 정의의 루비 주석
<section> 정의 섹션
<source> 정의 미디어 리소스
<summary> 정의 "상세"요소의 헤더
<time> 정의 날짜 / 시간
<tt> 글골 효과
<u> 글꼴 언더라인
<video> 정의 비디오
<wbr> 정의 가능한 라인 - 휴식
HTML 형식 설명
<!DOCTYPE> HTML전용편집기 이용 문서 작성시 문서의 종료 버젼을 표시하는 태그
생략 가능, 문서형식은 HTML이며 W3C에서 표준으로 정한 HTML 4.0을 기준으로 작성
<META> 검색엔진 키워드나 문서에 대한 정보 http 응답헤더를 만들때 사용
검색 엔진
Name 검색엔진에서 사용 할 형식
Subject : 웹페이지의 주제
Title : 목적
Author : 작성자
Publisher : 책임을 가진 단체
Date : 작정 날짜
Keyword : 검색에 사용될 키워드
Description :검색 시 설명 문장
Http-equiv expires : 유효기간 설정, 접속시 마다 갱신은 0으로 설정
refresh : 일정 시간후 refresh 설정
content-type : 기본 문자셋 설정
Content Name, http-equiv 속성에 대한 설명이나 명령
반드시 따음표 사용
정보 제공
content-type : 문서의 형식
page-enter : Explorer가 처음 읽어들일 때 실행할 내용
page-Exit : Explorer가 메모리에서 해제할 때 실행할 내용
응답 헤더
refresh : 브라우저가 새로 Loading 하고자 하는 내용을 초단위로 지정
expires : 임시폴더에 저장되는 문서의 유효기간 지정
<BASEFONT> ⓔ 기본 글꼴 크기를 지정
사용자의 옵션 설정 보다 우선, <HEAD>,<BODY> 중복 사용가능
<BASE> <A>링크의 상대 경로 사용시 기준 URL경로 지정
href : 상대적인 경로를 사용할 때 그 기준이 되는 URL
target : 링크된 페이지를 보여줄 윈도우 이름
<STYLE> 스타일 선언
<LINK> 스타일시트나 아이콘과 같은 외부의 파일을 불러옴
media 스타일이 적용될 대상 장치를 지정, screen,print,all 값만 모든 브라우저에서 공통 지원
screen Computer screens(default)
tty Teletypes and similar media using a fixed-pitch character grid
tv Television type devices(low resolution, limited scroll ability)
projection Proejctors
handheld Handheld devices(small screen, limited bandwidth)
print Print preview mode/printed pages
braille Braille feedback devices
aural Speech synthesizers
all Suitable for all devices
<SCRIPT> 인터프린터(해석기)에 의해 해속될 스크립트 언어 입력
###############################################################################################
<BODY>태그 속성
색상 bgColor 배경색
text 글자색
link 링크색(방문하지 않은)
aLink 링크색(마우스를 올려 놓은)
vLink 링크색(방문한)
여백 marginHeight ⓝ 문서의 상하 여백(픽셀)
marginWidth ⓝ 좌우 여백
leftMargin 좌우 여백
topMargin 상하 여백
배경 background 배경색을 이미지로 지정
bgProperties ⓔ 배경이미지의 고정 또는 스크롤 결정
스크롤바 scroll ⓔ 스크롤바의 여부(yes/no, 1/0)
###############################################################################################
<A> 태그 속성
링크, <BASE>
Name 페이지의 특정 위치로 이동시 사용하는 Ancher
Href 링크에 연결할 URL
Target 링크된 페이지를 보여줄 윈도우 지정(_self, _parent, _top, _blank, 윈도우 이름)
Title 링크에 마우스포인터를 올려둘 때 도움말
###############################################################################################
<IMG> 태그 속성
이미지 로드, <MAP>
align top, middle, botton, absMiddle, baseLine, absBotton 중 하나의 높이에 대한 값을 사용(left, right 사용 가능하나 권장하지 않음)
alt 이미지가 나타나지 않을 때 보여줄 설명
border 테두리선
src URL
width 넓이
height 높이
hSpace 수평여백
vSpace 수직여백
lowSrc 이미지가 다운로드될 동안 보여줄 적은 용량의 이미지
name 객체의 이름
title onMouse 설명문
useMap <MAP> 태그의 name값 지정
###############################################################################################
<MAP> 태그 속성
AREA 태그의 타켓 이미지 지정, <IMG>,<AREA>
name <AREA> 태그가 적용될 <IMG> 태그 이름
###############################################################################################
<AREA> 태그 속성
이미지 분할 링크, <MAP>
alt, title onMouse 설명문
coords shape="circle" 원형(x,y좌표와 반지름)
shape="rect" 사각형(좌측상단과 우즉하단의 x,y좌표)
shape="poly" 다각형(각 꼭지점 x,y 좌표)
href 링크 URL
Shape 링크 모양 결정(circle 원, rect 사각형, poly 다각형)
Target 링크를 보여줄 윈도우 지정
<img src="/images/page/app_header_bt_noti.png" usemap="#app_header_bt" style="width:100%"/>
<map name="app_header_bt">
<area shape="rect" coords="26,9,150,38" href=""/>
<area shape="rect" coords="151,9,275,38" href=""/>
</map>
###############################################################################################
블록 요소(Block Element)
줄바꿈을 해주는 태그
<ADDRESS> Italic체, 박스 앞뒤 줄바꿈
<BLOCKQUOTE> 들여쓰기 적용, 줄바꿈
<CENTER> 중앙 정렬, 줄바꿈
<DIV> 줄바꿈
<H1>~<H6> 제목을 나타냄, 앞뒤로 한칸 띄움
<P> 앞뒤로 한줄을 띠어 문단 구분
<PRE> 띄어쓰기, 엔터 적용
<HR>* 수평선
Noshade 그림자효과 없애고 단색 표현
Align,Title,Width,Color*,Size*
<MARQUEE> 브라우저에 흐르는 효과
behavior Scroll : 스크롤 반복
Slide : 스크롤 후 멈춤
Alternate : 좌우 반복적으로 왕복
direction Left, Right, Up, Down 흐르는 방향 설정
loop 반복 횟수, Infinite(무한)
scrollAmount 이동 간격
scrollDelay 이동 속도
bgColor,width,height,vSpace,vSpace
목록은 나타내는 태그 <DIR>,<MENU>,<DL>,<DD>,<DT>,<LI>,<OL>,<UL>
테이블과 관련된 태그 <TABLE>,<CAPTION>,<TBODY>,<TR>,<TD>
###############################################################################################
목록 태그
<DL> <DT>,<DD> 태그 포함
Definition List(용어 정의 목록)
<DD> <DL>에 포함되어 들여쓰기
Definition DEscription(용어의 설명)
<DT> <DL>에 포함되어 제목 표시
Definition Terms(용어)
<LI> List로서 <DIR>,<MENU>,<OL>,<UL>태그에 포함되어 항목을 나타
type <OL>에 포함될 때 A,a,I,i,1
<DIR>,<MENU>,<UL>에 포함될 때 disc,circle,square
value <OL>에 포함될 때 1보다 큰 양의 정수로 목록의 순서를 정함
List(목록)
<OL> <LI>태그에 숫자,알파벳,로마자와 같은 순서를 적용시키는 type 속성을 가짐
type A,a,I,i,1
start type의 시작 번호 정의
Ordered List(순서 있는 목록)
<UL> <LI>태그를 Disc, Circle, Square 형태의 블릿으로 출력하기 위한 type 속성을 가짐
Unordered List(순서 없는 목록)
###############################################################################################
테이블 태그
<TABLE> 테이블 작성
borderColorLight ⓔ 테두리 색중 밝은 부분 색
borderColorDark ⓔ 테두리 색중 어두운 부분 색
cellSpacing Cell과 Cell 사이의 여백
cellPadding Cell의 내용과 테두리선 사이의 간격
frame ⓔ 테이블 바깥쪽 선 설정
rules ⓔ 테이블 안쪽 선 설정
align,bgColor,background,border,borderColor,width,height
align="값" (값 = left / center / right)
backgroungd="이미지 파일 경로"
bgcolor="값" (값 = 색이름 / SRGB)
bordercolor="값" (값 = 색이름 / SRGB)
border="픽셀"
bordercolordark="값" (값 = 색이름 / SRGB)
bordercolorlight="값" (값 = 색이름 / SRGB)
cellpadding="픽셀"
cellspacing="픽셀"
cols="숫자"
class="클래스 이름"
frame="값" (값 = above / below / border /hsides / Lhs / rhs / vside / void)
height="픽셀"
hspace="픽셀"
id="id 이름"
rules="값" (값 = cols / rows / none / all /group)
style="스타일 시트 입력"
title="제목"
width="픽셀/(%)"
특이사항
- summary 요약문 abbr 약어 지정 (WCAG1.0)
<CAPTION> 테이블 제목
align="값" (값 = top / bottom / left / right)
id="id 이름"
class="클래스 이름"
style="스타일 시트 입력"
title="제목"
align,valign
<COL> 하나의 컬럼의 공통 속성 지정
span ⓔ 현재의 걸럼의 기능을 적용시킬 컬럼 수
ID ⓔ 스타일시트를 적용하기 위한 이름
align ⓔ,valign ⓔ,bgColor ⓔ, width
<COLGROUP> 여러개의 컬럼에 공통 속성 지정
align="값" (값 = top / bottom / left / right)
id="id 이름"
char="기준 알파벳"
charoff="문자 개수"
span="열 개수"
style="스타일 시트 입력"
width="픽셀"
valign="값" (값 = top / bottom / center /baseline)
<COL>과 비슷
align="값" (값 = top / bottom / left / right)
id="id 이름"
char="기준 알파벳" (align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
charoff="문자 개수" (align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
span="열 개수" (열의 개수를 지정 IE 3.0,N 4.0 이상)
style="스타일 시트 입력"
width="픽셀"
valign="값" (값 = top / bottom / center /baseline)
align ⓔ,valign ⓔ,bgColor ⓔ, width,ID ⓔ, span ⓔ
<TR> <TABLE>에 포함되 행 만듬, <TD>,<TH>를 포함\
align="값" (값 = left / center / right / justify /char)
bgcolor="값" (값 = 색이름 / SRGB)
bordercolor="값" (값 = 색이름 / SRGB)
bordercolordark="값" (값 = 색이름 / SRGB)
bordercolorlight="값" (값 = 색이름 / SRGB)(표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 IE 3.0 이상)
char="기준 알파벳"(align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
charoff="문자 개수"(align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
class="클래스 이름"(스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상)
id="id 이름"
style="스타일 시트 입력"
title="제목"
nowrap
valign="값" (값 = top / bottom / center /baseline)
colSpan Column 병합시 Cell 수
rowSpan Row 병합시 Cell 수
noWrap Cell의 내용을 다음 줄로 넘기지 않음
align,valign,bgColor,background,width,height
<TD><TH>
align="값" (값 = left / center / right / justify /char)
bgcolor="값" (값 = 색이름 / SRGB)
bordercolor="값" (값 = 색이름 / SRGB)
bordercolordark="값" (값 = 색이름 / SRGB)
bordercolorlight="값" (값 = 색이름 / SRGB) (표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 IE 3.0 이상)
char="기준 알파벳" (align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
charoff="문자 개수" (align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
class="클래스 이름" (스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상)
id="id 이름"
style="스타일 시트 입력"
title="제목"
nowrap
valign="값" (값 = top / bottom / center /baseline)
<THEAD> 머리글
<TBODY> <TR>의 부모, 셀의 공통속성 지정
<TFOOT> 꼬리말, <TBODY> 보다 먼저 선언
<THEAD>, <TBODY>, <TFOOT> 공통 속성
align="값" (값 = left / center / right / justify /char)
axis="셀 이름"(셀의 이름을 설정합니다.)
axes="관련 내용"(셀의 내용과 부합하는 이름을 나열합니다.)
background="이미지 파일 경로"
bgcolor="값" (값 = 색이름 / SRGB)
bordercolor="값" (값 = 색이름 / SRGB)
bordercolordark="값" (값 = 색이름 / SRGB)(셀 경계선을 3차원으로 만들때 사용되는 어두운색을 지정)
bordercolorlight="값" (값 = 색이름 / SRGB)(셀 경계선을 3차원으로 만들 때 사용되는 밝은색을 지정)
char="기준 알파벳"(align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
charoff="문자 개수"(align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준)
class="클래스 이름"
colspan="숫자"
id="id 이름"
rowspan="숫자"
style="스타일 시트 입력"
title="제목"
nowrap
valign="값" (값 = top / bottom / center /baseline)
예제
※summary 요약문 abbr 약어 지정 (WCAG1.0)
※표제목 caption 설정 (css로 행정렬)
※<table width="" border="" frame="" rules="" cellspacing="" cellpadding="">
(css로 하는것이 좋음)
width= 가로길이 픽셀,%로 지정
border=테두리선 두께, 값은 px로 지정
frame=표의 외부 테두리를 상하좌우 어디에 표시할지 지정 (웹표준교과서74p)
rules=셀의 구분선 표시양식 (웹표준교과서74p)
cellspacing=셀사이의 간격, 픽셀 또는 % 지정
cellpadding=셀안의 간격, 픽셀 또는 % 지정
※열 그룹화를 위한 colgroup 요소, col 요소
-col요소는 빈요소이며 table 요소 또는 colgroup 요소의 자식 요소로 지정한다
<table summary="브라우저의 이용자 비율에 관한 독학조사. 2004년 제2분기가 대상. 1열이 브라우저명, 2열이 비율.">
<caption>브라우저 이용자 비율</caption>
<colgroup span="2">
<col class="browsers" />
<col class="versions" />
</colgroup>
<col class="percentage" />
※좀더 높은 레벨의 셀 관련 짓기 (header)
-th 요소, td 요소에 headers 속성과 scope 속성을 지정하면 좀더 높은 레벨로 셀을 관련지을 수 있다
-header 속성에는 td 요소의 제목 정보를 제공하는 th 요소의 id를 지정한다
<thead>
<tr>
<th id="brs" abbr="브라우저">브라우저</th>
<th id="ver" abbr="버전">버전</th>
<th id="pct" abbr="비율">비율</th>
</tr>
</thead>
<tfoot>
<tr>
<td headers="brs ver" colspan="2">합계</td>
<td headers="pct">100%</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="brs" rowspan="3">Internet Explorer</td>
<td headers="ver">6.x</td>
<td headers="pct">83.24%</td>
</tr>
<tr>
<td headers="ver">5.x</td>
<td headers="pct">10.76%</td>
</tr>
<tr>
<td headers="ver">4.x</td>
<td headers="pct">0.10%</td>
</tr>
</tbody>
※좀더 높은 레벨의 셀 관련 짓기 (scope)
-th 요소로 제목정보를 제공하는 td요소의 범위를 지정한다.
-row(그 행의 td 요소 제목정보 제공)
-col(그 열의 td 요소에 제목정보 제공)
-rowgroup(그 행 그룹의 td 요소에 제목정보 제공)
-colgroup(그 열 그룹의 td 요소에 제목정보 제공)
<theader>
<tr>
<th scope="col" abbr="브라우저">브라우저</th>
<th scope="col" abbr="버전">버전</th>
<th scope="col" abbr="비율">비율</th>
</tr>
</theader>
※headers 속성은 td 요소에서 th 요소의 id 참조에 비해 scope 속성은 th 요소에 td 요소의 범위를 지정하는 점이 다르다.
※axis 속성을 이용해서 th 요소의 분류명을 지정할 수 있다.
-예컨데 id에 'brs'라고 지정한 th 요소와 'ver'라고 지정한 th 요소에 대하여 axis 속성으로 '화면표시'라는 분류명을 부여하는 경우등에 쓰인다.
<thead>
<tr>
<td id="brs" axis="화면표시" abbr="브라우저">브라우저</th>
<th id="ver" axis="화면표시" abbr="버전">버전</th>
<th id="pct" abbr="비율">비율</th>
</tr>
###############################################################################################
프레임 테그
<FRAMESET> 프레임셋 설정
cols 프레임 좌우 분할
rows 프레임 상하 분할
border 경계선 두께
borderColor 경계선 색
frameSpacing ⓔ 프레임 테두리선 사이의 간격 변경
frameBorder 프레임 테두리 생성 여부
<FRAME> 프레임 설정
name 프레임 이름
src 출력할 URL
frameBorder ⓔ 테두리선 여부
marginWidth 좌우 여백
marginHeight 상하 여백
noResize 프레임 크기 조절 여부
Scrolling 스크롤바 생성 여부
<IFRAME> <BODY>에 사용 가능한 프레임
frameBorder, marginWidth, marginHeight, name, Scrolling, src, width, height
###############################################################################################
미디어 태그
<EMBED> ⓔ Media Player,ⓝ Real Player 가 있어야함
autostart 자동 시행 여부(true/false)
hidden 숨김 여부
loop 반복 여부(Infinite 무한)
src URL
alt 실행이 안될때 설명문
pluginSpace Plug-in 미 설치시 다운로드 받을 수 있도록 URL 지정
align, hSpace, vSpace, name, title, width, height
<BGSOUND> ⓔ mid, wav, aif, au, mp3 지원
src ⓔ, loop ⓔ
<IMG dynsrc> ⓔ IMG의 dynsrc속성을 이용하면 미디어 파일 재생 가능
dynsrc ⓔ src속성 보다 우선
src dynsrc 미디어 파일 없을 때 출력할 이미지
border, loop ⓔ, name, width, height
<APPLET> JAVA class 파일 실행
code 파일 이름
codeBae 파일 경로
name, width, height, hspace, vspace
<PARAM> <APPLET>의 Class 파일에 변수를 전달
name class 파일로 전달할 고정된 변수
value 애플릿에서 사용하기 위한 실제 데이터
<OBJECT> 차세대 멀티미디어 표준
data 파일 URL, 안정상 <PARAM> 태그 이용을 권장
id 요소를 인식하기 위한 이름, classid 속성에 어떤 요소를 삽입하는 것인지를 설명
classid 파일의 형식 지정
codebase 플러그인 미설치시 자동 설치에 사용될 파일 URL
align, border, width, height
###############################################################################################
입력 양식
<FORM> 사용사가 입력한 값을 서버로 전달
Action 서버프로그램의 URL
Method get default, 주소표시줄 이용 보안성 X, 전송 데이터 크기 제한(2Kbyte), 데이터가 인수로 전달
post 크기 제한 없음, 표준입력 방식 전달
Enctype 서버에 전달 데이터 타임 지정, javascript에서 변경시 encoding
application/x-www-form-urlencoded
multipart/form-data
Target 결과를 돌려받을 윈도우 이름
onsubmit submit 버튼 이벤트
onreset reset 버튼 이벤트
name
<INPUT> 입력 태그
type 종류(text,password,file,checkbox,radio,hidden,button,reset,summit,image)
checked checkbox, radio 원하는 항목 체크
maxlength text, password 최대 입력 글자 수
readonly text, password 내용 변경 못함
size text, password 입력 문자열 수
type, name, value
<TEXTAREA>
name, rows, cols, readonly(none,readonly), disabled(none,disabled)
<SELECT>
multiple 중복 선택 가능
name, size
<OPTION>
selected 요소 선택
value 요소 값
###############################################################################################
<SPAN>
<DIV> 줄바꿈
###############################################################################################
HTML 태그(HTML Tag)
<XMP> 태그와 텍스트를 공백문자까지 입력한 그대로 보여주는 기능, 문자열 그대로 보여줌
<PRE> XMP와 비슷한 기능을 하지만 PRE는 텍스트만 보여주고 태그는 태그로 처리함
<BR> 줄 바꿈
<NOBR></NOBR> 줄 바꿈 방지
<HR> 문서 구분(수평선)
<IMG> 이미지 파일 표시
문자 형태
<B></B> 굵게(Bold체)
<I> 기울임(Italic체)
<TT> 타자기체(Typewriter Text)
<SUP> 위첨자(SUPerscript)
<SUB> 아래첨자(SUBscript)
<U> 밑줄(UnderLine)
<STRONG> Strong Emphasis(Bold체로 강조)
<EM> Emphasized text(Italic체로 강조)
<VAR> 변수(Variable) 표시할 때 Italic체로 강조
<CODE> 타자기체로 프로그램 를
<BIG> 현재 보다 큰 글씨 크기
<SMALL> 현재 보다 작은 글씨 크기
<INS> Insert text 부분을 표시하는 밑줄
<S> 취소선(Strike Through)
<STRIKE> STRIKE(Strikeout Type) 취소선
<DEL> 글씨 중간 취소선(Delete)
<CITE> Inline Citation(Inline 인용문으로 Italic체로 보임)
<Q> 짧은 인용구문에 사용(Netscape 전용)
<BLOCKQUOTE> 긴 인용문에 들여쓰기 적용(Block 요소)
<ACRONYM> 약자로 표현
<NOBR> Line-Break 기능을 수행하지 않음
<FONT> 글꼴 변경
size="" 크기 조정(1~7까지, 기본 3)
+,- 기호를 쓰면 기본에 +,-해서 변경
face="" 폰트 조정(바탕체,굴림체,궁서체)
속성에 지정한 폰트를 가지고 있지 않을 때를 대비하여 여러개의 폰트 사용 가능(face="하늘체, 궁서체, 굴림체")
color="" 색 조정(red,#FF0000,REG(255,0,0),REG(100%,0%,0%))
태그 속성(Tag Attribute)
title="" 마우스를 올려 놓으면 설명문 표시
###############################################################################################
###############################################################################################
###############################################################################################
CSS 적용 방법
In-Line 스타일
<태그 style="속성:속성값">스타일 대상</태그>
Embeded 스타일시트
STYLE 태그를 사용
<STYLE TYPE="TEXT/CSS">
선택자 {속성:속성값}
선택자 {속성:속성값; 속성 속성값}
</STYLE>
External 스타일시트
외부에 저장된 CSS파일
LINK 태그
<LINK REL="stylesheet" HREF="경로" TYPE="text/css">
Import 구문
<STYLE TYPE="text/css">
@import url(경로);
@import url(경로);
</STYLE>
###############################################################################################
1. 좌우 위치 정렬 : 텍스트의 왼쪽, 가운데, 오른쪽 정렬
- style="text-align:값;"
- 값 : left 또는 center 또는 right
- 예) style="text-align:left;"
2. 상하 위치 정렬 : 텍스트의 위, 중간, 글표시라인의 하단, 아래 정렬
- style="vertical-align:값;"
- 값 : top 또는 middle 또는 textbottom 또는 bottom
- 예) style="vertical-align:top;"
3. div의 화면 위치 설정 : 절대위치, 상대위치, 기본값, 고정 등의
div가 화면에 나타나는 위치 설정
- style="position:값;"
- 값 : absolute(절대위치), relative(상대위치), static(기본값), flxed(고정)
- 예) style="position:absolute;"
4. 내부위치 설정 : div 내부에 표시될 내용의 위치를 설정
- style="값 : 크기;"
- 값 : top 또는 left 또는 bottom 또는 right
- 크기 : 10px15px 등의 숫자 (15px 는 15픽셀을 뜻함.)
- 예) style="top:13px;" <= 위로부터 13픽셀 떨어 진곳에 표시하라는 뜻.
5. 레이어 순서 : 화면에 나타나는 레이어의 표시 순서로
겹치더라도 우선순위가 높은게 가장위에표시
- style="z-index:값;"
- 값 : 1, 2 등의 숫자
- 우선순위 : 높은 숫자일수록 우선순위가 높다
- 예) style="z-index:1;"
6. 표시여부 : 화면에 보이게 할지 을 결정
- style="visibility:값;"
- 값 : hidden(숨김) 또는 visible(보임)
- 예) style="visibility:hiidden;"
###############################################################################################
배경 이미지
배경이미지 무반복
<style type="text/css">
body {background-image:url(이미지주소);
background-repeat:no-repeat}
</style>
배경이미지 가로만 반복
<style type="text/css">
body {background-image:url(이미지주소);
background-repeat:repeat-x}
</style>
배경이미지 세로만 반복
<style type="text/css">
body {background-image:url(이미지주소);
background-repeat:repeat-y}
</style>
배경이미지 특정위치에 놓기
배경이미지를 반복하지 않고 중앙에 배경이미지 하나만을 위치시키는 태그입니다.
<style type="text/css">
body {background-image:url(배경이미지 파일경로);
background-repeat:no-repeat}
background-attachment : fixed;
background-position : 50% 50%}
</style>
###############################################################################################
Selector
<STYLE TYPE="TEXT/CSS">
DIV {속성:속성값}
DIV.a {속성:속성값}
#a {속성:속성값}
DIV, SPAN, #a, .a {속성:속성값}
A:link {속성:속성값}
A:visited {속성:속성값}
A:active {속성:속성값}
A:hover {속성:속성값}
DIV:first-line {속성:속성값}
SPAN:first-letter {속성:속성값}
DIV SPAN {속성:속성값}
</STYLE>
<DIV class="a"><SPAN></SPAN></DIV>
<SPAN id="a"></SPAN>
class . 사용
id # 사용
A <A>태그 가상 클래스
link 방문기록 없는 링크
visited 방문기록 있는 링크
active 마우스를 누르는 동안의 링크
hober 마우스가 Over 된 상태의 링크
first-line 첫번째 라인에 적용
first-letter 첫번째 글자에 적용
DIV SPAN DIV 자식 SPAN에게만 태그 적용
DIV 스타일의 중첩 적용 됨
단위
절대적 단위 in,cm,mm,pt,pc
상대적 단위 em,ex,px,%
컬러 규칙
red, #FF0000, RGB(100%,0%,0%), RGB(255,0,0)
스타일 속성
font-style normal, italic, oblique
font-variant normal, small-caps
영문 소문자를 작은 대문자로 변경
font-weight normal, bold, bolder, lightr, 100,200,...,900
폰트 두께
font-size xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller
글자 크기, 숫자+단위(ex,em,cm,mm,in,px,pt,%)
line-height 폰트 적용 높이
font-family 글꼴(바탕,굴림,궁서,Arial,Serif)
font style variant weight size/line-heght family 순서로 적용하는 대표 속성
Text 관련 속성
color 컬러
line-height 행높이
letter-spacing normal, 숫자+단위, 글자 간격
word-spacing normal, 숫자+단위, 단어 간격
text-align left, right, center, justify
Block요소만 적용
text-decoration none, underline, overline, line-through, lblink ⓝ
text-indent 숫자+단위, 문단 첫번째 라인 들여쓰기, Block요소만 적용
text-transform none, capitalize, uppercase, lowercase (대소문자 변환)
vertical-align sub, super, baseline, top, text-top, middle, botton, text-bottom, percentage
line 내 수직 방향 위치
white-space ⓝ normal, pre
문서의 공배을 해석
배경 관련 속성
background-color 배경색
background-image URL
background-repeat repeat, repeat-x, repeat-y, no-repeat
background-position 가로 세로 (left, center, right, 숫자+단위, %)
위치 지정
background-attachment scroll, fixed(스트롤바 영향 X)
이미지 스크롤
background color url repeat position attachment
백그라운드 대표 속성
Box 관련 속성
width, height
cursor auto, crosshair, default, hand, pointer, move, text, wait, help, n-resize, ne-resize, e-resize,
se-resize, s-resize, sw-resize, w-resize, nw-resize
마우스포인터 모양
display block, inline, none
FF지원, IE부분 지원
inline 인라인 박스로 만든다.
inline-block 블록박스로 만들지만, 인라인 박스처럼 배치된다.
none 박스를 만들지 않으며 시각적으로 완전히 보이지 않는다.
inherit 상위 요소의 display속성을 상속받는다.
table 블록레벨의 표로 만든다.
inline-table 인라인레벨의 표로 만든다.
table-row 행으로 만든다. (tr 기본속성)
table-row-group 본체 행 그룹으로 만든다. (tbody 기본속성)
table-header-group 해더 행 그룹으로 만든다. (thead 기본속성)
table-footer-group 푸터 행 그룹으로 만든다. (tfoot 기본 속성)
table-column 열로 만든다. (col기본속성-보이지 않음)
table-cell 하나의 셀로 만든다. (td 기본속성)
table-caption 캡션으로 만든다. (caption 기본 속성)
list-item li요소와 같은 블록박스와 목록항목의 인라인박스로 만든다.
run-in 런인박스로 만든다.
compact 콤팩트 박스로 만든다.
marker 그 요소의 전후에 생성된 내용을 마커로 정의한다.
float left, right, none
margin-top 테두리선 외부 여백, 숫자+단위
margin-right
margin-botton
margin-left
margin 대표 속성 (top right botton left)
padding-top 테두리선 내부 여백
padding-right
padding-botton
padding-left
padding 대표 속성
border-top-style 테두리선 모양(none, solid, double, doted, inset, outset, redge, groove, dashed(점선) )
border-right-style
border-botton-style
border-left-style
border-style 대표속성
border-top-width 테두리선 두께
border-right-width
border-botton-width
border-left-width
border-width 대표 속성
border-top-color 테두리선 색상
border-right-color
border-botton-color
border-left-color
border-color 대표 속성
border 대표 속성(style, width, color 속성이 네 방향 모두 같을때)
목록 스타일
list-style-type none, disc, circle, square, decimal,
lower-roman, upper-roman, lower-alpha, upper-lapha
list-style-position inside, outisde
list-style-image url
list-style 대표 속성(type position image)
레이어 스타일
position Box를 레이어로 만듬, 네스케이프에서는 static,fixed를 absolute와 동일 취급
relative 상대적 위치 결정
absolute 좌측상단 기준 위치 결정
static 위치 이동 금지, 바탕 효과
fixed 위치 고정
left x축 이동 길이
top y축 이동 길이
z-index 겹치는 Box 순서
visibility viivility,hidden(box숨김)
overflow visible(fixed), hidden, auto, scroll (범위를 벗어난 글씨 처리 방식)
clip auto,rect(top,left,botton,right) (특정 영역만 보이도록 클립)
그 외 추가
ime-Mode active 한글을 기본 입력 언어로 설정
inactive 영어를
disabled 영어만(한영키X)
deactivated 한글모드(한영가능)
auto 자동변경
선언예
자바스크립트 document.form.input1.text.style.imeMode = active;
스타일 <input style='ime-mode:active'>
filter 필터효과
shadow(속성=값,...) 그림자,color,direction(방향)
glow() 입체,color,strength(강도)
blur() 번짐,color,strength
alpha() 불투명,opacity(불투명도,%),finishopacity(증감의 끝 불투명도),style(1:단일,2:선형,3:사각형)
text-overflow block 객체의 밖으로 출력된 텍스트의 표현 방식을 결정
text-overflow-mode, text-overflow-ellipsis 의 단축 모드
강제 설정 방법 : white-space 값을 nowrap 설정 또는 <NOBR>태그로 감싸야함.
객체가 좁거나 단어가 길어 줄바꿈 기회가 없으면 nowrap에 적용전에 이루어짐
넘처흐름 설정 방법 : visible 이외의 값으로 설정
overflow를 hidden 또는 scroll,auto(스크롤) 설정
cilp 기본값, 밖으로 나온 내용을 단순 절삭
ellipsis 밖으로 나온 글을 잘라내고 마지막 부분을 ... 으로 출력
text-overflow-mode block 객체의 길이보다 텍스트가 길면 이하의 값을 정해 줄 수 있음
clip 기본, 단순 잘라냄
ellipsis text-overflow-ellipsis 속성에서 정한 텍스트를 표시, 기본값은 "..."
ellipsis-word ellipsis 와 비슷하지만 문자가 아니라 문자열 단위로 자름
text-overflow-ellipsis text-overflow-mode 값이 ellipsis 일때 들어갈 문자를 정함
url 마지막 부분에 들어갈 이미지 지정
"문자열" 마지막 부분에 들어갈 문자 지정
inherit 문자 지정을 하며 ellipsis-end와 ellipsis-after 동시 표기시 after만 표현
word-wrap 객체의 밖으로 텍스트가 출력되면 줄바꿈을 하여 표현하도록함
normar 기본값, 글자가 밖으로 표출
break-word 글자가 객체를 벗어나면 강제로 줄바꿈하여 객체 안쪽에 출력
white-space 객체에서 공백문자들을 표시 방법을 설정 할 수 있음
normal 기본값, 줄바꿈 유지
pre 문서 소스에 서식을 할당해서 표시
nowrap 요소 내에서 줄바꿈 방지
float block 객체의 정렬 위치를 결정
align은 객체안의 정렬 모드를 결정하지만 float은 자식의 위치를 결정
left, right, none
###############################################################################################
###############################################################################################
###############################################################################################
Explorer 전용 스타일
이미지 확대 축소
zoom %
스크롤바 속성
scrollbar-arrow-color 화살표 색
scrollbar-face-color 표면의 색
scrollbar-3dlight-color 외곽 좌측과 위
scrollbar-darkshadow-color 외곽 우측과 아래
scrollbar-highlight-color 안쪽 좌측과 위
scrollbar-shadow-color 안쪽 우측과 위
scrollbar-track-color 바닥
IME-모드
active 한글 먼저 입력
inactive 영문 먼저 입력
disabled 영문만 입력
auto 현재 한영키 상태에 맞춤
Explorer 필터 filter:필더(속성:속성값, 속성=속성값); , *표시 크기 속성이 정해진 Box, 레이어만 적용
alpha() * 투명화
opacity 불투명도 시작점, %
finishOpacity 불투명도 끝점, %
startX 효과 시작 X축
startY 효과 시작 Y축
finishX 효과 끝 X축
finishY 효과 끝 Y축
style 필터 종류, 0~3(균일, 선형, 원형, 장방형)
enabled 적용 여부
blur() * 번짐
add 원본과 변형본의 합성 여부
strength 적용 픽셀 수
direction 번짐 방향
enabled 적용 여부
chroma() 특정색 투명화
color, enabled
dropshadow() 그림자효과
color,offX,offY,positive
flipH() * 좌우반전
flipV() * 상하반전
glow() * 특정색으로 주변을 밝힘
color, strength, enabled
gray() 흑백이미지
invert() * 색 반전
light() 서치라이트효과(자바스크립트전용)
mask() * 글씨를 제외한 부분 특정색으로 칠
color, enabled
shadow() * 자연스런 그림자효과
color, direction, enabled
wave() 휘어짐효과
add, freq, lightstrength, strength, enabled
xray() * 필름 효과
blendtrans() 장면전환, 색,이미지 점진적 교체(자바스크립트전용), <META>테그 이용
revealtrans() 장면전환, 24개의 변환 효과(자바스크립트전용), <META>테그 이용
###############################################################################################
###############################################################################################
###############################################################################################
자바스크립트
###############################################################################################
내부 선언
<SCRIPT language="javascript"></SCRIPT>
외부 파일
<SCRIPT language="javascript" src="파일명"></SCRIPT>
이벤트 핸들러 속성
onClick="alert('버튼을 클릭 했습니다.')"
URL을 바꾸는 속성="javascript:함수호출()"
<A href="javascript:함수(); return false">링크</A>
주의
<script type="text/javascript">
<script language="javascript">
<script>
자바스크립트로 이벤트 적용 방법
addEventListener(표준), attachEvent(IE)
addEventListener("on을 제외한 이벤트 이름", 함수, 버블링여부)
document.getElementById("tagname").addEventListener("click",myfunction,false);
document.getElementById("tagname").attachEvent("onclick",myfunction);
###############################################################################################
예약어
abstract boolean break byte case catch
char class const continue default do
double else extends false final finally
float for function goto if implements
import in instanceof int interface long
native new null package private prodecte
public return short static super switch
synchronized this throw throws transient true
try var void while with
###############################################################################################
배열명.length 배열의 길이
!== 자료형까지 다른지 비교
=== 자료형까지 같은지 비교
###############################################################################################
명령어
typeof 데이터형을 나타냄, "Number", "String", "Boolean", "Object", "Function", "undefined"
constructor
instanceof 어느클래스의 인스턴스냐 하는 것, Array, Object, Number...
typeof는 모든 객체를 6개로 구분지어 반환할 뿐 자세한 타입은 구별해주지 않음
typeof는 new Date(),new Array(),{},new User() 등도 단지 'object '로 반환
세분화를 위해서는 constructor와 instanceof를 사용해야함
모든 객체에는 constructor 프로퍼티가 있으며, instanceof는 객체가 해당 함수에서 생성된 것인지 알려줌
브라우저의 엔진에 따라 조금씩 차이를 보이는 constructor와 instanceof 값이라 살짝 사용에 조심을 요하지만,
보통 비교할때는 사용자가 생성한 함수에서 만들어낸 객체의 타입의 동일 여부를 비교한다거나,
내장 객체와의 비교시에는 typeof로 먼저 object인지 확인한 뒤 constructor로 확인사살(?) 한다면 좀더 정확한 형을 구분해낼 수 있겠다.
주의 : onstructor와 instanceof 객체는 브라우저 자바스크립트 엔진에 따라 다른 결과를 낼 수 있음
예를 들면, HTMLElement 는 크롬과 파이어폭스에는 있지만, IE에는 없다.(IE도 8 이전 버전에는 단순히 태그는 object 취급이다.)
따라서 IE에서
document.getElementById("div_ele") instanceof HTMLElement
는 오류를 발생시킨다. IE에는 HTMLElement 가 없기 때문이다.
document.getElementById("div_ele") instanceof HTMLDivElement
혹은
document.getElementById("div_ele") instanceof Element
라고 써줘야 한다.
하지만 파이어폭스나 크롬은 위 둘중 어느것으로 해도 모두 true를 반환한다.
Element는 IE8, 크롬, 파이어폭스 공통으로 적용되는 모든 엘리먼트의 슈퍼 객체가 된다고 볼 수 있고,
HTMLElement는 파이어폭스나 크롬에서 적용되는 모든 엘리먼트의 슈퍼 객체가 된다고 볼 수 있다.
문자열
구분 constructor typeof instanceof String instanceof Object
"hello" String string false false
new String("hello") String object true true
리터럴로 생성한 문자열은 constructor 가 String이고 typeof도 String이지만 instanceof 결과는 String, Object 둘다 false이다.
하지만 생성자 문자열은 typeof가 object이며, instanceof의 값도 두 경우 모두 true가 된다. 함수로부터 생성된 객체의 속성을 모두 가지고 있는 셈이다.
숫자
구분 constructor typeof instanceof Number instanceof Number
1 Number number false false
new Number(1) Number object true true
내장 객체 (대표로 Array를 사용하였다)
구분 constructor typeof instanceof Function instanceof Object
Array Function function true true
new Array() Array object false true
Array는 Function이고, Object이지만 Array constructor는 아니다.
하지만 new Array()로 생성된 객체는 Object이며 constructor로 Array를 가진다. 하지만 Function은 아니다.
글로벌 객체 (브라우저에서는 window 객체)
브라우저 구분 constructor typeof instanceof Window instanceof Object instanceof Function
IE8 Window object true false (*) false
파이어폭스 Window object true true false
크롬 DOMWindow object false (*) true false
정말 브라우저별로 제멋대로이다.
IE8에서는 글로벌 객체의 instanceof Object는 false이다. 하지만 typeof는 object...
크롬은 글로벌 객체의 constructor는 DOMWindow라는 함수객체이다. 따라서 instanceof Window의 값은 false가 된다.
사용자 생성 객체
임의의 생성자 함수 function User(){}과, 객체 리터럴인 {}가 있다고 가정. constructor 속성의 차이가 있다
구분 constructor typeof instanceof Object instanceof Function
new User() User object true false
{} Object object true false
document 객체
대체로 비슷하나, IE에서는 document 객체의 instanceof 값이 false이다. 이상한 해석이다;
브라우저 구분 constructor typeof instanceof HTMLDocument instanceof Object instanceof Function
IE8 HTMLDocument object true false (*) false
파이어폭스 HTMLDocument object true true false
크롬 HTMLDocument object true true false
Element 객체 (div 참조라고 가정하겠다)
IE는 HTMLElement객체는 존재하지 않고 그냥 Element 하나이지만 파이어폭스와 크롬은 Element도 있고 HTMLElement도 있다
브라우저 구분 constructor typeof instanceof Object instanceof Element instanceof HTMLElement
IE8 HTMLDivElement object true true false
파이어폭스 HTMLDivElement object true true true
크롬 HTMLDivElement object true true true
undefined, null
null은 typeof 값이 object. undfined는 undefined이다. 둘다 constructor 값은 구할 수 없다. 그리고 instanceof의 값은 전부 false이다. 어느 객체도 아니라는 것이다
구분 constructor typeof instanceof Function instanceof Object
undefined 오류 undefined false false
null 오류 object false false
내장 함수
eval(string) 숫자 형태의 문자를 숫자로 바꾸어 연산까지함, 함수도 실행가능
escape(string) non-ASCII을 UTF-8로 변환, +, 공백(space) 모두 공백으로 처리하는 문제가 있어서 non-ASCII를 정확하게 처리하지 못함.
처리 못하는 문자 : @*/+
encodeURI(string) 외따옴표(')는 URI에서 valid한 문자로 사용하기 때문에 처리하지 못함
처리 못하는 문자 : ~!@#$&*()=:/,;?+'
encodeURIComponent() 외따옴표(')는 URI에서 valid한 문자로 사용하기 때문에 처리하지 못하지만 대부분의 경우 URI를 인코딩 할 때 사용
처리 못하는 문자 : ~!*()'
unescape(code) UTF-8를 non-ASCII로 변환
decodeURI() encodeURI() 반대로 변환
decodeURIComponent() encodeURIComponent() 반대로 변환
isNaN(num) 숫자로 변환 불가능(Not a Number) 이면 true, 숫자나 숫자로 변환가능한 문자열이면 false
isFinite(num) 숫자형이면 true를 반환한다.
parseInt(string, 진수) 숫자로 반환, 진수를 정의("09"와 같은 형태의 숫자는 8진수 0으로 반환을 방지)
parseFloat(string, 진수) 숫자로 반환
escape(encodeURIComponent()) 한글처리를 위한 방법, jsp에서 받을때 java.net.URLDecoder.decode(request.getParameter(""), "UTF-8");
객체 함수(XML, Node)
window 최상위 객체, 생략가능
alert()
confirm()
prompt()
Document 작업중인 문서를 의미하는 가상 객체
write() 화면에 HTML로 작성된 내용을 모두 지우고 ()안에 입력된 내용을 출력한다.
this.변수명 추상화,함수가 실행된 뒤에도 메모리에 남아있어 다시 불러올 수 있다.
함수["변수"] 함수내 변수값을 불러오는 방법, 함수.변수 와 같은 효과
함수.새변수=값 함수에 변수를 임시적으로 추가
함수.prototype.새변수=값 함수에 변수를 영구적으로 추가
innerHTML 지정된 개체의 내부 HTML 태그 및 문자열을 지정하거나 반환한다.
*표는 Ex 5.5, Net 6.0 이상 지원
Node 관련 프로퍼티 설명 (도큐먼트 탐색기능)
firstChild 요소의 첫번째 자식 노드를 반환
lastChild 요소의 마지막 자식 노드를 반환
previousSibling 어떤 요소에서 현재 자식 노드와 같은 수준에 있는 이전 자식 노드를 반환
nextSibling 어떤 요소에서 현재 자식 노드와 같은 수준에 있는 다음 자식 노드를 반환
ownerDocument 노드를 포함하고 있는 도큐먼트의 루트 노드를 반환
parentNode 트리 구조에서 현재 노드를 포함하고 있는 요소를 반환
nodeNameⓝ 노드의 이름을 반환
nodeTypeⓝ 노드의 형식을 숫자로 반환
nodeValue 노드의 값을 평범한 텍스트의 형태로 설정
contentType 문서의 형식(파일명)을 반환(html, text, ...)
characterSet 기본 문자셋(EUC-KR)
documentElement* DOM을 구성하는 최상위 Element(<html>, XML루트)
parentWindowⓔ Document 객체를 포함하고 있는 윈도우 객체
attributes 엘리먼트의 애트리뷰트 리스트를 리턴
childNode 자식을 리턴
Node 개체의 메서드 설명 (도큐먼트에 요소 추가, 제거)
appendChild(new node) 자식 노드의 목록의 끝에 새로운 node 개체를 추가한다.
appendData(text) 제공한 텍스트를 텍스트 노드의 기존 텍스트 끝에 추가
cloneNode(child option) 인자로 제공한 node 개체와 똑같은 새로운 node 개체를 만든다. 이때 선택사항으로 모든 자식 노드를 포함할 수도 있다.
createAttribute(attributeName)* 매개변수 문자열을 Attribute_Node로 생성
createComment()* 매개변수 문자열을 Comment_Node롤 생성
createElement(elementName) 해당되는 이름으로 엘리먼트를 생성, "div" 또는 "<div id='aa'></div>"
createTextNode() 지정된 문자열 값을 가지는 텍스트 엘리먼트를 생성한다.
getAttribute(a) a라는 애트리뷰트의 값을 리턴
getAttributeNode(a) a라는 애트리뷰트 노드를 리턴
getElementsByTagName(eleName) eleName 이름을 가진 엘리먼트 노드의 리스트를 리턴
getElementById(id) node id 값을 가진 객체를 리턴, id는 사용 불가
hasChildNodes() 어떤 노드가 자식 노드를 가지고 있을 경우 true를 반환한다.
insertBefore(new node, current node) 자식 노드의 목록에서 현재 노드로 지정한 노드 앞에 새로운 node 개체를 추가한다.
insertData(idx, text) 텍스트 노드의 중간에 텍스트를 추가할 수가 있음. idx의 위치에 text 삽입
removeAttribute(a) a라는 애트리뷰트를 제거
removeAttributeNode(a) 제공된 노드와 매치되는 애트리뷰트 노드를 제거
removeChild(child node) node 개체의 자식 노드 목록에서 하나의 자식 노드를 제거한다.
removeNode(true)
replaceChild(new child, old child) 예전 자식 node 개체를 새로운 자식 node 개체로 바꾼다.
replaceData(idx, len, text) 지정된 위치부터 시작하여 len 길이만큼의 문자를 제거하고 text 로 대치
setAttribute(a,v) a라는 애트리뷰트를 생성하고 v의 값을 설정
style 다른방법으로 적용(style.cssText = 'width:100;')
createElement로 생성한 경우에는 IE에서 style이 적용되지 않는 경우가 있으므로 setAttribute를 사용
Ajax
responseXML XML문서를 받을때 <?xml version='1.0' encoding='utf-8'?> 제거해야됨.
responseTEXT
###############################################################################################
Location 객체
속성
hash : 문서의 표식이름을 알려줍니다
host : 도메인 이름을 포함한 호스트의 주소와 포트번호를 알려줍니다
hostname : 문서의 URL 주소중에 호스트 이름을 알려줍니다
href : 문서의 URL 주소를 알려주거나 특정(지정한) URL로 이동합니다
이 속성에 URL 을 지정하여 지정 사이트로 이동하게 되죠
그러나 이속성은 temp에 저장된 문서를 로딩할 가능성이 있습니다
path : 문서의 디렉토리 위치를 설정하거나 알아냅니다
protocol : 프로토콜 종류를 설정하거나 알아냅니다
메서드
reload(true) : 브라우저가 현재 문서를 다시 로드합니다
replace("특정 URL") : 현제 문서를 지정한 특정 URL로 이동합니다
###############################################################################################
Object 객체
prototype 객체의 원형
constructor 생성자 함수를 출력
toString() 문자열로 반환
valueOf() object형으로 반환
Array 객체 ⓝ 네스케이프, ⑥ Explorer 5.5 이후, * RegExp 객체 참조
length
index *
input *
lastIndex*
prototype
concat(a1 [,a2])
join([구분자])
pop() ⑥
push(요소[,...]) ⑥
reverse()
shitf() ⑥
slice(start[,end]) ⑥
sort()
splice(start, n) ⑥
toSource() ⓝ
toString()
unshitf(요소[,...]) ⑥
valueOf()
선언
var empty = []; //빈배열
var empty = new Array(); //빈배열
var a = [1,'abc',new Date(),['x','y'],true]; //여러형태저장
var intArr = [1,2,3,4,5]; //숫자배열
var mixArr = [1,2,100,"abc"]; //서로다른 타입이 섞인 배열
var table = [base,base+1,base+2]; //임의 수식이 있는 배열
var objArr = [[1,{x:1,y:2},[2,3]]; //객체 리터럴이나 또 다른 배열 리터럴을 포함하는 배열
배열을 스택처럼 다루기
Array.shift(); // 배열의 첫 번째 원소 삭제
Array.unshift(); // 배열의 첫 번째 원소 추가
Array.push(); // 배열의 마지막 원소 추가
Array.pop(); // 배열의 마지막 원소 삭제
배열을 자르고 변경하고
slice() 배열내 배열 추출
var testArr = ['a', 'b', 'c', 'd' ];
document.write( testArr.slice(1) ); // ['b', 'c', 'd']
document.write( testArr.slice(1,3) ); // ['c', 'd'] -> 마지막 인덱스는 결과값에 포함되지 않는다.
concat() 두 개의 Array를 합쳐서 하나의 Array로 리턴한다
var alpha = ['a', 'b']
var alpha2 = ['c', 'd', 'e']
var str = alpha.concat( alpha2 );
document.write(str); // ['a', 'b', 'c', 'd', 'e']
splice()
Array.splice(위치,삭제갯수,삽입요소1,삽입요소2,.....,삽입요소N)
var arr=["하나","둘","셋","넷"]
arr.splice(2,1,"둘반","둘반의반");
arr=>["하나","둘","둘반","둘반의반","넷"]
join() 열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환,전달자로 구분자
var a = [1,2,3];
var s = a.join();
document.write(s);//"1,2,3";
Boolean 객체
prototype
constructor
toSource() ⓝ
toString()
valueOf()
Date 객체 시스템 날짜,시간, 1/1000초, 1970.1.1 00:00:00 기준
Date(1/1000초) 기준시로 부터 경과 시간
Date("월 일, 년 [시:분:초]") 입력 시간 객체화
Date(년,월,일[,시:분,초,1/1000초]) 입력 시간 객체화
parse(month 일, 연[,시,분,초]) ⓢ 기준시부터 경과 시간
UTC(연,월,일[,시,분,초]) 기준시부터 경과 시간
toLocaleString() Locale 시간의 문자열로 변환
toGMTString() GMT를 문자열로 리턴
toUTCString() 우주시간으로 리턴
toString() 문자열로 반환
valueOf() 기준시부터 객체가 만들어진 시간을 리턴
get,set 메소드
Year(연도)
FullYear(연도[,월,일])
Month(월[,일])
Date(일)
Day(요일)
Hours(시) setHours 사용 주의 : local(GMT +9,한국)시간을 UTC으로 변환되어 -9시간 해주기 때문에 날짜가 설정한 시간에 따라 하루전으로 바뀔수 있음
예) local 2000.1.10 8시로 설정시 UTC로 2000.1.9 23시로 변함, 따라서 0시로 설정하면 2000.1.9일이
회피 방법 : 처음부터 UTC 시간으로 설정 new Date(Date.UTC(2000,1,9,0))
Minutes(분)
Seconds(초)
Time(밀리초)
Milliseconds(1/1000초)
UTCDate(일)
UTCDay(요일)
UTCFullYear(연[,월,일])
UTCHours(시,[분,초])
UTCMilliseconds(1/1000초)
UTCMinutes(분[,초])
UTCMonth(월[,일])
UTCSeconds(초[,1/100초])
Function 객체
arguments 함수에 전달된 argument를 모두 포함하는 배열, 함수 내부용
arity ⓝ 함수에 선언된 arguments의 수
length 함수에 선언된 arguments의 수
prototype 생성자 함수에 새로운 프로퍼티 추가
constructor 생성자함수
apply() 생성자함수 안에서 다른 객체의 생성자함수 호출, 자신 객체와 arguments 배열 전달
call() 생성자함수 안에서 다른 객체의 생성자함수 호출, 자신 객체와 변수 전달
toString() Function 객체를 문자열로 리턴
Argument 객체
length 함수에 실제 전달된 매개변수의 수
arguments[index] 실제로 전달한 매개변수 배열
Math 객체
수학적인 계산을 하는데 필요한 함수나 상구 값을 제공
E 자연 로그 밑에 사용되는 오일러 상수 값
LN10 밑수가 10인 상용로그 값인 2.302을 의미
LN2 밑수가 2인 자연로그 값인 0.693을 의미
LOG10E
LOG2E
PI 원주율인 3.14159를 의미
SQRT1_2 0.5의 제곱근 값인 0.707을 의미
SQRT2 2의 제곱근 값인 1.414을 의미
abs(x) x의 절대값
acos(x) 아크 코사인 값
asin(x) 아크 사인 값
atan(x) 아크 탄젠트 값
atan2(x, y)
ceil(x) 올림, x보다 같거나 큰 정수중 가장 작은 정수 값
cos(x) 코사인 값
exp(x) E의 x승
floor(x) 내림, x보다 같거나 적은 정수 중 가장 큰 정수 값
log(x) 로그 함수
max(x, y,...) x,y중 큰 수
min(x, y,...) x,y중 작은 수
pow(x, y) x의 y승
random() 0에서 1사이의 난수
round(x) 반올림(ceil,floor)
sin(x) 사인 값
sqrt(x) x의 제곱근
tan(x) 탄젠트 값
Number 객체
MAX_VALUE
MIN_VALUE
NaN
NEGATIVE_INFINITY
POSITIVE_INFINITY
prototype
valueOf()
toString([진수])
String * 객체 fromCharCode(num)는 정적메소드, ⓡ 표시는 매개변수에 정규식이 사용될 수 있는 것
length
prototype
big()
small()
blink()
bold()
fixed()
italics()
Strike()
sub()
sup()
fontcolor("color")
fontsize(숫자)
anchor("name")
link("url")
charAt(index) 지정된 위치에서 문자 찾기
charCodeAt(index)
concat(str) 두 문자열을 합치기
fromCharCode(num)*
indexOf(str) 지정된 문자의 위치를 왼쪽부터 찾기
lastIndexOf(str) 지정된 문자의 위치를 오른쪽부터 찾기
slice(i1, i2)
toLowerCase() 소문자로 변환
toUpperCase() 대문자로 변환
match(str) ⓡ
replace(str, rep) ⓡ
search(str) ⓡ
split("분리자" [,n]) ⓡ
substring(i1,i2) 문자열 인덱스 i1에서 i2까지 잘라냄
substr(i,num) 문자열 인덱스 i1부터 num개를 잘라냄
###############################################################################################
정규식과 RegExp 객체
match(reg) 매치된 결과들의 내용을 Array 객체로 리턴, 없으면 null 리턴
search(reg) 첫 번째 매치되는 문자열의 시작 index 값, 없으면 -1 리턴
replace(reg, rep) 1. 첫 번째 매치된 reg를 rep로 교체하여 리턴
2. g속성이 사용되면 매치된 모든 문자열을 교체하여 바뀐 문자열 전체를 리턴, 없으면 원본 문자열 리턴
split(reg [,n]) 문자열을 reg를 기준으로 잘라서 Array객체로 리턴, 없으면 원본 문자열 리턴
reg.test(String) 문자열과 reg가 검사하여 일치여부를 반환(true, false)
exec(reg) 문자열과 reg가 검사하여 일치여부를 반환(str, null)
정규식 선언
정규식(regexp) var 변수명 = /문자열/;
RegExp객체 var 변수명 = new RegExp("아빠");
속성
global 완전 일치
ignoreCase 대문자 소문자 무시
lastIndex 다음 패턴조회를 시작하는 위치
source 조회시킬 패턴
input 검색 문자열의 설정, 변경($_로도 가능)
multiline 줄바구기 코드를 무시할지 여부($_로도 가능), 참(무시하지 않는다), 거짓(무시한다.)로 설정
lastMatch 패턴 조회한 최후의 문자($&로도 가능)
lastParen 패턴 조회한 최후의 substring($+로도 가능)
leftContext 패턴 조회한 값의 앞의 문자($￥Q로도 가능)
rightContext 패턴 조회한 값의 다음 문자($'로도 가능)
$1~$9 패턴 조회한 것의 일부를 저장한다.(9개까지)
i 대소문자 무시
g 전역검색
m 여러 줄에 대한 검색
s 토드(.)문자가 개행문자와 일치, dotall
m 캐럿(^) 문자와 달러 기호($)가 이전 및 이후 개행 문자와 일치, multiline
x 문자열의 공백 문자가 무시 되므로 가독성이 높은 생성자를 작성, extended
flags 문자열의 다른 문자는 모두 무시
한글 정규식
[\uac00-\ud7a3] 0xAC00~0xD7A3 초중종성이 모인 한글자
[\u3131-\u318E] 0x3131~0x318E 자음, 모음
[가-힣]
문자
알파벳, 한글 문자 그대로
숫자 숫자 그래도
/n 8진수 n에 해당하는 ASCII
/xn 16진수 n에 해당하는 ASCII
/un n은 16진수로 표현된 4자리의 숫자로서 해당 Unicode 문자
\f 폼피드 \| |
\n 줄 바꿈 \* *
\r 캐리지 \+ +
\t 탭 \? ?
\v 수직 탭 \( (
[\b] Backspace \) )
\cX 컨트롤 \[ [
\/ / \] ]
\\ \ \{ {
\. . \} }
!#%&@`:;-.<>,~'" 단독 사용 가능 문자
[*],[+],[$],[|] []을 사용해야되는 문자
메타문자
[] [abc] a,b,c 중 하나의 문자와 매치
[^] [^abc] a,b,c 제외한 임의의 한 문자와 매치
{} {} 앞에 있는 항목에 반복될 때 반복횟수를 지정
() 여러 항목을 묶어서 단일 단위로 사용할 수 있도록 하는 것
| a|b 는 a나 b중에 하나와 매치된다.
\num 정규식의 부분표현식에서 num 번째의 부분표현식을 참조
\b 단어와 단어 사이의 경계에 매치되어 해당 단어만을 정확하게 매치
\B 단어의 경계가 아닌 단어의 위치에 매치
\d 0~9까지의 숫자 중에 하나와 매치
\D 0~9 제외한 임의의 문자에 매치
\s 임의의 공백문자(\t, \n, \r, \f, \v)에 매치
\S 공백문자가 아닌 임의의 한 문자에 매치
\w 알파벳과 숫자에 매치되는 임의의 한 문자(알파벳과 \d)
\W 알파벳과 숫자가 아닌 임의의 한 문자
^ 문자열 행의 시작부분과 매치
$ 문자열 행의 끝부분과 매치
. 줄 바꿈 문자(\n)을 제외한 "모든 문자" 하나에 매치
? 앞에 있는 항목과 1회 이하로 매치
+ 앞에 있는 항목과 1회 이상 매치
* 앞에 있는 항목과 0회 이상 매치
단축 문자
. [^\n] 줄 바꿈 문자 \n을 제외한 모든 문자를 의미
\w [a-zA-Z0-9] 알파벳과 숫자에 매치
\W [^a-zA-Z0-9] 알파벳과 숫자를 제외한 모든 문자에 매치
\s [\t\n\r\f\v] 임의의 공백문자(공백을 의미하지만 출력되는 않는문자들)
\S [^\t\n\r\f\v] 공백을 제외한 모든 문자의 매치
\d [0-9] 모든 숫자에 매치되는 문자클래스 /[0123456789]/
\D [^0-9] 숫자를 제외한 모든 문자와 매치
반복 문자
{n} c{n}의 경우 c가 n만큼 반복되는 문자열과 매치
{n,} c{n,}의 경우 c가 n번 이상 반복되는 문자열과 매치
{n,m} c{n,m}의 경우 c가 n번에서 m번만큼 반복되는 문자열과 매치
? c?는 c가 1회 이상인 문자열에 매치되는 메타문자, c{0,1}과 같다
+ c+는 c가 1회 이상인 문자열에 매치되는 메타문자, c{1,}과 같다
* c*는 c가 0회 이상인 문자열에 매치되는 메타문자, c{0,}과 같다
RegExp 객체 * 표시는 static 프로퍼티, ⓔ Explorer 전용, ⓝ Netscape 전용
regexp = new RegExp("정규식 문자열");
regexp = new RegExp("정규식 문자열", 속성);
constructor
global
ignoreCase
lastIndex
multipleline
source
input *
leftContext *
lastMatch *
multline *
rightContext *
lastParen *
$n *
index * ⓔ
lastIndex * ⓔ
complie("식","속성")
exec(str)
test(str) 입력된 문자열이 정규 표현식에 부합하는지 검사
toSource() ⓝ
toString()
예제
var pattern = /[^(가-힣ㄱ-ㅎㅏ-ㅣa-zA-Z0-9)]/gi; //특수문자찾기
[^\w\s가-힣ㄱ-ㅎㅏ-ㅣ!#%&@`:;.<>,~'"*+$|=^\?\(\)\[\]\{\}\-\/\\] //깨진 문자 찾기
var ch1 = /[^0-9]/g; //new RegExp("[^0-9]", "g")
var ch2 = /[^\uac00-\ud7a3\u3131-\u318E]/g;
var ch3 = /^[a-z0-9_]{3,12}$/; //정규식(영문,숫자 그리고 3자~12자)
var ch4 = /^\d{2,4}\/\d{2}\/\d{2}$/ //2010/04/11 형태만 가능하게
var ch5 = /^\w{3,10}/@/\w{3.10}\.\w{3,6}$/ //이메일 형태 정규식
"동해물과 백두산이123".replace(ch1,""); //결과 : 123
if(!ch3.test(str)){ //str 값이 정규식에 맞다면 true를 반환
alert("아이디는 3~12자의 영문 소문자와 숫자,특수기호(_)만 사용할 수 있습니다.");
return false;
}
/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; //메일 체크 정규식
/^\d{3}-\d{3,4}-\d{4}$/; //핸드폰번호 정규식
/^\d{2,3}-\d{3,4}-\d{4}$/; //일반 전화번호 정규식
/^[a-z0-9_]{4,20}$/; //아이디나 비밀번호 정규식
var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
if ( !regExp.test( document.frm.hp.value ) ) {
alert("잘못된 휴대폰 번호입니다. 숫자, - 를 포함한 숫자만 입력하세요.");
return false
}
주석 제거 : /\/\/.$/
###############################################################################################
HTML 특수문자(HyperText Markup Language Special Character)
- �- - 사용하지 않음
space 	 - 수평탭
space - 줄 삽입
- - - 사용하지 않음
space   - 여백
! ! - 느낌표
" " " 따옴표
# # - 숫자기호
$ $ - 달러
% % - 백분율 기호
& & & Ampersand
' ' - 작은 따옴표
( ( - 왼쪽 괄호
) ) - 오른쪽 괄호
* * - 아스트릭
+ + - 더하기 기호
, , - 쉼표
- - - Hyphen
. . - 마침표
/ / - Solidus (slash)
0-9 0-9 - 0부터 9까지
: : - 콜론
; ; - 세미콜론
< < < 보다 작은
= = - 등호
> > > 보다 큰
? ? - 물음표
@ @ - Commercial at
A-Z A-Z - A부터 Z까지
[ [ - 왼쪽 대괄호
\ \ - 역슬래쉬
] ] - 오른쪽 대괄호
^ ^ - 탈자부호
_ _ - 수평선
` ` - Acute accent
a-z a-z - a부터 z까지
{ { - 왼쪽 중괄호
| | - 수직선
} } - 오른쪽 중괄호
~ ~ - 꼬리표
- -Ÿ - 사용하지 않음
  Non-breaking space
¡ ¡ ¡ 거꾸로된 느낌표
￠ ¢ ¢ 센트 기호
￡ £ £ 파운드
¤ ¤ ¤ 현재 환율
￥ ¥ ¥ 엔
| ¦ ¦ 끊어진 수직선
§ § § 섹션 기호
¨ ¨ ¨ 움라우트
ⓒ © © 저작권
ª ª ª Feminine ordinal
≪ « « 왼쪽 꺾인 괄호
￢ ¬ ¬ 부정
­ ­ Soft hyphen
? ® ® 등록상표
&hibar; ¯ ¯ Macron accent
° ° ° Degree sign
± ± ± Plus or minus
² ² ² Superscript two
³ ³ ³ Superscript three
´ ´ ´ Acute accent
μ µ µ Micro sign (Mu)
¶ ¶ ¶ 문단기호
· · · Middle dot
¸ ¸ ¸ Cedilla
¹ ¹ ¹ Superscript one
º º º Masculine ordinal
≫ » » 오른쪽 꺾인 괄호
¼ ¼ ¼ 4분의 1
½ ½ ½ 2분의 1
¾ ¾ ¾ 4분의 3
¿ ¿ ¿ 거꾸로된 물음표
A À À Capital A, grave accent
A Á Á Capital A, acute accent
A Â Â Capital A, circumflex accent
A Ã Ã Capital A, tilde
A Ä Ä Capital A, dieresis or umlaut mark
A Å Å Capital A, ring (Angstrom)
Æ Æ Æ Capital AE diphthong (ligature)
C Ç Ç Capital C, cedilla
E È È Capital E, grave accent
E É É Capital E, acute accent
E Ê Ê Capital E, circumflex accent
E Ë Ë Capital E, dieresis or umlaut mark
I Ì Ì Capital I, grave accent
I Í Í Capital I, acute accent
I Î Î Capital I, circumflex accent
I Ï Ï Capital I, dieresis or umlaut mark
Ð Ð Ð Capital Eth, Icelandic
N Ñ Ñ Capital N, tilde
O Ò Ò Capital O, grave accent
O Ó Ó Capital O, acute accent
O Ô Ô Capital O, circumflex accent
O Õ Õ Capital O, tilde
O Ö Ö Capital O, dieresis or umlaut mark
× × × Multiply sign
Ø Ø Ø width="130"Capital O, slash
U Ù Ù Capital U, grave accent
U Ú Ú Capital U, acute accent
U Û Û Capital U, circumflex accent
U Ü Ü Capital U, dieresis or umlaut mark
Y Ý Ý Capital Y, acute accent
Þ Þ Þ Capital Thorn, Icelandic
ß ß ß Small sharp s, German (sz ligature)
a à à Small a, grave accent
a á á Small a, acute accent
a â â Small a, circumflex accent
a ã ã Small a, tilde
a ä ä Small a, dieresis or umlaut mark
a å å Small a, ring
æ æ æ Small ae diphthong (ligature)
c ç ç Small c, cedilla
e è è Small e, grave accent
e é é Small e, acute accent
e ê ê Small e, circumflex accent
e ë ë Small e, dieresis or umlaut mark
i ì ì Small i, grave accent
i í í Small i, acute accent
i î î Small i, circumflex accent
i ï ï Small i, dieresis or umlaut mark
ð ð ð Small eth, Icelandic
n ñ ñ Small n, tilde
o ò ò Small o, grave accent
o ó ó Small o, acute accent
o ô ô Small o, circumflex accent
o õ õ Small o, tilde
o ö ö Small o, dieresis or umlaut mark
÷ ÷ ÷ Division sign
ø ø ø Small o, slash
u ù ù Small u, grave accent
u ú ú Small u, acute accent
u û û Small u, circumflex accent
u ü ü Small u, dieresis or umlaut mark
y ý ý Small y, acute accent
þ þ þ Small thorn, Icelandic
y ÿ ÿ Small y, dieresis or umlaut mark
###############################################################################################
###############################################################################################
###############################################################################################
HTMLElement 객체의 프로퍼티
all ⓔ
align ⓔ
className
children ⓔ
clientHeight
clienLeft ⓔ
clientTop ⓔ
clientWidth ⓔ
dir
disabled
id
innerHTML
innerText ⓔ
outerText ⓔ
outerHTML ⓔ
style
background borderRightStyle fontVariant paddingLeft
backgroundAttachment borderRightWidht fontWeight paddingRight
backgroundColor borderStyle height paddingTop
backgroundImage borderTop left position
backgroundPosition borderTopColor letterSpacing right
backgroundRepeat borderTopStyle lineHeight textAlign
border borderTopWidth listStyle textIndent
borderBottom borderWidth listStyleImage textTransform
borderBottomColor bottom listStylePosition top
borderBottomStyle clear listStyleType verticalAlign
borderBottomWidth clip margin visibility
borderColor color marginBottom witeSpace
borderLeft cursor marginLeft width
borderLeftColor display marginRight wordBreak
borderLeftStyle font marginTop wordSpacing
borderLeftWidth fontFamliy overflow zIndex
borderRight fontSize padding zoom ⓔ
borderRightColor fontStyle paddingBottom filter ⓔ
tagName
this
title
sourceIndex ⓔ
parentElement ⓔ
offsetParent
offsetHeight
offsetWidth
offsetLeft
offsetTop
readyState ⓔ
scrollHeight ⓔ
scrollWidth ⓔ
scrollLeft ⓔ
scrollTop ⓔ
컬렉션(Collection)
all ⓔ
all[index] HTMLElement 객체의 sourceIndex 프로퍼티를 사용
all["name"] name속성을 가지는 태그의 이름을 통해서 참조, all("name"), all.name
all["ID"] ID속성을 가지고 있는 HTMLElement 객체를 참조
length 해당 객체에 포함된 모든 HTMLElement 객체의 수
tags() 매개변수로 입력된 태그와 같은 모든 HTMLElement 객체의 배열
applets
anchors
cells ⓔ
children ⓔ
childNodes
elements
embeds
images
filters ⓔ
frames
links
options
plugins
scripts
stylesheets
name 속성을 가지는 태그
document.Collection[index]
document.Collection["name"]
document.name
document.all["Name"] ⓔ
document.all.Name ⓔ
ID 속성을 사용한 태그
document.getElementByld("IdName")
documnet.all["IdName"] ⓔ
Idname ⓔ
this 키워드 사용
<태그 on이벤트="this.프로퍼티=값"></태그>
###############################################################################################
###############################################################################################
###############################################################################################
이벤트의 종류 * : Explorer 5.5 이상, ⓔ : Explorer 전용
Abort
BeforeCopy
BeforeCut
BeforePaste
AfterPrint ⓔ
BeforePrint ⓔ
BeforeUnload ⓔ
Blur
Change
Checkbox,FileUpload, Password,
Radio, Select, Text, Textarea
Click
ContextMenu
Copy
Cut
DblClick
Drag ⓔ
DragStart ⓔ
DragEnter ⓔ
DragOver ⓔ
DragLeave ⓔ
DragEnd ⓔ
Drop ⓔ
Error
Focus
KeyDown
KeyPress
KeyUp
Load
Mousedown
MouseEnter *
MouseLeave *
MouseMove
MouseOut
MouseOver
MouseUp
MouseWheel ⓔ
Move
Paste
Reset
Resize
Scroll
Select
SelectStart ⓔ
Submit
Unload
Explorer Event 객체
altKey
altLeft
button 마우스 0,1,2(좌,중,우) ,브라우저 마다 값이 다름
cancelBubble true : 이벤트를 막기(버블링용)
stopPropagation() FF용
clientX, clientY
ctrlKey
ctrlLeft
dataTransfer
fromElement
keyCode
숫자 48~57
영문(대,소) (65~90,97~122)
특수키
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
page down 34
end 35
home 36
left arrow,up,right,down(←,↑,→,↓) 37~40
insert 45
delete 46
left window key 91
right window key 92
select key 93
numpad 0~9 96~105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1~f12 112~123
num lock 144
scroll lock 145
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 222
offsetX, offsetY
propertyName
qualifier
reason
repeat
returnValue false : 이벤트 취소(키 입력 막기), FF용 : preventDefault()
onclick
oncontextmenu
oncopy
oncut
ondragstart
ondrop
onkeydown
onkeypress
onmouseover
onpaste
onreset
onselectstart
onsubmit
screenX, screenY
shiftKey
shiftLeft
srcElement
toElement
type
x, y
Netscape Event 객체
altKey ⑥
bubbles ⑥
button ⑥
cancelBubble ⑥
clientX,clientY ⑥
currentTarget ⑥
ctrlKey ⑥
data
eventPhase ⑥
keyCode ⑥
layerX, layerY
metaKey ⑥
orginalTarget ⑥
pageX, pageY
rangeOffset
rangeParent
screenX, screenY
shiftKey
target
timeStamp
type
which
width, height
정적 변수들 MOUSEDOWN, MOUSEUP, MOUSEOVER, MOUSEOUT, MOUSEMOVE,
MOUSEDRAG, CLICK, DBLCLICK, KEYDOWN, KEYUP, KEYPRESS, DRAGDROP,
FOCUS, BLUR, SELECT, CHANGE, RESET, SUBMIT, SCROLL, LOAD, UNLOAD,
XFER_DONE, ABORT, ERROR, LOCATE, MOVE, RESIZE, FORWARD, HELP,
BACK, TEXT
정적 modifiers ALT_MASK, CONTROL_MASK, SHIFT_MASK, META_MASK
Event객체 return 값
onclick, oncontetmenu, ondragstart, onkeydown, onkeypress, onmouseover, onreset,
onselectstart, onsubmit
###############################################################################################
###############################################################################################
###############################################################################################
브라우저객체
window
event ⓔ
frames
history
document
all ⓔ
anchors
applets
body
embeds
forms
Button
Checkbox
File
Hidden
Password
Radio
Reset
Select
Submit
Text
Textarea
frames ⓔ
images
links
plugins ⓝ
stylesheets
location
navigator
screen
###############################################################################################
window 객체
프로퍼티 ⒪ : 윈도우의 하위객체
closed
defaultStatus
document ⒪
frames ⒪
history ⒪ * : Read 권한이 있는 Netscape 사용가능
current *
length
next *
previous *
back()
forward()
go(num)
toString() *
Image ⒪
length
location ⒪
hash
host
hostname
href
pathname
port
protocol
search
assign(url)
reload(bool)
replace(url)
name
navigator ⒪
opener
Option ⒪
parent
self
screen ⒪
screenLeft ⓔ
screenTop ⓔ
status 상태 표시줄 문자열
top
window
innerHeight ⓝ
innerWidth ⓝ
outerHeight ⓝ
ourerWidth ⓝ
pageXOffset ⓝ
pageYOffset ⓝ
Netscape 메뉴들 ⓝ locationvar, menubar, personalbar, scrollbar, statusbar, toolbar 프로퍼티는
Netscape에서 각각의 항목을 보여줄 것인지를 설정하는 Boolean 값
Explorer 메뉴들 Explorer의 윈도우 메뉴들은 open() 메소드에 의해서 설정된다.
메소드
alert(string)
blur()
clearInterval(mark)
clearTimeout(mark)
close()
confirm(string)
focus()
moveBy(x, y)
moveTo(x, y)
open(["f","n","o"])
directories
fullscreen ⓔ
height
width
left
top
location
menubar
resizable
scrollbars
status
toolbar
innerHeight ⓝ
innerWidth ⓝ
outerHeight ⓝ
outerWidth ⓝ
screenX ⓝ
screenY ⓝ
resizeBy(x, y)
resizeTo(x, y)
scrollBy(x, y)
scrollTo(x, y)
setInterval("f()", t)
setTimeout("f()", t)
navigator("URL") ⓔ
appCodeName Mozilla,
appName Netscape, navigator.appName.indexOf("Microsoft")
appVersion 5.0 (Linux; U; Android 2.1-update1; ko-kr; XT720 Build/STSKT_N_79.11.36R1) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17,
browserLanguage ⓔ
cookieEnabled
cpuClass ⓔ
language ⓝ
mimeTypes ⓝ
oscpu ⓝ
platform Linux armv7l
plugins ⓝ
systemLanuage ⓔ
userAgent Mozilla/5.0 (Linux; U; Android 2.1-update1; ko-kr; XT720 Build/STSKT_N_79.11.36R1) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
userLanguage ⓔ
userProfile ⓔ
vendor ⓝ
vendorSub ⓝ
javaEnabled()
showModalDialog() ⓔ
dialogLeft, dialogTop, dialogWidth, dialogHeight, center,
edge, help, resizable, scroll, status
showModelessDialog() ⓔ
back() ⓝ
forward() ⓝ
find() ⓝ
home() ⓝ
stop() ⓝ
captureEvents() ⓝ
releaseEvents() ⓝ
이벤트 핸들러
onbeforeunload ⓔ
onblur
onerror
onfocus
onload
onmove
onresize
onscroll ⓔ
onunload
###############################################################################################
Document 객체
프로퍼티
alinkColor
bgColor
fgColor
linkColor
vlinkColor
characterSet ⓝ
cookie
영구쿠키 옵션 : expires, path, domain, secure
charset
defaultCharset ⓔ
domain
fileSize ⓔ
fileCreateDate ⓔ
fileModifiedDate ⓔ
lastModefied
location
protocol ⓔ
parentWindow ⓔ
referrer ⓝ
title
URL
width / height ⓝ
all ⓔ
anchors
applets
body
embeds
forms
frames ⓔ
images
links
plugins ⓝ
styleSheets
메소드
open()
close()
write()
writeln()
getElementByld()
getElementByName()
getElementByTagName()
getComputedStyle() css 의 속성값 가져오기
이벤트 핸들러
onblur
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmouseup
onmouseover
onmouseout
explorer 전용 onactivate, onafterupdate, onbeforeacivate, onbeforedeactivate, onbeforeeditfocus,
onbeforeupdate, oncellchange, oncontextmenu, oncontrolselect, ondataavilable,
ondatasetchanged, ondatasetcomplete, ondeactivate, ondragstart, onfocusin,
onfocusout, onerrorupdate, onhelp, onmousewheel, onpropertychange,
onreadystatechange, onrowenter, onrowexit, onrowsdelete, onrowsinserted,
onselectionchange, onselectstart, onstop
###############################################################################################
all 컬렉션 ⓔ
length
item("name")
tags("TAG")
Anchor 객체
innerHTML
innerText ⓔ
text ⓝ
name
style
title
이벤트 핸들러
onclick, oncontextmenu, ondblclick, onmousedown, onmousemove, onmouseout,
onmouseover, onmouseup, onbeforecopy ⓔ, onbeforepaste ⓔ, oncopy ⓔ,
ondrag ⓔ, onselectstart ⓔ
Applet 객체
code
codebase
name
height
width
hspace
vspace
style
public 변수
start()
stop()
public 메소드
Body 객체
alink
link
vlink
text
background
bgColor
style
scroll ⓔ
outerHTML
innerHTML
innerText ⓔ
clientLeft ⓔ
clientTop ⓔ
offsetLeft
offsetTop
scrollLeft
scrollTop
clientHeight
clientWidth
offsetHeight
offsetWidth
scrollHeight
scrollWidth
이벤트 핸들러 onblur, onclick, oncontextmenu, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onscroll, onselect,
onselectstart, onunload
Explorer 전용 이번트 핸들러
onbeforeunload, oncut, ondrag, ondragend, ondragenter, ondragleave, ondragover,
ondrop, onfilterchange, onhelp, onpaste
Embed 객체
autostart ⓔ
baseURL ⓝ
hidden ⓔ
hspace ⓔ
vspace ⓔ
height
width
id
name
src
style
title
Play()
Stop()
pause() ⓔ
SetVolume()
Frame 객체
document
frame
history
location
name
screenLeft
screenTop
self
parent
top
alert()
confirm()
prompt()
open()
scrollTo(x, y)
scrollBy(x, y)
print()
clearInterval()
clearTimeout()
setInterval()
setTimeout()
이벤트 핸들러 onatferprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus,
onhelp, onload, onresize, onscroll, onunload
Image 객체
alt, title
border
dynSrc ⓔ
width, height
hspace, vspace
loop ⓔ
lowsrc
name
src
style
useMap
isMap
complete 이미지 로드가 완료되었는지 여부 true/false
fileSize ⓔ
fileCreatedDate ⓔ
fileModifiedDate ⓔ
nameProp ⓔ
protocol ⓔ
readyState
이벤트 핸들러 onabort, onerror, onclick, oncontextmenu, oncopy ⓔ, ondblclick, onfocus, onload,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
Link 객체
coords
href
name
shape
target
title
className
id
style
tagName
innerHTML
innerText ⓔ
outerHTML
text ⓝ
hash
host
hostname
port ⓔ
pathname
protocol
blur()
click() ⓔ
focus()
이벤트 핸들러 onblur, onclick, oncontextmenu, oncopy ⓔ, onfocus, onmousedown, onmousemove
onmouseout, onmouseover, onmouseup, onkeypress, onkeydown, onkeyup
StyleSheet 객체
cssText ⓔ
cssRules ⓝ
rules ⓔ
href
owningElement ⓔ
ownerNode ⓝ
readOnly ⓔ
title
type
insertRule() ⓝ
deleteRule() ⓝ
Form 객체
action
Screen 객체
availHeight 작업 표시줄을 제외한 화면의 높이를 픽셀 값으로 표시
availWidth 작업 표시줄을 제외한 화면의 너비를 픽셀 값으로 표시
availTop 화면 표시 영역의 y 좌표 표시
availLeft 화면 표시 영역의 x 좌표 표시
height 화면의 높이를 픽셀 값으로 표시
width 화면의 너비를 픽셀 값으로 표시
colorDepth 컴퓨터에서 사용하고 있는 컬러 수를 표시
pixelDepth 화면의 컬러 해상도를 표시(넷스케이프 네비게이터용)
화면 크기 조절 모음
브라우저의 전체 높이 screen.availHeight
브라우저의 전체 너비 screen.availWidth
모니터의 해상도 높이 screen.height
모니터의 해상도 너비 screen.width
브라우저안쪽의 높이 document.body.clientHeight
브라우저안쪽의 너비 document.body.clientWidth
문서 높이 document.body.scrollHeight
문서 너비 document.body.scrollWidth
현재 스크롤 위치 document.body.scrollTop
document.documentElement.scrollTop
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
###############################################################################################
HTML5 태그 모음
<!--...--> 정의 댓글
<!DOCTYPE> 정의 문서 종류
<a> 정의하는 하이퍼 링크
<abbr> 정의 약어
<acronym> D 영문 축양형 사용시
<address> 정의 주소 요소
<applet> D 임베디드 애플릿 사용시
<area> Defines an area inside an image map
<article> N 정의 문서
<aside> N 정의는 페이지 콘텐츠를 제쳐두고 콘텐츠
<audio> N 정의 소리 콘텐츠
<b> 정의 굵은 텍스트
<base> 페이지의 모든 링크에 대한 정의 기본 URL
<basefont> D 글꼴의 형태 정의
<bdo> 텍스트 디스플레이의 정의 방향
<big> D 글꼴의 크기 지정
<blockquote> 정의 긴 인용
<body> 정의 Body 요소
<br> 삽입 단일 줄바꿈
<button> 정의는 푸시 버튼, Insert Button과 차이는 button 내부에 Image Tag 등을 사용하여 꾸밀 수 있음
<canvas> N 정의 그래픽
<caption> 정의하는 테이블 캡션
<center> D 텍스트 위치 중앙 정렬
<cite> 정의 표창장
<code> 정의 컴퓨터 코드 텍스트
<col> 정의 테이블 컬럼에 대한 특성
<colgroup> 테이블 컬럼의 정의 그룹
<command> N 정의 명령 단추
<datalist> N 정의 드롭 다운 목록
<dd> 정의 정의 설명
<del> 정의 텍스트를 삭제
<details> N 요소의 정의 세부 정보
<dfn> 정의 용어 정의
<dir> D 디렉토리 리스트
<div> 문서의 정의 섹션
<dl> 정의 정의 목록
<dt> 정의 용어 정의
<em> 정의 텍스트를 강조
<embed> N 정의 외부 인터랙티브 콘텐츠 또는 플러그인
<fieldset> 정의 fieldset
<figcaption> N 그림 요소의 정의 캡션
<figure> N 정의 미디어 컨텐츠의 그룹, 그리고 그들의 캡션
<font> D 글꼴
<footer> N 섹션 또는 페이지에 대한 정의 바닥글
<form> 정의 양식
<frame> D 프레임
<frameset> D 프레임 부속 태그
<h1> 에 <h6> 정의 헤더 1 6 헤더
<head> 문서에 대한 정의 정보
<header> N 섹션 또는 페이지에 대한 정의하는 헤더
<hgroup> N 문서의 섹션에 대한 정의 정보
<hr> 정의 수평 규칙
<html> 정의하는 HTML 문서
<i> 정의 기울임꼴 텍스트
<iframe> 정의 인라인 하위 창 (프레임)
<img> 정의 이미지
<input> 정의 입력 필드
<ins> 정의 텍스트를 삽입
<keygen> N 형태로 정의 생성된 키
<kbd> 정의 키보드 텍스트
<label> 양식 컨트롤에 대한 정의 레이블
<legend> fieldset에 정의 제목
<li> 정의 목록 항목
<link> 정의 리소스 참조
<map> 정의 이미지 맵
<mark> N 정의 텍스트를 표시
<menu> 정의 메뉴 목록
<meta> 정의 메타 정보
<meter> N 미리 정의된 범위 내에서 정의 측정
<nav> N 정의 탐색 링크
<noframes> D 프레임 부속 태그
<noscript> 정의 noscript 섹션
<object> 정의 개체를 내장
<ol> 정의 주문한 목록
<optgroup> 정의 옵션 그룹
<option> 드롭 다운 목록에서 정의하는 옵션
<output> N 출력의 정의 몇 가지 유형
<p> 정의하는 단락
<param> 개체에 대한 정의 매개 변수
<pre> 정의 텍스트 서식이 설정된
<progress> N 어떤 종류의 작업의 정의 진행
<q> 정의 짧은 인용
<rp> N 루비 주석에서 사용한 루비 요소를 지원하지 해당 브라우저를 표시할지 정의합니다.
<rt> N 정의의 설명 주석을 루비 있습니다.
<ruby> N 정의의 루비 주석
<s> 더 이상 올바른 정의 텍스트
<samp> 정의 예제 컴퓨터 코드
<script> 정의 스크립트
<section> N 정의 섹션
<select> 정의 선택리스트
<small> 정의 작은 텍스트
<source> N 정의 미디어 리소스
<span> 문서의 정의 섹션
<strike> D 글골 효과
<strong> 정의 강한 텍스트
<style> 정의하는 스타일 정의
<sub> 정의 텍스트를 subscripted
<summary> N 정의 "상세"요소의 헤더
<sup> 정의 텍스트를 superscripted
<table> 정의 테이블
<tbody> 정의하는 테이블 몸
<td> 정의 테이블 셀
<textarea> 정의하는 텍스트 영역
<tfoot> 정의하는 테이블 바닥글
<th> 정의하는 테이블 헤더
<thead> 정의하는 테이블 헤더
<time> N 정의 날짜 / 시간
<title> 정의 문서 제목
<tr> 정의하는 테이블 행
<tt> N 글골 효과
<u> N 글꼴 언더라인
<ul> 정의 정렬되지 않은 목록
<var> 정의 변수
<video> N 정의 비디오
<wbr> N 정의 가능한 라인 - 휴식
<xmp> D PRE태그와 비슷(태그까지도 글로 표현)
삭제된 태그
<acronym> 영문 축양형 사용시
<applet> 임베디드 애플릿 사용시
<basefont> 글꼴의 형태 정의
<big> 글꼴의 크기 지정
<center> 텍스트 위치 중앙 정렬
<dir> 디렉토리 리스트
<font> 글골
<frame> 프레임
<frameset> 프레임 부속 태그
<noframes> 프레임 부속 태그
<strike> 글골 효과
<tt> 글골 효과
<u> 글꼴 언더라인
<xmp> PRE태그와 비슷(태그까지도 글로 표현)
추가된 태그
<article> 정의 문서
<aside> 정의는 페이지 콘텐츠를 제쳐두고 콘텐츠
<audio> 정의 소리 콘텐츠
<canvas> 정의 그래픽
<command> 정의 명령 단추
<datalist> 정의 드롭 다운 목록
<details> 요소의 정의 세부 정보
<embed> 정의 외부 인터랙티브 콘텐츠 또는 플러그인
<figcaption> 그림 요소의 정의 캡션
<figure> 정의 미디어 컨텐츠의 그룹, 그리고 그들의 캡션
<footer> 섹션 또는 페이지에 대한 정의 바닥글
<header> 섹션 또는 페이지에 대한 정의하는 헤더
<hgroup> 문서의 섹션에 대한 정의 정보
<keygen> 형태로 정의 생성된 키
<mark> 정의 텍스트를 표시
<meter> 미리 정의된 범위 내에서 정의 측정
<nav> 정의 탐색 링크
<output> 출력의 정의 몇 가지 유형
<progress> 어떤 종류의 작업의 정의 진행
<rp> 루비 주석에서 사용한 루비 요소를 지원하지 해당 브라우저를 표시할지 정의합니다.
<rt> 정의의 설명 주석을 루비 있습니다.
<ruby> 정의의 루비 주석
<section> 정의 섹션
<source> 정의 미디어 리소스
<summary> 정의 "상세"요소의 헤더
<time> 정의 날짜 / 시간
<tt> 글골 효과
<u> 글꼴 언더라인
<video> 정의 비디오
<wbr> 정의 가능한 라인 - 휴식
