HTML정리1(저장용)

마크업 : 화면에 표시할 내용에 태그를 사용해서 역할을 구별해 주는 것

 

특수기호 사용하기

https://dev.w3.org/html5/html-author/charref

Character Entity Reference Chart

meta

 

리스트

ol에는 type, start 속성이 있다(type="a", start="3")

dl, dt dd태그 - 설명 목록 만들기

 

표

table, thead, tbod, tfoot

tr 행

th, td 열

caption 제목

colspan, rowspan(열합치기,행합치기)

colgroup, col : 스타일(크기, 색)

 

이미지

figure, figcaption -이미지에 설명 글 붙이기

map, area, usemap - 이미지 맵 지정하기

<img src="images/kids.jpg"  alt="" usemap="#favorites">
<map name="favorites">
  <area shape="rect" coords="10,10,160,200" href="http://cafe.naver.com/doithtml5" target="_blank" alt="do it html5 네이버 카페로 가기">
  <area shape="rect" coords="220,10,380,200" href="http://www.facebook.com/do.it.html5" target="_blank" alt="do it html5 페이스북 페이지로 가기">
</map>

 

form

method, name, action ,target

autocomplete="off" - 자동완성끄기

 

label - form 요소에 레이블 붙이기

1. label 태그 안에 폼 요소를 넣는 것

2. label for, input id를 연결해서 따로 사용하기

checkbox와 radio에서 2번 방법이 유용(text를 써도 label을 클릭하면 input이 클릭되서 유용)

 

fieldset - 하나의 영역으로 묶고 외곽선을 그림

legend - fieldset에 제목을 붙임

 

input type종류

hidden : 숨김

text : 텍스트상자

search : x버튼으로 검색어 지우기 가능

tel : 그냥 전화번호라는것만 알게, 바로 전화걸 수 있게

url : http

email : @포함

password : ***

datetime : 연월일시분초분할초(min, max, step)

datetime-local : 연월일시분초분할초 조정가능(min, max, step)

date : 연월일 조정가능

month : 연월 조정가능

week : 연주 조정가능

time : 시분초분할초 조정가능(min, max, step)

number : 숫자조절 화살표

range : 슬라이드 막대(퍼센트)(min, max, step)

color : 색상표

checkbox : 2개이상선택가능

radio : 1개만 선택가능

(checkbox, radio에서 name으로 구분, checked면 선택)

file : 파일첨부

submit : 전송

image : 전송(이미지)

reset : form내용 초기화

button : 버튼

 

input 속성 종류

autofocus : 입력 커서 표시하기

placeholder : 힌트

readonly : 읽기전용(true, false, readonly="readonly")

required : 필수 필드(입력안하면 오류 메시지 띄움)

min, max, step : 최소, 최대, 간격

size, minlength, maxlength : 길이(보이는 길이), 최소 길이 ,최대 길이

disabled(책에는 왜없지..) : 불가능하게

 

select, optgroup, option : 드롭다운 목록 만들기

select 속성 : size(화면에 표시될 드롭다운 메뉴의 항목 개수 크롬은 +1), multiple(브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다.)

option 속성 : value, selected

optgroup : 옵션끼리 묶기(공과대학~~~ 인문대학~~~)(선택불가능)

 

datalist, option

input list와 datalist의 id를 같게

<li>
	<span class="reg">관심분야</span>
	<label for="interest"></label>
	<input type="text" id="interest" list="choices">
	<datalist id="choices">
		<option value="grammar" label="문법"></option>
		<option value="voca" label="어휘"></option>
		<option value="speaking" label="회화"></option>
		<option value="listening" label="리스닝"></option>
		<option value="news" label="뉴스청취"></option>
	</datalist>
</li>

 

textarea 여러 줄 입력

속성 : name, cols, rows

 

button

type : submit, reset ,button

 

output : 계산결과(화면에서 다르게 표시되는 것은 아니지만 계산의 결과 값이라는 것을 웹이 인식

	<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
		<input type="number" name="num1" value="0">
		+<input type="number" name="num2" value="0">
		=<output name="result" for="num"></output>
	</form>

 

progress : 진행 상태 보여주기

meter : 값이 차지하는 크기 표시

속성 : min, max, value, low ,high ,optimum(이 정도면 적당하다)

high, low에 따라 색상이 다름

(두개 태그가 혼동되기도 하지만 progress는 진행 상황, meter는 전체 크기 중에서 얼마나 차지하는지)

 

출처 : do it! HTML5+CSS 웹표준의 정석