여러 태그03

<--<table> 태그-->

웹 문서를 시각적으로 정돈되어 보이게 하는 방법 중 하나는 테이블을 사용하는 것 이다,

표 안에는 이미지, 내용 등을 넣을 수 있다.

<태그 형식>

<table border="1">
	<tr>
		<td>1-1</td>
		<td>1-2</td>
		<td>1-3</td>
	</tr>
	<tr>
		<td>2-1</td>
		<td>2-2</td>
		<td>2-3</td>
	</tr>
</table>

Ex)

1-1	1-2	1-3
2-1	2-2	2-3

△저렇게 표가 만들어 진다.

<태그 이해하기>

태그	설명
table	태이블의 시작과 끝을 나타낸다.
tr	테이블의 한줄을 정의할 때 사용하는 태그
th	이 태그를 사용하면 테이블 셀의 그랒가 굵은 글씨로 표현되며 가운데 정렬된다.
td	셀은 <td>라고 정의한다. 반드시 <tr>태그 안에 사용해 한다.

<태그 속성>

태그	속성	값	설명
th/td	colspan	숫자	칸을 합칠 떄 , 합치고자 하는 칸의 수를 지정한다.
	rowspan	숫자	줄을 합칠 때 합치고자 하는 줄의 수를 지정

Ex)

<table>
	<tr width="50%" border="1">
		<td colspan="3">1-1</td>
	</tr>
	<tr>
		<td>2-1</td>
		<td>2-2</td>
		<td>2-3</td>
	</tr>

</table>
<table width="50%" border="1">
	<tr>
		<td rowspan="2">1-1</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>2-2</td>
		<td>2-3</td>
	</tr>
</table>

1-1
2-1	2-2	2-3

1-1	1-2	1-3
	2-2	2-3

▲위의 표처럼 나오게 된다.

<--<a> 태그-->

<a>태그는 문서에 URL을 삽입하는 역할을 한다.

Ex)

<a href = "http://www.naver.com">네이버</a><br/>
<a href = "http://www.naver.com'><img src = "http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif"></a>

네이버

△"naver img"에 링크를 걸어본 것과 그냥 "네이버" 글자에 링크를 걸어보 았다.

<<a>좀더 자세히 알아보기>

위 예제는 다른 링크로 이동하는 방법이 기술되어있다.

하지만 다른 문서의 특정 위치로도 이동이 가능하다는 사실.

1.<a href="#이름"></a> //같은 문서의 특정 위치로 이동하는 방법

name이 "이름"인 곳으로 이동한다.

2.<a herf="파일명#이름"></a> //다른 문서의 특정위치로 이동하는 방법

file의 "이름"으로 이동

<target속성 자세히 알아보기>

target은 하이퍼링크를 클릭했을 때 내용이 보이게 될 대상의 위치를 정한다. 보일 내용이 창을 새로 띄워 나타낼 것인가 아니면, 현재 창에서 나타낼 것인가를 말이다.

o_blank : 하이퍼링크를 클릭했을 때 보일 내용이 새 창에서 나타난다.

o_parent : 프레임이 나누어진 페이지의 프레임 안에 또 하나의 프레임이 들어가 있을 때 안쪽의 프레임에서 적용한다. 하이퍼링크를 클릭했을 때 현재 부모 프레임에 로딩할 페이지가 나타난다.

o_self : 자기 자신의 창을 가리킨다. 링크를 클릭했을 때 표시될 내용이 링크가 있는 현재 프레임 페이지에서 그대로 나타난다.

o_top : 하이퍼링크를 클릭했을 때 프레임 설정에 관계없이 최상위 화면에 내용이 나타난다. 프레임 페이지가 사라지고 전체 화면으로 표시된다.

<--<form>태그-->

웹 사이트를 방문한 사람이 입력한 정보를 서버로 전달하기 위해 <form>태그를 사용한다.

이 태그는 서버에 전달하는 방식이나 서버에서 가동될 프로그램 등을 지정해야 한다.

<태그 형식>

<form name="폼을 구분하기 위한 이름" action="서버 CGI프로그램 URL" method="POST or Get" target="결과물을 보여줄 창 이름 지정" enctype="CGI프로그램으로 전송될 데이터 타입을 지정">
...
</form>

<<form>안에서 사용할 수 있는 태그>

태그	설명
input	텍스트,라디오 등의 입력 양식을 나타낸다.
textarea	텍스트 입력 양식을 나타낸다.
button	폼을 서버로 전송하는 버튼을 나타낸다.
select	여러 개 중 선택할 수 있는 선택상자를 나타낸다.

Ex)

<form>
	<input type="text"><br>
	<textarea></textarea><br>
	<button>button</button><br>
	<select>
		<option>select</option>
	</select>
</form>

select

▲웹 문서에 <form>태그안에 사용할 수 있는 기본적인 태그가 표현 된다.

<--<input> 태그 속성-->

속성	값	설명
type	button	버튼을 나타낸다.
	checkbox	선택 양식을 나타낸다.
	color	컬러 선택 입력 양식을 나타낸다.
	date	날짜 입력 양식을 나타낸다.
	datetime	날짜와 시간 입력 양식을 나타낸다
	datetime-local	지역 날짜와 시간 입력 양식을 나타낸다.
	email	이메일 입력 양식을 나타낸다.
	file	파일 선택 양식을 나타낸다.
	hidden	숨은 <input>태그를 나타낸다.
	image	이미지 버튼을 나타낸다.
	month	월 입력 양식을 나타낸다.
	number	숫자 입력 양식을 나타낸다.
	password	비밀번호 입력 양식을 나타낸다.
	radio	라디오 선택 양식을 나타낸다.
	range	범위 선택 양식을 나타낸다.
	search	검색 입력 양식을 나타낸다.
	submit	전송 버튼을 나타낸다.
	tel	전화번호 입력 양식을 나타낸다.
	text	텍스트 입력 양식을 나타낸다.
	time	시간 입력 양식을 나타낸다.
	url	URL입력 양식을 나타낸다.
	week	주 입력 양식을 나타낸다.

Ex)

<form>
	<input type = "button" ><br>
	<input type = "checkbox" ><br>
	<input type = "color" ><br>
	<input type = "date" ><br>
	<input type = "datetime" ><br>
	<input type = "datetime-local" ><br>
	<input type = "email" ><br>
	<input type = "file" ><br>
	<input type = "hidden" ><br>
	<input type = "image" ><br>
	<input type = "month" ><br>
	<input type = "number" ><br>
	<input type = "password" ><br>
	<input type = "radio" ><br>
	<input type = "range" ><br>
	<input type = "reset" ><br>
	<input type = "search" ><br>
	<input type = "submit" ><br>
	<input type = "tel" ><br>
	<input type = "text" ><br>
	<input type = "time" ><br>
	<input type = "url" ><br>
	<input type = "week" ><br>
</body>

▲input태그를 전부 사용해 보았다.