html5정리1

Html5 정리1

추가된 태그1 = header, hgroup, nav, article, section, aside, footer 등
추가된 태그2 = mark, time, meter, progress, ruby, wbr
추가된 태그3 = main, figure, details
추가된 태그4 = datalist, output
추가된 태그5 = canvas, pucture, audio, vidio

input요소 type추가 = search, tel, url, email. Number, rage, color, date, month, week, time, datetime-local

지원중단된 태그 요소 = font, basefont, center, frame, frameset, noframges, big, strike, tt, u …

지원중단된 속성 = <a name=””>, <script language=””>, <img border=”” vspace=””, hspace=””>..

의미가 변경된 요소
<b> 강조=>주목해야할 단어를 단순히 진하게표시
<i> 이탤릭체, 강조 => 기술용어, 사상, 선명, 구문 등
<cite> 이탤릭체, 인용 => 작품의 제목 나타낼떄 씀
<hr>수평선=>컨텐츠 구분하는 의미론적 용도
<s> 취소선=>더 이상 정확하지 않거나 관련없는 텍스트
<address> 이름,이메일 전화번호등 => 실제 우편물 주소
<u>밑줄=> 철자가 틀린단어나 일반텍스트와 스타일이 다른 텍스트 표시. 사용자제(하이퍼링크과 혼란야기)
<strong> 진하게 강조=> 중요한텍스트
<small>텍스트작게=>부수적해설, 법정공지등 작은글씨 사용
<title>요소 = 제목, 즐겨찾기 제목
<link>요소 = CSS
<header>에 들어가는 base요소 = url지정
<header>=머리말
<hr>= 밑줄. = 컨텐츠를 구분하는 의미론적인 용도

hgroup=제목과 부제목을 묶어서 나타냄
nav = 메뉴

section = 제목별 나눌수 있는 문서의 콘텐츠영역구성. 하나의 섹션에 하나의 헤딩(h1~h6)만 사용
article=개별 콘텐츠, article요소안에 section, article요소 포함가능
aside=좌우측 사이드영역
footer=꼬리말(제작자,저작권 정보등)
인라인요소=이어서 한줄로 작성됨 = span, img, strong …..

블록요소=줄바꿈수행 = div, p, h1 ….
Mark = 시각적,의미적 문구또는 단어 강조 = 노락색 표시
String = 굵게 표시 = 시각적으로 중요성 강조
Time = 시간, 날짜 표현에 의미 부여
Meter = 측정값이나 분포 비율등 표시
Ruby = 일본어/한자의 발업법 나타내는 것 처럼 짧은 텍스트.
    하위요소 rt, rp와 함께 사용 
wbr = 텍스트에서 줄바꿈 허용할 위치 지정
progress=상태 진행바. 동적인 값표시에 씀. Javascript랑 같이써야함.
main요소 = body안에 유일하게 한번만 사용, article, aside, footer, header, nav 하위에 사용불가

figure = 문서흐름에 전혀 영향없음
figcaption=figure안에서 씀. Figure(사진)dyth 다음이나 맨마지막에 씀.
Detail=사용자가 핸들(>) 을 클릭하여 펼쳐지고 숨기고 하는 작용 open으로 열림. 보여짐.
Detail-summary

form요소
method=get => 2048글자(4096바이트)
<inpu>태그= 종료태그 없이 사용.

Optgroup = select하위 option들의 그룹임
<select size=”8”>
  <optgroup label=”2학년 과목”>
    <option>
    <option>
  </optgroup>
</select>

<datalist>요소=input의 list속성과 datalist의 id속성이 같아야함)
<input list=”qqq”>
  <datalist id=”qqq”>
      <option value=”인터넷익스플로러” label=”IE”>
      <option value=”파이어폭스” label=”firefox”>
<output>요소 = 값이 변하여 곧바로 반영하여 출력할떄 사용
<label>요소=시각적효과 없음. 마우스사용자 사용성 향상.
<label for=”qq”> <input id=”qq”> 2개의 값이 같으면 label클릭해도 자동으로 input선택됨

캔버스 = 기본사이즈 300px 150px 가진다
캔버스 요소에서 반드시 지정=id값 필수
캔버스에 즉시그리기=strokeRect(), fillRect(), strokreText(), drawImage()
패스path 기반으로 그리기=rect(), arc(), stroke(), fill(), lineTo(), moveTo()..
원그리기=Arc(x, y, 반지름, 시작각도, 종료각도, 그리는방향) = false(기본값 시계방향), true(반시계)
직선과 접하는 원호 그리기=artTo(x1, y1, x2, y2, 반지름)
*path로 원그릴 때 3시방향이 0도임

베지의곡선=폰트제작할떄씀 (n-1)차 곡선
2차베지의 곡선 = quadraticCurveTo(제어점x, 제어점y, 종료점x, 종료점y)
3차베지의 곡선 = bezierCurveTo(제어점1x, 제어점1y, 제어점2x, 제어점2y, 종료점x, 종료점y