(X)HTML 요점 정리

*요소의 종류와 특징

 

구분	블록 요소	인라인 요소	범용 요소
특징	- 줄 바꿈 속성을 가지고 있음.  - 기본 너비 속성이 100%임.  - 블록 요소를 포함할 수 없지만, 예외인 요소도 있음.  - 인라인 요소를 포함할 수 있음.	- 줄 바꿈 속성이 없음.  - 내용만큼 너비가 유지됨.  - 너비와 높이의 속성을 사용할 수 없음.  - 블록 요소를 포함할 수 없으며, 인라인 요소는 포함할 수 있음.	- 블록 요소임에도 불구하고 모든 요소를 포함할 수 있음.
종류	<h1>~<h6>, <p>, <address>, <blockquote>, <ul>, <li>, <ol>, <dl>, <dt>, <dd>, <div>	<q>, <em>, <strong>, <abbr>, <acronym>, <sup>, <sub>, <img>, <a>, <map>, <area>, <span>	<div>, <li>, <dd>, <address>(p 요소만 가능)

 

 

* 문단 태그

 

종류	설명	종류	설명
<h1>~<h6>	제목 요소 / 숫자가 작을수록 큰 제목	<img>	이미지 요소
<p>	단락 구분 요소	<a>	링크 요소
<address>	주소 태그, 주소를 작성할 때 사용(<p>만 포함 가능)	<map>	맵 선언 요소
<hr>	구분선 요소	<area>	맵 좌표 영역 설정 요소
<q>	짧은 인용 문구 요소	<ul>	비순차 목록 선언 요소
<blockquote>	긴 인용 문고 요소	<ol>	순차 목록 선언 요소
<em>	강조(주관적) 요소	<li>	목록 요소
<strong>	강한 강조(객관적) 요소	<dl>	정의 목록 선언 요소
<abbr>	줄임말(앞글자 줄이먜 요소	<dt>	용어 표현 요소
<acronym>	줄임말(모음/자음 조합 줄임) 요소	<dd>	용어 설명 요소
<sup>	위 첨자 요소	<div>	범용 그룹화 요소
<sub>	아래 첨자 요소	<span>	인라인 요소 그룹화 요소

 

 

* 테이블 태그와 속성

 

종류	설명	속성	설명
<table>	표의 시작과 종료	width="너빗값"	표 너비
		border="선 두껫값"	표 선 두께
		summary="테이블 요약 내용"	표 내용 요약
		cellspacing="셀 간격"	셀과 셀의 간격
<tr>	한 행의 시작과 종료
<th>	제목 열(cell)	scope="col"	열 제목일 경우
		scopr="row"	행 제목일 경우
<td>	데이터 열(cell)	rowspan="행 개수"	행 합치기
		colspan="열 개수"	열 합치기
<caption>	표 제목
<colgrop>	열 그룹 시작과 종료
<col>	열 그룹 설정	width="열 너비"
<thead>	표 머리 영역(셀 제목 영역)
<tbody>	표 본문 영역(데이터 영역)
<tfoot>	표 바닥 영역(통계, 합계 등)

 

 

* 폼(form) 태그와 속성

 

종류	설명	속성		설명
<form>	입력 양식 영역 (전송 역할)	name		폼 이름
		method		전송 방식(get, post)
		action		입력값을 전송할 페이지
<fieldset>	입력 요소 그룹화
<legend>	그룹 제목
<input>	입력 요소	type	text	한 줄 글상자
			password	비밀번호
			checkbox	취미, 관심 과목(중복 선택 상자)
			radio	성별, 수신 여부(단독 선택 상자)
			submit	확인 버튼(전송 기능)
			reset	취소 버튼
			image	이미지 버튼(전송 기능)
			file	파일 첨부
			button	범용 버튼
			hidden	화면 표시 안 됨(숨긴 값을 전송)
		value		입력값
		name		요소 이름
		id		요소 아이디
<label>	입력 요소 제목	for		입력 요소 아이디와 일치해야 함.
<textarea>	여러 줄 글 상자	rows		지정 행만큼 높이 지정
		cols		지정 열만큼 너비 지정
<select>	선택 상자
<option>	선택 상자 옵션	value		옵션값

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)