HTML57 HTML5 - svg svg 요소 svg 요소는 Scalavle Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안입니다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었습니다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해줍니다. 따라서 svg 요소는 도표나 그래프 등 벡터 기반의 다이어그램을 표현하는 데 매우 효과적입니다. 사각형 그리기 svg 요소를 이용한 사각형 그리기 이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다! HTML 삽입 미리보기할 수 없는 소스 사각형을 그리는데 사용하는 rect 요소의 속성 - width : 도형의 너비를 설정 - height : 도.. 2023. 6. 26. HTML5 - Canvas canvas 요소 cnavas 요소는 웹 페이지에서 그래픽을 그리기 위해 사용되는 요소입니다. 그래픽만을 위한 컨테이너 역할을 하고 경로, 상자, 원, 텍스트 그리기 및 이미지 추가와 같은 다양한 메서드를 가지고 있습니다. canvas 요소의 폭과 높이는 CSS 픽셀로 정의되며, 명시하지 않을 경우 기본값으로 300x150 픽셀이 설정됩니다. cnavas 요소는 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작, 실시간 비디오 처리등 다양한 용도로 사용될 수 있습니다. canvas 요소의 속성 cnavas 요소는 id 와 style 속성만 존재한다. canvas 그림 그리기 사각형 그리기 이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다! HTML 삽입 미리보기할 수 .. 2023. 6. 26. HTML5 - 멀티미디어(2) Video 요소 HTML5 VIDEO 요소는 웹 문서에서 비디오를 재생할 수 있는 미디어 플레이어를 내장하는 HTML 요소입니다. 요소를 사용하여 비디오 뿐만 아니라 오디오 콘텐츠도 표시할 수 있습니다. Video 요소의 속성 src : 비디오 파일의 경로를 지정합니다. width : 비디오 플레이어의 너비를 지정합니다. height : 비디오 플레이어의 높이를 지정합니다. controls : 비디오 플레이어에 재생, 일시 정지, 볼륨 조절 등의 컨트로를 버튼을 표시합니다. autoplay : 페이지 로딩 후 비디오가 자동으로 재생되도록 설정합니다. poster : 비디오가 로딩되기 전에 보여줄 이미지를 지정합니다. loop : 비디오가 자동으로 반복 재생되도록 설정합니다. track : 비디오가 재생될.. 2023. 6. 25. HTML5 - 멀티미디어 멀티미디어 파일 형식 HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리해 왔습니다. 하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단하게 사용할 수 있게 되었습니다. 웹 브라우저는 파일의 타입(type)을 파일의 확장자로 판단합니다. 만약에 확장자가 .html인 파일을 보면, 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것입니다. 비디오(video)나 사운드(sound)와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장됩니다. 이와 같은 멀티미디어 파일도 다음과 같이 다양한 파일 형식으로 저장될 수 있습니다. 비디오 파일 형식 파일 형식 파일 확장자 설명 MPEG .mpg .mpeg Moving Pictu.. 2023. 6. 25. 이전 1 2 다음