[HTML]html 태그 모음

2018. 1. 25. 21:55

http://www.tohoho-web.com/html/index.htm

1. Head
・<meta>~</meta> :

・<title>~</title> : 타이틀바에 새겨질 글자를 정의한다. 타이틀 바란 브라우즈 창의 이름을 의미한다.

・<link>~</link> : css 파일을 연다.

-<link rel="stylesheet" type="text/css" href="http://127.0.0.1/CSS/style.css">

・

・

2. Body

・<body>~</body>

-<BODY TEXT= "#nnnnnn">...</BODY> : 글자색을 지정합니다.

-<BODY LINK= "#nnnnnn">...</BODY> : 하이퍼링크의 색을 지정합니다.

-<BODY VLINK= "#nnnnnn">...</BODY> : 한 번 누른적이 있는 하이퍼링크의 색을 지정합니다.

-<BODY ALINK= "#nnnnnn">...</BODY> : 누르고 있는 동안의 색을 지정합니다.

・<header>~</header> : 시각적인 효과를 지니는 태그는 아니지만, 의미론적으로 <header> 태그 안의 부분의 본문의 간판이라는 것을 기계에게 알려준다.

・<article>~</article> : 시각적이 효과를 지니는 태그는 아니지만, 태그 안의 부분이 본문이라는 것을 기계에게 명시해준다.

・<style>~</style> : style 속성은 말 그대로 태그의 스타일 관련 속성을 정의하며 CSS와 연동된다.

<태그 style="속성1:값1; 속성2:값2;">의 형태로 사용하며 속성의 값(위 태그의 값1, 값2)는 따옴표로 감싸지 않는다.
속성값의 끝에는 세미콜론(;) 을 붙이며, 마지막 값 뒤에는 꼭 붙이지 않아도 된다.

<html> <body> <div style="height:40px; border: 1px solid green">style1</div> <div style=" background-color: red">style2</div> </body> </html>

>>>
style1
style2

・<span>~</span> :<div> 태그와 비슷하게 레이아웃을 설정할 때 쓰인다. 하지만 인라인 엘리머트 이기 때문에 블록 엘리먼트인 div와 다르게 영역에 꽉차게 표시되지 않고, 설정한 줄마다 표시되며 크기를 설정 할 수 없다

・<p>~</p> : 가장 먼저 줄을 바꿀때 사용되는 태그인 <br>과 <p>에 대해서 알아보겠습니다. 한가지를 설명하기도 벅찬데 두가지를 비교하게 되는건 용도는 비슷하지만 출력되는게 달라서 같이 알아보려고 하는데요. <br>태그는 </br>로 끝낼 필요가 없으며 단순히 줄넘기는 용도로 사용하면 됩니다.두번째 <p>태그는 단락간 단락으로 구분할때 쓰는 줄바꿈이고, 그 끝에 </p>로 마무리 태그를 넣는게 좋습니다. 당장은 오류가 안나지만 코드가 복잡해지면 혼동이 오거든요. 또한 <p>태그는 여백이 생기는게 특징입니다.

<html>
 <body>
  <p>first paragraph</p>
  <p>second paragraph</p>
  <p>
   new line<br>
   third paragraph
  </p>
 </body>
</html>

>>>

first paragraph

second paragraph

new line
third paragraph

・<hr>~</hr>

・<pre>~</pre> : 이 <pre>는 귀차니즘을 좋아라 하시는 분들이 좋아하는 태그겠네요. <pre>~</pre> 구간에 있는 글들은 사용자가 설정한 글꼴과 글자 크기, 줄 바꿈등이 그대로 출력되는 태그입니다. 하지만 중간 중간에 스타일을 입히지 못하기 때문에 웹디자이너들이 잘 쓸지는 모르겠습니다.

・<br>~</br>

・<h1~6>~</h1~6> : 다음글에서 정리할 예정이지만 텍스트의 크기를 조절하려면 <font>태그를 이용하는데요. 이 <h>태그도 텍스트의 크기를 구분할 수 있다해서 무분별하게 사용하면 검색엔진이 웹페이지의 중요한 부분을 찾기에 혼동이 올수가 있습니다. 크기와 스타일만을 바꾸려면 꼭 <font>태그를 쓰세요.

