Jaybon 의 지식창고

폼 태그

사용자 입력을 위한 HTML 양식을 만드는 데 사용

입력 컨트롤을 선언하기 위해 form 요소 내에서 사용됨

<input> <textarea> <button> 등

accept_charset 입력 데이터에 사용될 문자 인코딩 (utf-8 등)

action 입력데이터의 전달 위치를 지정

method 입력데이터의 전달 방식을 선택

enctype 입력데이터를 서버에 보낼 때 인코딩 할 방법을 지정(method속성을 post로 할때만 사용가능)

name 입력데이터의 form 양식의 이름을 지정

novalidate 입력데이터 전달 시 데이터의 유효성 감사를 하지않음

target 데이터 전달 후 서버 응답을 표시할 위치 지정

폼태그 전달 순서

폼이 있는 웹페이지에 내용입력

->폼 안에 있는 모든 데이터를 웹서버로 전송

->데이터 처리 위해 웹 프로그램 실행

->웹 프로그램이 폼 데이터 처리

->처리결과를 다른 html페이지 웹 서버로 전송

->사용자 브라우저에 전송

->브라우저는 받은 내용을 보여줌

input 태그

인풋 타입

html5 이전버전에서는 '플러그인'을 이용하여 미디어를 재생하였음.

예를 들어 '플래시 플레이어' 등이 있다.

하지만 html5에서는 이미지, 오디오, 비디오 태그 등의 미디어 기능을 자체 제공한다.

이미지태그

<img> 태그는 src, alt의 두 가지 필수 속성을 가짐.(src만 사용도 가능)

이미지를 선언한 태그는 참조된 이미지를 위한 공간을 생성하고

그 공간에 참조된 이미지를 참조할 수 있도록 링크 시킴.

<img src = "imgfile.jpg" alt = "이미지가 없을경우 설명" width = "" height = "">

이미지 태그의 속성

alt 이미지가 없을경우 설명

width, height 너비와 높이

src 이미지 소스 경로

이미지 태그 사용 예시 보기

오디오 태그 

xhtml5 에서의 태그

<audio src = "audiofile.mp3" controls = "controls" autoplay = "autoplay"></audio>

html5 에서의 태그 (파일과 MIME타입을 입력)

<audio controls loop autoplay>

    <source src =  "audiofile.mp3" type = "audio/mpeg">

    <source src =  "audiofile.ogg" type = "audio/ogg"> <!-- 위의 소스가 안될경우 -->

</audio>

오디오태그 속성

autoplay 자동재생

controls  음악 재생도구 출력 여부

loop 음악을 반복할지 여부

muted 음소거

preload 음악을 재생하기전에 불러올지 여부

src 음악파일의 경로 

비디오태그

비디오타입은 mp4 webm Ogg 등을 지원

webm ogg 는 익스플로러와 사파리에서 미지원

source 태그는 브라우저별 지원 가능한 비디오 파일 형식이 다르기 때문에 같은

비디오 파일을 지정하여 모든 브라우저에서 실행 가능할 수 있게 해줌.

xhtml5 에서의 태그

<video src = "videofile.mp3" controls = "controls" autoplay = "autoplay"></audio>

html5 에서의 태그 (파일과 MIME타입을 입력)

<video controls loop autoplay>

    <source src =  "videofile.mp4" type = "video/mp4">

    <source src =  "videofile.ogg" type = "video/ogg"> <!-- 위의 소스가 안될경우 -->

</video>

비디오태그의 속성

autoplay 자동재생

controls 재생도구 여부

width, height 비디오의 너비와 높이 지정

loop 비디오 반복재생 여부

muted 음소거 여부

poster 비디오를 준비중일때의 이미지 파일 경로 지정

preload 비디오를 재생하기 전에 모두 불러올지 지정

src 비디오파일의 경로

위 코드를 적용하면 아래 처럼 나옵니다.

<pre> 입력한 글 구성대로 출력 , 웹상에 코드 등을 올릴 때 활용.

<blockquote>인용문을 사용할 때 활용.

<b> <i> <small> <sub> <ins> <del>  글자형태 설정

<ol> <ol reserved> <ol start = "숫자"> <ol type ="1/a/A/I/i/disc/square/circle" start = "숫자"> 순서가있는 목록

<ul type = "square/circle"> 또는 <ul compact> 순서가없는 목록

<li type = "1/a/A/I/i/disc/square/circle"> 등등 <ol> <ul> 안에서 사용

<dl> 정의 목록을 선언할때 사용

<dt> 용어 제목

<dd> 용어에 대한 설명

<table> <caption> <clogroup> <tr> 행 <th>행의 타이틀 <td>열  테이블태그 (최근 표를 만들 때만 쓰이는 추세)