HTML
- input type='file' 찾아보기 버튼을 이미지로 바꾸기. 2011.08.11
- HTML Form 태그 여백 없애기 2011.07.13
- Html 테이블 해더 고정하기 2011.07.12
- HTML5 & API입문 2011.01.28
- HTML 이벤트 종류 2009.07.29
- HTML 요소 분류 2007.07.30
- HTML 태그 정리 2007.07.30
input type='file' 찾아보기 버튼을 이미지로 바꾸기.
HTML Form 태그 여백 없애기
HTML에서 Form태그는 기본적으로 Padding 값을 가지고 있다고 한다.
그래서 흔히 따로 여백이 없는데 디자인이 틀어지는 경우가 있다.
스타일에 여백을 없애주는 부분을 넣어주면 공백이 생기는걸 방지할수 있다.
<Form style="margin:0px;padding:0px;"> 또는 스타일 시트 부분에
form {margin:0px;padding:0px;} 이라고 추가 해 놓으면 된다.
Html 테이블 해더 고정하기
HTML5 & API입문
HTML 이벤트 종류
onabort |
이미지의 다운로드를 중지할 때 (브라우저의 중지버튼) |
onactivate |
개체가 활성활 될 때 발생 (태그의 기능이 작용할 때 발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러) |
onafterprint |
문서가 출력되거나 혹은 출력하기 위해 출력 미리보기를 한후에 발생 |
onafterupdate |
데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되었을 때 발생(데이터 개체부분 참조) |
onbeforeactivate |
개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate를 참고) |
onbeforecopy |
선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생 |
onbeforecut |
선택 영역이 지워지기 바로 직전에 발생 |
onbeforedeactivate |
모 문서에서 현재 개체에서 다른 개체로 activeElement가 바뀔 때 발생 (activeElement는 개체를 지칭하는 예약어로도 쓰임) |
onbeforeeditfocus |
편집가능한 개체 내부에 포함된 개체가 편집활성화 된 상태가 되거나 혹은 편집가능한 개체가 제어를 위해 선택될때 |
onbeforepaste |
시스템의 클립보드에서 문서로 붙여넣기 될때 대상 개체에서 발생 |
onbeforeprint |
문서가 출력되거나 혹은 출력하기 위해 출력미리보기 직전에 발생 |
onbeforeunload |
페이지가 언로드되기 직전에 발생 |
onbeforeupdate |
데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되기전에 발생(데이터 개체부분 참조) |
onblur |
개체가 포커스를 잃었을 때 |
onbounce |
마퀴태그에서 alernate상태에서 스크롤이 양 사이드에서 바운드 될때 발생 |
oncellchange |
데이터제공 개체에서 데이터가 변화할때 발생 |
onchange |
개체 혹은 선택영역의 내용이 바뀔 때 발생 |
onclick |
개체위에서 마우스의 왼쪽 버튼을 누를때 발생 |
oncontextmenu |
클라이언트 영역에서 사용자가 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 열 때 발생 |
oncontrolselect |
사용자가 개체의 제어 영역을 만들때 발생 |
oncopy |
시스템의 클립보드에 선택영역 혹은 개체를 복사할 때 소스 개체로부터 발생 |
oncut |
시스템의 클립보드에 선택영역 혹은 개체를 잘라낼때 소스 개체로부터 발생 |
ondataavailable |
비정기적으로 데이터를 전달하는 데이터 소스 개체로부터 데이터가 도착할 때 마다 정기적으로 발생 |
ondatasetchanged |
데이터 소스개체의 변화에 의해 데이터가 노출된 상태로 될때 발생 |
ondatasetcomplete |
데이터 소스 개체로부터 모든 데이터가 유용한 상태로 표시될때 발생 |
ondblclick |
사용자가 개체에 더블클릭 할때 발생 |
ondeactivate |
모 문서에서 현재 개체에서 다른 개체로 activeElement가 변할 때 발생 |
ondrag |
드래그 상태가 지속되는 동안 소스 객체로 부터 발생 |
ondragend |
드래그 상태가 끝날때 소스 객체로 부터 발생 |
ondragenter |
사용자가 개체를 드래그 하여 드롭가능 위치로 지정된 영역으로 이동할때 타겟 개체에서 발생 |
ondragleave |
사용자가 개체를 드래그 하여 드롭가능 위치로 지정된 영역을 떠날때 타겟 개체에서 발생 |
ondragover |
사용자가 개체를 드래그 하여 드롭가능 위치로 지정된 영역내에서 드래그할 때 계속적으로 타겟 개체에서 발생 |
ondragstart |
선택된 개체 혹은 텍스트 영역에서 사용자가 드래그를 시작할 때 발생 |
ondrop |
드래그앤드롭 작용에서 상태가 진행되는 동안 개체가 타겟 개체에 드롭되었을 때 타겟 개체에서 발생 |
onerror |
개체가 로드되는 동안 발생하는 이벤트 |
onerrorupdate |
데이터 소스 개체 내에 데이터가 없데이트 되는 동안 에러가 발생할 때 데이터 영역 개체에서 발생 |
onfilterchange |
비주얼 필터의 상태가 바뀌거나 트랜지션이 완료되었을 때 발생 |
onfinish |
마퀴개체의 loop가 완료되었을 때 발생 |
onfocus |
개체가 포커스를 받았을 때 발생 |
onfocusin |
개체에 포커스가 셋팅되기 바로 직전 개체에 대해 발생 |
onfocusout |
포커스가 다른 개체로 이동한 후에 포커스를 가고 있는 현재 개체에서 발생 |
onhelp |
브라우저가 활성화 되어 있는 동안 F1키를 눌렀을 때 |
onkeydown |
사용자가 키를 눌렀을 때 |
onkeypress |
기능키를 제외한 키를 눌렀을 때 발생 |
onkeyup |
사용자가 키를 놓았을 때 발생 |
onlayoutcomplete |
소스 문서로 부터 콘텐드를 가지는 객체가 미리보기나 출력을 할때 현재 LayoutRect개체를 모두 채우는 것이 끝났을 때 발생 |
onload |
브라우저가 개체를 로드한 후에 발생 |
onlosecapture |
개체가 마우스 캡쳐를 잃었을 때 발생 |
onmousedown |
개체 위에 마우스 버튼을 누를 때 발생(좌우 어느 버튼이든) |
onmouseenter |
개체 안으로 마우스 포인터가 들어올 때 발생 |
onmouseleave |
개체의 경계 밖으로 마우스 포인터가 이동할 때 발생 |
onmousemove |
개체 위에서 마우스가 움직일 때 발생 |
onmouseout |
개체 밖으로 마우스 포인터가 빠져나갈 때 발생 |
onmouseover |
개체위로 마우스 포인터가 들어올 때 발생 |
onmouseup |
마우스가 개체 위에 있는 동안 마우스를 누른상태에서 해제될때 발생 |
onmousewheel |
마우스 휠이 돌아갈 때 발생 |
onmove |
개체가 움직일 때 발생 |
onmoveend |
개체가 움직임이 끝날 때 발생 |
onmovestart |
개체가 움직이기 시작할 때 발생 |
onpaste |
문서에 클립보드로 부터 데이터가 전송될때 타겟 개체에서 발생 |
onpropertychange |
개체의 속성이 바뀔 때 발생 |
onreadystatechange |
개체의 상태가 변화할 때 발생 |
onreset |
폼을 사용자가 리셋할 경우 발생 |
onresize |
개체의 크기가 바뀔 때 발생 |
onresizeend |
제어영역에서 개체의 크기가 사용자에 의해 변화가 끝날 때 발생 |
onresizestart |
제어영역에서 개체의 크기가 사용자에 의해 변화되기 시작할 때 발생 |
onrowenter |
데이터 소스 내에서 현재 열이 변화되거나 개체에 새로운 유용한 데이터가 입력될 때 발생 |
onrowexit |
데이터 소스 콘트르롤이 개체내의 현재 열을 변화시킬 때 발생 |
onrowsdelete |
레코드셋에서 열이 삭제될 때 발생 |
onrowsinserted |
현재 레코드셋에 새로운 열이 추가된 후에 발생(데이터 개체에서) |
onscroll |
사용자가 개체내이 스크롤 바를 스크롤 할 때 발생 |
onselect |
현재 선택된 영역이 바뀔 때 발생 |
onselectionchange |
문서의 선택 영역의 상태가 바뀔 때 발생 |
onselectstart |
개체가 선택되기 시작할 때 발생 |
onstart |
마퀴 개체에서 매 루프가 시작될 때 발생 |
onstop |
사용자가 stop버튼을 눌렀을 경우 혹은 페이지를 떠날 때 발생 |
onsubmit |
폼이 전송되기 바로 전에 발생 |
onunload |
|
HTML 요소 분류
HEAD : TITLE, LINK, META, BASEFONT, BASE
블럭 : P, H1, H2, H3, H4, H5, H6, DIV, BLOCKQUOTE, PRE, ADDRESS, HR
항목 : UL, OK. LI, DL, DT, DD
객체 : OBJECT, EMBED, NOEMBED, APPLET, IMG
인라인 : EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, SUP, SUB, B, I, TT, BIG, SMALL, STRIKE, S, U, INS, DEL, FONT, Q, SPAN, BDO, BR, NOBR, WBR
FORM : FORM, INPUT, SELECT, OPTION, TEXTAREA
하이퍼링크 : A, MAP, AREA
프레임 : FRAMESET, FRAME, IFRAME, NOFRAMES
표 관련 : TABLE, TR, TD, TH, CAPTION, COL, COLGROUP, THEAD, TBODY, TFOOT
기타 : SCRIPT, STYLE
☞ 블럭 , 항목, FORM , TABLE 항목은 닫는 태그뒤에 줄바꿈이 일어난다.
HTML 태그 정리
HTML 테그 정리
형 식 |
구 성 |
내 용 |
문서의 기본 구조를 나타내 주는 태그 | ||
<HTML> |
<HTML>...</HTML> |
HTML 언어로 작성되어 있다는 것을 알려줍니다. |
<HEAD> |
<HEAD>...</HEAD> |
Heading의 준말로 글의 머리말에 해당합니다. |
<BODY> |
<BODY>...</BODY> |
본문에 해당하는 부분을 알려줍니다. |
<TITLE> |
<TITLE>...</TITLE> |
타이틀바에 새겨질 글자를 정의합니다. |
<Hn> |
<Hn>...</Hn> |
표제 부분에 들어갈 말을 정의합니다. 1~6까지의 숫자를 사용하고 숫자가 커질수록 표제는 작아집니다. 기본값은 H4입니다. |
<!-...-> |
<!-주석내용-> |
주석을 달거나 잠시동안 이미지를 보이지 않게 할 때 사용합니다. |
문단 혹은 줄을 바꾸는 태그 | ||
<P> |
<P> |
문단을 바꾸는 태그입니다. 줄바꿈과 동시에 줄을 띤 것같은 효과가 나타납니다. |
<BR> |
<BR> |
문단을 바꾸는 태그입니다. 줄바꿈의 역할만을 수행합니다. |
<PRE> |
<PRE>...</PRE> |
여백이나 줄간격 등을 고정시켜 주는 역할을 합니다. |
글자의 크기를 마음대로 조절하는 태그 | ||
<FONT> |
<FONT SIZE=n> ...</FONT> |
글자의 크기를 마음대로 조절해 줍니다. 뒤의 숫자는 1~7이며 7이 가장 큰 크기입니다. 기본값은 3입니다. |
선그리기 태그 | ||
<HR> |
<HR ALIGN= WIDTH= SIZE=> |
입체적인 선을 그려줍니다. ALIGN은 선의 정렬을, WIDTH는 선의 폭을, SIZE는 선의 높이를 정해줍니다. |
이미지 맵을 처리하는 태그 | ||
<ISMAP> |
<IMG SRC= "..." ISMAP> |
이미지맵을 정의합니다. |
<MAP> |
<MAP NAME=...> ...</MAP> |
넷스케이프2.0에서 이미지맵을 정의합니다. |
목록을 정리해 주는 태그 | ||
<LI> |
<UL>...</UL> |
순서가 없는 목록으로 일반적인 나열을 말합니다. |
<OL>...</OL> |
순서가 있는 목록으로 위에서부터 번호를 매깁니다. | |
<MENU>...</MENU> |
메뉴 목록으로 그리길지 않은 문장의 열거에 사용합니다. | |
<DIR>...</DIR> |
디렉토리 목록으로 메뉴 목록보다 짧은 문장을 나열합니다, | |
<DL>...</DL> |
정의 목록 태그입니다. <LI>가 아닌 <DT>와 <DD>를 사용합니다. | |
문서를 가운데로 정렬시켜 주는 태그 | ||
<CENTER> |
<CENTER>... </CENTER> |
전체 문장을 가운데로 정렬시켜 줍니다. |
인용하기 태그 | ||
<BLOCKQUOTE> |
<BLOCKQUOTE>... </BLOCKQUOTE> |
문장 내에서 인용을 할 경우 들여쓰기를 한 후 인용구로 처리합니다. |
글자의 모양을 정의해 주는 태그 | ||
<STRONG> |
<STRONG>...</STRONG> |
굵은 글씨를 나타내 주는 태그입니다. |
<B> |
<B>...</B> | |
<EM> |
<EM>...</EM> |
이탤릭체의 글씨를 나타내 주는 태그입니다. |
<I> |
<I>...</I> | |
<KBD> |
<KBD>...</KBD> |
타자기체의 글씨를 나타내 주는 태그입니다. |
<CODE> |
<CODE>...</CODE> | |
<TT> |
<TT>...</TT> | |
배경 이미지 작업하기 | ||
<BODY> |
<BODY BACKGROUND="..."> |
배경 이미지를 띄워줍니다. |
<BODY BGCOLOR="#nnnnnn"> |
배경 색깔을 지정해 줍니다. | |
그밖의 태그들 | ||
<DFN> |
<DFN>...</DFN> |
정의되어지는 단어에 대한 것을 말합니다. |
<CITE> |
<CITE>...</CITE> |
책이나 사진 등의 제목을 말할 때 쓰입니다. |
<SAMP> |
<SAMP>...</SAMP> |
컴퓨터상에 메시지를 나탈낼 때 쓰입니다. |
<VAR> |
<VAR>...</VAR> |
이탤릭체로 표현됩니다. |
<SUB> |
<SUB>...</SUB> |
첨자에 관한 태그입니다. |
<SUP> |
<SUP>...</SUP> |
윗첨자를 나타냅니다. |
<BASEPOINT> |
<BASEPOINT>... <BASEPOINT> |
기본적으로 미리 약속된 크기를 다시 정할 때 사용합니다. |
부분을 강조해 주는 태그 | ||
<BLINK> |
<BLINK>...</BLINK> |
글자를 깜박이게 해줍니다. |
<U> |
<U>...</U> |
글자에 밑줄을 그어줍니다. |
연결하기 태그 | ||
<A> |
<A HREF="...">...</A> |
다른 홈페이지와 연결시켜 줍니다. |
<A NAME="...">...</A> |
자신의 홈페이지 내에서 연결해 줍니다. | |
주소 및 편지 서비스 | ||
<ADDRESS> |
<ADDRESS>... </ADDRESS> |
주소에 대한 정의를 내려줍니다. |
<MAILTO> |
<A HREF="MAILTO..."> |
편지쓰기 창을 띄워 줍니다. |
색상 지정하기 | ||
<BODY> |
<BODY TEXT= "#nnnnnn">...</BODY> |
글자색을 지정합니다. |
<BODY LINK= "#nnnnnn">...</BODY> |
하이퍼링크의 색을 지정합니다. | |
<BODY VLINK= "#nnnnnn">...</BODY> |
한 번 누른적이 있는 하이퍼링크의 색을 지정합니다. | |
<BODY ALINK= "#nnnnnn">...</BODY> |
누르고 있는 동안의 색을 지정합니다. | |
표 만들기 태그 | ||
<TABLE> |
<TABLE BORDER>... </TABLE> |
표의 전체 형식을 나타냅니다. |
<TR><TD></TD></TR> |
표 내부에 들어갈 형식을 정의합니다. | |
<TD COLSPAN=n> |
가로칸을 n만큼 합쳐줍니다. | |
<TD ROWSPAN=n> |
세로칸을 n만큼 합쳐줍니다. | |
<TD ALIGN=...> |
표안의 좌우 정렬 방식을 정의합니다. | |
<TD VALIGN=...> |
표안의 상하 정렬 방식을 정의합니다. |
문서를 임의로 고정시키는 태그 | ||
<NOBR> |
<NOBR>...</NOBR> |
화면 크기에 따라 문단이 바뀌는 것을 방지합니다. |
<WBR> |
<WBR>...</WBR> |
위의 태그 안에서 문단을 바꿀 때 사용합니다. |
CGI 양식 첨가하기 | ||
<FORM> |
<FORM>...</FORM> |
양식을 정의합니다. |
<FORM METHOD="..." ACTION="..."> |
양식의 방법을 정의합니다. | |
<TEXTAREA> |
<TEXTAREA NAME="..." ROWS="..."> |
글틀 상자를 정의합니다. |
<INPUT> |
<INPUT TYPE="..."> |
어떤 형태로 입력할 것인지를 정의합니다. |
<INPUT TYPE="RADIO"> |
라디오 단추를 만들어줍니다. | |
<INPUT TYPE= "CHECKBOX"> |
체크 상자를 만들어 줍니다. | |
<INPUT TYPE= "SUBMIT"> |
제출 버튼을 만들어 줍니다. | |
<INPUT TYPE="RESET"> |
취소 버튼을 만들어 줍니다. | |
<SELECT> |
<SELECT NAME="..."> |
선택 사항 상자를 만들어 줍니다. |
창만들기 태그 | ||
<FRAME> |
<FRAMESET>... </FRAMESET> |
창의 기본 틀을 지정합니다. |
<FRAMESET ROW= "숫자 혹은 %"> |
위 아래로 나눠줍니다. | |
<FRAMESET COLS= "숫자 혹은 %"> |
좌우로 나눠줍니다. | |
<FRAME SRC="..." MARGINWIDTH="..."> |
창에 들어갈 좌우 여백을 정의합니다. | |
<FRAME SRC="..." MARGINHEIGHT="..."> |
창에 들어갈 상하 여백을 정의합니다. | |
<FRAME SCROLLING= "...> |
스크롤바를 설정해 줍니다. | |
<NOFRAMES>... </NOFRAMES> |
프레임이 안보이게 해줍니다. | |
이미지 다루기에 필요한 태그 | ||
<IMG> |
<IMG SRC="..."> |
이미지를 정의해 줍니다. |
<IMG SRC="..." ALIGN=...> |
이미지의 정렬 상태를 나타내 줍니다. | |
<IMG SRC="..." WIDTH="..." HEIGHT="..."> |
이미지의 크기를 조절해 줍니다. | |
<IMG SRC="..." LOWSRC="..."> |
이미지를 JPEG파일로 나타내 줍니다. | |
<IMG SRC="..." VSPACE= HSPACE=> |
이미지의 여백을 조절해 줍니다. | |
<IMG SRC="..." BORDER="..."> |
이미지의 태두리선을 조절합니다. | |
<IMG SRC="..." ALT="..."> |
이미지가 전송되지 않았을 경우에 글자로 대처해 줍니다. |