・<a>~</a> :

-<A HREF="...">...</A> : 다른 홈페이지와 연결시켜 줍니다.

-<A NAME="...">...</A> : 자신의 홈페이지 내에서 연결해 줍니다.

<html>

<head>
<title>TGIF</title>
<head>

<body link="green" vlink="red" alink="yellow" background ="sample1.jpg"text="red">
<a href="<strong><font>'>http://google.com"><strong><font size = 7><center>Hello World</center></font></strong></a>

<h1><font size = 7>MY</font> <i><font size = 7>name</font></i> <font size = 7>is daseul</font></h1>
<h2><font size = 7>Thx God It's Friday</font></h2>
<h3><font size = 7>Can i get to airport on time</font></h3>

<li>
<ul><font size = 7>hana</font></ul>
<ul><font size = 7>dul</font></ul>
</li>

<table border="2">
<tr>
<th>name</th>
<th>area</th>
</tr>
<tr>
<td><font size = 7>haneda</font></td>
<td><font size = 7>tokyo</font></td>
</tr>
<tr>
<td><font size = 7>narita</font></td>
<td><font size = 7>chiba</font></td>
</tr>
</table>
</body>
</html>

・<form name ="" action="" method="">~</form> : name는 form의 이름이며, action은 바로 전송시킬 페이지 또는 파일 이름이다. action에 페이지 주소가 들어가면 그 페이지 주소로 이동하고, 프로그래밍 파일 주소를 넣으면 프로그래밍이 실행된다. action을 적용하기 위해서는 <input type="submit></input> 으로 submit를 버튼을 생성해야한다.

<html>
<head>
<title>Login Page</title>
</head>

<body>
<form action="HelloWorldServlet"> // action에는 컴퓨터 내의 파일 이름 혹은 인터넷 어드레스를 적는다.
// HelloWorldServet 파일이 실행된다.
Username : <input type="text" name="uname"></input>
<br>
Password : <input type="password" name="pwd"></input>
<br>
<input type="submit"></input>
<input type="reset"></input>
</form>
</body>

・<nav>~</nav> : 페이지의 네비게이터를 설정한다. 네이게이터는 시각적인 의미를 지니지는 않지만, html의 이 부분이 홈페이지의 네비게이터(목차)에 해당하는 부분입니다 하는 것을 기계에게 알려준다.

・<aside>~</aside>

・<div>~</div> : 바디에 어디든 들어올 수 있는 아웃라인 엘리먼트이다. 아래와 같은 파라미터(속성)을 갖는다.

・<footer>~</footer>

・<img src " "> : 이미지 삽입

-<IMG SRC="..." ALIGN=...>: 이미지의 정렬 상태를 나타내 줍니다.

-<IMG SRC="..." WIDTH="..." HEIGHT="...">: 이미지의 크기를 조절해 줍니다.

-<IMG SRC="..." LOWSRC="..."> : 이미지를 JPEG파일로 나타내 줍니다.

-<IMG SRC="..." VSPACE= HSPACE=> : 이미지의 여백을 조절해 줍니다.

-<IMG SRC="..." BORDER="..."> : 이미지의 태두리선을 조절합니다.

-<IMG SRC="..." ALT="..."> : 이미지가 전송되지 않았을 경우에 글자로 대처해 줍니다.

・<input type = " ">

-<INPUT TYPE="RADIO"> : 라디오 단추를 만들어줍니다.

-<INPUT TYPE= "CHECKBOX"> : 체크 상자를 만들어 줍니다.

-<INPUT TYPE= "SUBMIT"> : 제출 버튼을 만들어 줍니다.

-<INPUT TYPE="RESET"> : 취소 버튼을 만들어 줍니다.

-<SELECT> <SELECT NAME="...">: 선택 사항 상자를 만들어 줍니다.

・<textarea>~</textarea>:

・<select>~</select>

・<button>~</button>

<!DOCTYPE html>
<html>

<head>
<meta charset="ISO-8859-1">
<title>HTML Control Demo</title>
<style></style>

