HTML5의 Form 속성 중 formaction 속성을 사용하게 되면 다중의 submit에 각각 다른 액션을 지정할 수 있다.
<form>
<button type="submit" formmethod="GET" formaction="/test" value="테스트페이지로"/>
<button type="submit" formmethod="POST" formaction="/check" value="체크페이지로"/>
</form>
브라우저별 지원 여부
| 크롬 | 익스플로러 | 파이어폭스 | 사파리 | 오페라 |
| 9.0 | 10 | 4.0 | 5.1 | 15.0 |
formaction에 입력하게되는 URL은 상대 경로(/test) or 절대 경로(http://www.[사이트명]. com/test) 모두 입력이 가능하다.
| [HTML5] Audio & Video (2) | 2012.08.28 |
|---|---|
| [HTML5] canvas (0) | 2012.08.27 |
Audio & Video
미디어 재생 API 정리
- 속성
| src | src 속성 값 |
| currentSrc | 실제로 읽어 들여 재생 중인 미디어 데이터의 URL |
| currentTime | 현재 재생 위치(시간) |
| startTime | 재생할 위치(시간) |
| duration | 미디어 데이터의 길이(시간) |
| paused | 일시 정시 상태 여부를 반환 |
| defaultPlaybackRate | 기본 재생 속도, 기본 값은 1.0 |
| playbackRate | 재생 속도, 기본 값은 1.0, -일 경우 역재생 |
| ended | 재생 종료 여부를 반환 |
| muted | 음소거 여부를 반환 |
| volume | 음량(0.0~1.0) |
- 함수
| load() | 동영상을 다시 읽어 들임 |
| play() | 동영상을 재생 |
| pause() | 재생 중인 동영상을 일시 정지 |
| [HTML5] Form 다중 submit (0) | 2021.01.12 |
|---|---|
| [HTML5] canvas (0) | 2012.08.27 |
Canvas 태그 사용
- html body에서 id가 canvas인 canvas태그를 생성한다.
- canvas태그내에 글씨를 삽입함으로써, canvas를 지원하지 않는 브라우저에 대해서 대응할수 있도록 한다.
예시 )
<canvas id="canvas" width="600" height="300">
Canvas를 지원하지 않는 브라우저입니다.
</canvas>
드로잉 컨텍스트 생성
- script에서 getElementById를 사용하여 드로잉 컨텍스트를 생성한다.
예시 )
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
선 / 도형 그리기
- 아래와 같은 순서로 진행하여 선/ 도형 그리기를 진행한다.
1. 패스 그리기 시작
- beginPath();
2. 서브 패스 그리기
2.1 직선을 그리는 메소드 (line)
- moveTo(x, y);
- lineTo(x, y);
2.2 사각형을 그리는 메소드 (rect)
- rect(x, y, 사각형의 폭, 사각형의 높이 );
2.3 원 또는 원호를 그리는 메소드 (arc)
- arc( x, y, 반지름, 시작각도, 종료각도, 시계/반시계 );
3. 패스 그리기 닫기
- closePath();
4. 그리기/채우기
- stroke(); or fill();
사각형 그리기
- 기본적으로 사각형을 그리기는 함수가 제공되어 있다.
strokeRect ( x, y, 사각형의 폭, 사각형의 높이 );
fillRect (x, y, 사각형의 폭, 사각형의 높이 );
clearRect ( x, y, 사각형의 폭, 사각형의 높이 );
스타일 지정
- stroke()나 fill()을 호출하기 전에 context에 스타일을 지정한다.
예시 )
context.fillStyle = "red";
context.strokeStyle = "#114255";
| [HTML5] Form 다중 submit (0) | 2021.01.12 |
|---|---|
| [HTML5] Audio & Video (2) | 2012.08.28 |