HTML 태그 정리
<html>...</html> html로 작성됨을 명시
<head>...</head> Heading의 준말로 글의 머리말에 해당
<meta.../> 정보에 대한 정보를 알려줌. 빈태그, self close
<title>...</title> 타이틀바에 새겨질 문서 제목을 정의
<body>...</body> 본문
<hr> 단락 구분, 문서의 구분선
<hn>...</hn> 글자크기. h1~h6까지 있음. 작을수록 작은 크기. 기본은 h4
<p>...</p> 문단을 바꾸는 태그, 줄바꿈과 동시에 줄을 띈것 같은 효과
<!-- --> 주석
<br> 문단을 바꾸는 태그. 줄바꿈
<div>...</div> division의 약자. HTML 문서 영역이나 섹션의 분할 정의
<span>...</span> 줄바꿈이 안되고, 폭, 높이 적용도 안됨, 인라인요소들을 그룹화하는데 사용
브라우저 레이아웃 변경은 되지 않음.
<table>...</table> 표의 전체 형식을 나타냄
<table border=n> 테이블의 선 두께
<table cellpadding=n> 셀 안쪽 여백
<table cellspacing=n> 셀과 셀 사이 간격
<table width=n> 테이블의 넓이
<table summary=n> 요약, 잘 사용하지 않음
<thead>...</thead> 테이블 헤더 행 그룹
<tbody>...</tbody> 테이블 내용 행 그룹
<tfoot>..</tfoot> 테이블 푸터 행 그룹. 계산시 합계 부분에 많이 이용, tbody 위에 올 수 있음.
화면상에서는 아래에 위치
<th>...</th> 셀 제목으로 지정하여 강조되게 표시하는 태그. table header
<tr>...</tr> 테이블 내의 한 행을 정의하는 태그. table row
<td>...</td> 각 행에 포함된 셀을 만들 때 사용되는 태그. table data, td의 개수는 th의 개수와 일치해야한다.
<td colspan=n> 가로 행을 합쳐준다.
<td rowspan=n> 세로 열을 합쳐준다.
** 합쳐준 개수만큼 td 항목은 없애져야 함
<a href="" target="">...</a> 다른 홈페이지와 연결. 링크 연결.
a 태그의 속성
href - 목적지, url
target - 보여질 위치
target의 속성
_blank - 새창
_self - 이동(현재창)
_parent - 먼저 띄워진 창
_top - 현재 띄워진 가장 최상단에 위치한 창
name - a태그의 이름 지정(북마크 역할)
title - 링크에 대한 설명
<img src="" alt="" /> 이미지 가져오기
이미지 속성
src - 경로 지정, 필수 입력
alt - 이미지를 위한 대체텍스트를 정의
title - 거의 사용하지 않음
<form name="numberJoin" action="aa.html" method="post"</form> 양식을 정의
form 속성
name - 전송될 데이터의 이름, value는 text, 해당 입력양식이
어느 폼에서 만들어졌는지 식별
action - 입력된 데이터가 전송될 페이지를 지정.
method - 입력 데이터가 처리될 방식.
value는 get 또는 post 방식, get이 default. post가 보안에 좋음.
<fieldset>...</fieldset> form 안에 논리적으로 묶인 구성요소를 그룹으로 묶을 때. 사각형 모양으로 표시
fieldset요소의 제목은 legend 태그를 사용
<legend>...</legend> fieldset에 대한 설명. 여기서는 legend는 설명(caption), 범례의 의미와 가깝다.
<label>...</label> 리더기가 읽어주는 부분(웹접근성)에서 중요한 요소, 다양한 폼 서식의 설명.
for 속성 - 라벨에 표시되는 양식폼 요소의 이름을 지정.
<input>...</input> 입력 상자. 속성에 type, name, value, checked, maxlength, readonly, disabled
name - 필수 입력. 이름 지정
value - 입력 구성 요소의 값을 지정
checked - 'checked', 'radio'일 경우 체크된 상태로 표시하게 함.
** checked 사용시 name 값이 동일해야 함
maxlength - 타입 속성이 text, password일 경우 입력 가능한 최대 문자수를 지정
readonly - 타입 속성이 text,, passowrd일 경우 요소의 값을 수정할 수 없는
읽기 전용으로 지정, 데이터 전송이 가능
disabled - 페이지가 로드될 때 폼 구성 요소를 선택할 수 없게 한다.
수정 불가능, 데이터 전송 불가능
type - 입력 구성 요소의 종류를 지정
type 속성의 종류
text - 텍스트
password - 비밀번호창
email - 이메일 입력
radio - 하나만 선택
checkbox - 다중 선택
file - 파일 첨부
submit - 폼의 액션 페이지로 전송
reset - 초기화
button - 이벤트 발생, 자바스크립트가 붙음
<textarea="say" cols="50" rows="5"> 긴 글 작성시 사용. 여러 줄의 텍스트를 입력할 수 있는 상자를 만듦
하고픈 말을 적으세요</textarea>
<select name="email"> 선택메뉴(드롭다운 리스트, selelct 요소 내의 태그에 목록이 있는
<option value="1">볶음밥</option> 사용 가능한 옵션을 정의한다.
<option value="2">짜장면</option>
<option value="3">짬뽕</option>
</select>
<button></button> 버튼 생성, submit, reset, button. 유일하게 css값을 가지고 있는 태그, css초기화 필요
<ol>...</ol> ordered list. 순서가 있다. 앞에 넘버링이 붙는다.
<ul>...</ul> unordered list. 순서가 없다. 앞에 기호가 붙는다.
<li>...</li> list. ol과 ul의 세부 항목. ol과 ul의 자식으로 li만 올 수 있다.
<dl>...</dl> definition list(정의 목록)
<dt>...</dt> 항목 definition term
<dd>...</dd> 설명 definition description
'ect' 카테고리의 다른 글
| 도어락 건전지 교체 AA 건전지 (0) | 2019.03.25 |
|---|---|
| 티스토리에 구글지도(Google map) 삽입 해보기 (0) | 2017.08.15 |
| 2016년 11월3일 부동산대책 (0) | 2016.11.03 |
| 신한카드 포인트 청구결제 또는 캐시백 전환 방법 (0) | 2016.08.19 |
| 내멋대로 웹툰 추천(죽은 마법사의 도시,달빛머리,그린보이 등) (0) | 2015.03.06 |
