구분 |
HTML 태그 |
태그설명 |
HTML Tag Reference | ||
HTML |
HTML 문서를 정의하고 시작을 알림 | |
HTML 문서의 내용부를 정의 | ||
단계별 타이틀을 정의 | ||
수평선 | ||
주석 | ||
문단임을 정의 | ||
한 줄 개행 | ||
HTML Text Formatting Tags | ||
글자 |
굵게 | |
Defines big text | ||
강조(이탤릭) | ||
이탤릭 | ||
Defines small text | ||
강하게(굵게) | ||
아랫 첨자 | ||
윗 첨자 | ||
Defines inserted text | ||
취소선 | ||
HTML "Computer Output" Tags | ||
컴퓨터 |
Defines computer code text | |
Defines keyboard text | ||
Defines sample computer code | ||
Defines teletype text | ||
Defines a variable | ||
pre태그 안의 내용 그대로 화면에 출력(안에서는 태그 x) | ||
HTML Citations, Quotations, and Definition Tags | ||
인용구 |
마우스 오버시 약어 풀네임 툴팁 기능 | |
마우스 오버시 각 단어의 맨 앞글자어의 전체 문장 툴팁 | ||
Defines contact information for the author/owner of a document | ||
Defines the text direction | ||
여러줄 인용구 | ||
한줄 인용구 | ||
Defines a citation | ||
Defines a definition term | ||
HTML Style Tags | ||
스타일 |
Defines style information for a document | |
Defines the relationship between a document and an external resource | ||
HTML Link Tags | ||
링크 |
연결할 대상, 포인트 설정 | |
HTML Image Tags | ||
그림 |
Defines an image | |
Defines an image-map | ||
Defines a clickable area inside an image-map | ||
HTML Table Tags | ||
테이블 |
테이블 생성을 정의 | |
각 행이나 열의 제목 정의 | ||
테이블의 한 행 | ||
한 행 안에 있는 각각의 셀을 정의 | ||
Defines a table caption | ||
Defines a group of columns in a table, for formatting | ||
Defines attribute values for one or more columns in a table | ||
Groups the header content in a table | ||
Groups the body content in a table | ||
Groups the footer content in a table | ||
HTML List Tags | ||
리스트 |
순서있는 리스트 | |
순서없는 리스트 | ||
리스트 요소를 등록한다 | ||
정의 리스트 | ||
정의할 요소 등록 | ||
요소에 대한 설명 등록 | ||
HTML Grouping Tags | ||
그룹 |
Defines a div | |
Defines a span | ||
HTML Layout Tags | ||
화면구성 |
Defines a section in a document | |
Defines a section in a document | ||
HTML Form Tags | ||
입력창 |
Form의 사용 정의 | |
한 줄 입력창 | ||
여러줄 텍스트 입력창 | ||
Defines a label for an input element | ||
Defines a border around elements in a form | ||
Defines a caption for a fieldset element | ||
Defines a select list (drop-down list) | ||
Defines a group of related options in a select list | ||
Defines an option in a select list | ||
Defines a push button | ||
HTML iframe Tag | ||
내부프레임 |
Defines an inline sub window (frame) |
HTML Headings
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<h1>This is heading 1</h1> |
This is heading 1This is heading 2This is heading 3This is heading 4This is heading 5This is heading 6 |
HTML Paragraphs
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p>This is a paragraph.</p> |
This is a paragraph. This is a paragraph. This is a paragraph. |
HTML Links
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<a href="http://www.w3schools.com"> |
This is a link |
HTML Images
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<img src="w3schools.jpg" width="104" height="142" /> |
HTML Lines
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p>The hr tag defines a horizontal rule:</p> |
The hr tag defines a horizontal rule: This is a paragraph This is a paragraph This is a paragraph |
HTML Comments
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<!--This comment will not be displayed--> |
This is a regular paragraph |
HTML Line Breaks
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p>This is<br />a para<br />graph with line breaks</p> |
This is |
HTML Output - Useful Tips
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p>
|
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. Note that your browser ignores the layout! |
HTML Text Formatting
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p><b>This text is bold</b></p> |
This text is bold This text is strong(권장) This text is big This text is italic This text is emphasized(권장)
This is subscript and superscript |
HTML Preformatted Text
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<pre> <p>The pre tag is good for displaying computer code:</p> <pre> |
This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print i next i |
HTML "Computer output" tags
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<code>Computer code</code> <p><b>Note:</b> These tags are often used to display computer/programming code.</p> |
Computer code Keyboard input Teletype text Sample text Computer variable Note: These tags are often used to display computer/programming code. |
HTML Address
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<address> |
Written by W3Schools.com Email us Address: Box 564, Disneyland Phone: +12 34 56 78 |
HTML Abbreviations and acronyms(마우스 커서 올려봐)
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> |
The WHO was founded in 1948. Can I get this ASAP? The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation. |
HTML Dleted and inserted text
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <p>Notice that browsers will strikethrough deleted text and underline inserted text.</p> |
My favorite color is Notice that browsers will strikethrough deleted text and underline inserted text. |
HTML Layout
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> </div> |
Main Title of Web PageContent goes here
|
HTML Forms - The Input Element
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<form> <form> <form> <form> <form name="input" action="html_form_action.asp" method="get"> |
First name:
|
Use iframe as a Target for a Link
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><b>Note:</b> Because the target of the link matches the name of the iframe, the link will open in the iframe.</p> |
Note: Because the target of the link matches the name of the iframe, the link will open in the iframe. |
Color Values
Color | Color HEX | Color RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255,255,0) | |
#00FFFF | rgb(0,255,255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192,192,192) | |
#FFFFFF | rgb(255,255,255) |
HTML Links - The name Attribute
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p><a name="tips">Useful Tips Section</a></p> <p><a href="#tips">Visit the Useful Tips Section</a></p> <p><a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section</a></p> |
HTML Links - Image
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p>Create a link of an image: <p>No border around the image, but still a link: |
|
HTML Image - Align
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p>An image <p>An image <p>An image <p><b>Tip:</b> align="bottom" is default!</p> <p><img src="smiley.gif" alt="Smiley face" width="32" height="32" /> <p>An image after the text. |
An image with align="bottom". An image with align="middle". An image with align="top". Tip: align="bottom" is default! An image before the text. An image after the text. |
HTML Use Image-Map
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> |
Click on the sun or on one of the planets to watch it closer: |
HTML Table
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > | ||||||
<table border="1"> |
|
HTML List
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
<ul>
<ol>
<dl>
|
|
HTML
< HTML 태그 내용 > |
< 웹에서 보여지는 내용 > |
'Dev. 웹 > HTML.JSP' 카테고리의 다른 글
[HTML 예제] a 태그 (anchor tag) - 책갈피 기능 (0) | 2012.09.12 |
---|---|
[HTML 예제] 폼태그 (form tag) (2) | 2012.09.12 |
HTML 참고자료 (태그 리스트, 속성표, 이벤트, 색상표, 문자셋, 특수기호, ASCII, URL Encode 등) (0) | 2012.09.09 |
HTML 기초 간단 정리 Quick List (0) | 2012.09.09 |
html 연습장 (코드 작성 및 바로 확인) (0) | 2012.09.09 |