HTML5 - 190602 Basic Study 8(Note)

멀티미디어 태그

embed

object

html5 이전 부터 사용하던 표준태그

video

source

audio

새로 추가된 모바일 겸용 태그

./ 현재폴더

../ 부모폴더

object 지원 안되는 브라우져를 위해 embed를 삽입했다.

iframe

allowfullscreen : 전체 화면 보기

audio

video

source

음악파일 - mp3 ogg wav

동영상파일 - mp4 webm flv

webm 구글에서 만든 멀티미디어파일 크롬에서만 동작함

audio 속성 : src 경로 / preload 미리다운받기 / autoplay 자동재생 / loop 반복 / controls 재생기 보이기 / muted 음소거

type 주면 브라우져가 해석하는 시간을 줄일 수 있다.

웹접근성을 향상하기 위한 코딩.

익스플로러 - 차단된컨텐츠 허용

크롬개발자 - network - ctrl+r 누르면 현재 페이지에 다운로드 되는 값을 알수 있다

poster : 대문사진

track : 자막태그

iframe : insert frame 페이지를 삽입할 수 있는 태그내부에

frame 태그 : 비표준

회원가입

화면을 제작 > 디자이너

포토샵 일러스트

파워포인트로 시안디자인

배치 글꼴 색상 콘셉트 지정

웹디자이너 css까지

코딩 -> 배치, 스타일, CSS, JS

검증(verifiy)

웹퍼블리서

입력한 개인데이터 -> 서버, DB에 저장

명시적 기법(권장)

묵시적 기법

value : 기본값

ctrl + space : 코드 힌트

placeholder : 안내문자 / 헬프문자 / 가이드텍스트

fieldset

legend

디자이너의 덕목 : 주목성 / 심미성 / 안정성 / 심리성 

라디오 버튼은 하나의 그룹으로 묶어야된다.

checked : 라디오버튼의 기본으로 클릭

action : 회원 가입 후 넘어가는 페이지를 지정

required : 필수 지정 사항 생성

selected : 기본값

overflow:hidden : 스크롤바 숨기기 css

style="resize:none" : 크기변경 금지(크롬을 위해)

html5에 새로추가된 입력양식 속성 및 추가 고급속성

ex> placehold / required

웹 디자인 기능사 시험

모바일에서 키보드 자판배열을 자동으로 변경된다.

@

숫자키패드

추가고급속성

redonly 읽기전용 / autofocus 자동포커스 / required

minlength="4" maxlength="12"

유효성 검사 : pattern="\d{3}-\d{3,4}-\d{4}"

figure

figruecaption

detalis

summary

progress

meter

박스형태그

글자형태그

inline - block 태그(박스 + 글자) : img / input

details

summray

블럭

-가로세로 크기지정가능

-마진 패딩가능

-세로로 배치

인라인

-가로세로 크기 지정 불가능

-좌우마진 패딩만 가능

-가로로배치

부모박스 > 자식박스

div > p

div > h1 > span

div > h1 > p(x)

section > article > (h1+p)

p > h1(x)

p > address

adress > p (x)