Web/Html

HTML Tag

준토리73 2020. 10. 27. 10:43

Html Tag

명칭

사용형태

내용

html

<html>…</html>

head

<head>…</head>

머리말

meta

<meta…/>

정보에 대한 정보

title

<title>…</title>

문서 제목

body

<body>…</body>

본문

p

<p>…</p>

단락, 문단, 절

h1~h6

<h1>…</h1>

제목, 글자 크기, 요즘은 중요도 우선 순,

hr

<hr>

단락 구분, 문서의 구분선

주석태그

<!-- -->

주석

br

<br/>

break / 줄바꿈을 해줄 때

div

<div>..</div>

division / 문서 영역이나 섹션 분할

span

<span>..</span>

inline요소, 줄바꿈X, 인라인 요소 그룹화, 브라우저에 레이아웃 변경X

table

<table>..</table>

표, 게시판에 많이 이용

caption

<caption>..</caption>

summary 역할 / CSS 에서 안보이게, 스크린 리더기에 활용

colgroup

<colgroup>..</colgroup>

열그룹, 구조적인 그룹화

col

<col..>

빈 태그, 유일하게 self close X, 열의 속성값과 스타일 지정

thead

<thead>...</thead>

테이블 헤더 행 그룹

tbody

<tbody>…</tbody>

테이블 내용 행 그룹

troot

<troot>…</troot>

테이블 푸터행 그룹, 계산시 합계에 많이 이용, tbody위에 올 수있다
화면상에서는 아래 위치

th

<th>..</th>

셀 제목을 지정하여 강조되게 표시하는 태그
table header, inline 요소

tr

<tr>…</tr>

테이블 내의 한 행을 정의하는 태그 table row

td

<td>..</td>

각 행에 포함된 셀을 만들때 사용되는 태그 / table data /
 td의 개수는 th의 개수와 일치 / inline 요소
colspan - 가로행을 합쳐준다
rowspan - 세로열을 합쳐준다
* 힙쳐준 개수만큼 td항목을 없애줘야 한다.

ol

<ol>..</ol>

ordered list / 순서가 있음 / 앞에 넘버링이 붙는다

ul

<ul>..</ul>

unordered list / 순서가 없다 / 앞에 기호가 붙는다

li

<li>..</li>

list / ol과 ul의 세부 항목 / ol과 ul의 자식으로 li만 올수 있다.

dl

<dl>..</dl>

definition list(정의 목록)

dt

<dt>..</dt>

항목 definition term

dd

<dd>..</dd>

설명 definition description

a

<a href=""target="">daum</a>

anchor, 링크 연결, inline 요소
a 태그의 속성
href - 목적지, url
target - 보여질 위치
*target의 속성
_blank : 새창 / _parent : 먼저 띄워진 창 /
_self : 이동 / _top : 현재 띄워진 가장 최상단에 위치한 창

img

<img src="" alt="" />

이미지 가져오기, inline 요소, 이미지 속성
src - 경로 지정, 필수 입력
alt - 이미지를 위한 대체텍스트를 정의
title - 거의 사용하지 않음

form

<form> name="numberJoin"
action="aa.html"method="post"
</form>

입력을 받음. 게시판, 설문조사, 회원등록 등 폼 속성
name : 전송될 데이터의 이름. Value는 text
해당 입력양식이 어느 폼에서 만들어졌는지 식별
action: 입력된 데이터가 전송될 페이지를 지정. Value는 url
method: 입력된 데이터가 처리될 방식. Value는 get(소량) / post(대량) / get이 default, 사용은 post

fieldset

<fieldset>..</fieldset>

form안에 논리적으로 묶인 구성요소를 그룹으로 묶을 때.
사각형 모양으로 표시
fieldset 요소의 제목은 legend태그를 사용

label

<label>..</label>

리더기가 읽어주는 부분(웹 접근성)에서 중요한 요소, 다양한 폼 서식 설명
for 속성 - 라벨에 표시되는 양식폼 / 요소의 이름을 지정

input

<input../input>

입력상자, 속성에 type, name, value, checked, maxlength, readonly, disabled

textarea

<textarea="say" cols="50" rows"5">
하고픈말을 적으세요</textarea>

긴글 작성시 사용. 여러줄의 텍스트를 입력할 수 있는 상자를 만듦

select/option

<select name="email"><option value="1"> naver</option>
<option value="2">daum</option> <option value="3">google</option> </select>

선택 메뉴(드롭다운 리스트)
select 요소 내의 태그에 목록에 있는 사용 가능한 옵션을 정의한다.

button

<button></button>

버튼 생성. Submit, reset, button
유일하게 css값을 가지고 있는 태그.
Css 초기화 필요