</head>

<body>
<h3>Html All Contrl Demo</h3>
<table border="2" >

<!-First row->
<tr>
<td>
First name
</td>
<td>
<input type="text" name="firstName"></input>
</td>
</tr>

<!-Second row->
<tr>
<td>
Last Name
</td>
<td>
<input type="text" name="lastName"></input>
</td>
</tr>

<!-Second.5 row->
<tr>
<td>
Employee No
</td>
<td>
<input type="password" name="Employee No"></input>
</td>
</tr>

<!-Third row->
<tr>
<td>
Address
</td>
<td>
<textarea name="address" rows="4" cols="50"></textarea>
</td>
</tr>

<!-Fourth row->
<tr>
<td>
Marital Status
</td>
<td>
<input type="Radio" name = "status">Married</input>
<input type="Radio" name = "status">Single</input>
</td>
</tr>

<!-Fifth row->
<tr>
<td>
Skill
</td>
<td>
<input type="checkbox" name="skill">Singing</input>
<input type="checkbox" name="skill">Dancing</input>
<input type="checkbox" name="skill">Swimming</input>
</td>
</tr>

<!-Sixth row->
<tr>
<td>
Profession
</td>
<td>
<select name ="profession">
<option value="E">Engineer</option>
<option value ="D">Teacher</option>
<option value ="P">Pilot</option>
<option value ="L">Lawyer</option>
</select>
</td>
</tr>

<!-Seventh row->
<tr>
<td>
<input type="submit" name="submit"></input>
</td>
<td>
<input type="reset" name="reset"></input>
</td>
</tr>

</table>

</body>
</html>

>>>

・

ⅰ. 글자 서식 태그
・<b></b> : 글씨를 굵게

・<strong>~</strong> : 글씨를 굵게 + 강조

・<small>~</small> : 글씨를 작게

・<i>~</i> : 기울게

・<em>~</em> : 기울게 + 강조

・<code>~</code> : 이 안에 있는 텍스트는 코드임을 알림

・<mark>~</mark> : 형광펜 효과

・<sup>~</sup> : 위 첨자

・<sub>~</sub> : 아래 첨자

・<FONT SIZE=n> ...</FONT> : 글자의 크기를 마음대로 조절해 줍니다. 뒤의 숫자는 1~7이며 7이 가장 큰 크기입니다. 기본값은 3.

・<CENTER>... </CENTER> : 전체 문장을 가운데로 정렬시켜 줍니다.

・<BLINK>...</BLINK> : 글자를 깜박이게 해줍니다.
・
・

・
・
・
・
・

ⅱ. 목록지정 태그

・<ul>~</ul> : 순서 없는 리스트

・<li>~</li> : 순서없는 리스트의 자식요소

・<ol>~</ol> : 순서 있는 리스트

・<li>~</li> : 순서 있는 리스트의 자식요소

・

ⅲ. 테이블 태그: 테이블은 페이지의 목록을 만들기위해서 자주 쓰임

・<table>~</table> : 테이블 목록 작성

・<tr>~</tr>: 테이블 태그 안에 들어가는 요소로써 테이블 row 작성

・<td>~</td>: <tr>안에 들어가는 요소로써 테이블 columns 작성

・
・<td width="80" height="75" align="center" valign="top" style="padding-top:17px;">
・

저작자표시 비영리 변경금지

'Front-end > HTML,CSS Basic' 카테고리의 다른 글

[HTML]Class 속성 구체적으로 알아보기 (0)	2018.01.25
[CSS]초간단 이해 (0)	2018.01.25
meta 태그 구체적으로 알아보기 (0)	2018.01.25
[HTML] DIV 태그와 SPAN 태그의 차이점/인라인엘리먼트, 블록엘리먼트의 종류 (0)	2018.01.25
HTML의 구성요소 태그(Tag), 요소(Element), 속성(Attribute), 변수(Arguments) (0)	2018.01.25

가치관제작소

[HTML]html 태그 모음

'Front-end > HTML,CSS Basic' 카테고리의 다른 글

+ Recent posts

티스토리툴바